{"componentChunkName":"component---src-templates-info-posts-js","path":"/information/AI/ea4f1d31-6145-524b-b517-68a0d0d352bc","result":{"data":{"microcmsInformation":{"id":"ea4f1d31-6145-524b-b517-68a0d0d352bc","title":"OpenCode 2実践編：無料のDeepSeek V4.1 Flashでタスク管理アプリを作る","date":"2026 年 10 月 15 日","image":{"url":"https://images.microcms-assets.io/assets/52137c02cafa4450bbdc092b64fbadac/49c6f9410da146e9bb082330d8d4cd64/opencode-deepseek-v4-1-flash-hero.png"},"author":{"author":"Goubara"},"body":"

前回の記事では、OpenCode 2の導入からモデル選択、PlanとBuildの使い分け、MCPによる外部サービスとの接続までを紹介しました。今回はその続きとして、1つのアプリを作るところまで進めます。

使うモデルは、DeepSeek V4.1 Flashです。OpenCodeの公式モデル一覧には、無料で利用できる「DeepSeek V4.1 Flash Free」が追加されています。コードを書かせて終わるのではなく、仕様を考え、実装し、動作を確認して修正する流れを、このモデルでたどります。

なお、公式ドキュメントでは無料提供を期間限定としています。本記事のモデル名と提供条件は2026年10月15日時点のものです。OpenCode公式モデル一覧

今回作るのは、ブラウザで動くタスク管理アプリ

題材には、個人用のタスク管理アプリを選びます。最初に作る機能は次の5つです。

HTML、CSS、JavaScriptで作り、データはブラウザのlocalStorageに保存する構成にします。ログイン、データベース、外部APIは使いません。

最初の題材を小さくしておくと、生成されたコードと画面の動きを対応させやすくなります。たとえば、タスクの追加は動くのに、再読み込みすると消える。その場合は、保存や読み込みの処理を調べる、というように問題を絞れます。

この記事では、OpenCode 2のインストールが済んでいることを前提にします。後半のプレビューには、Node.jsとnpmに含まれるnpxを使います。

Windowsで実際に生成し、25項目を確認した

今回の検証では、Windows上のOpenCode 2.0.18から opencode/deepseek-v4.1-flash-free を指定して、PlanとBuildを実行しました。生成されたアプリ本体を手作業で修正せず、ブラウザで動作を確認しています。

項目

検証内容・結果

生成されたファイル

index.html、style.css、app.js、README.md

基本操作

追加・完了切り替え・絞り込み・削除が動作

データ保持

再読み込み後も本文と完了状態を復元。削除結果も保持

入力

空欄・空白のみを拒否し、HTMLタグは文字列として表示

キーボード

Enterで追加、Spaceで完了切り替え、Tabで削除ボタンへ移動、Enterで削除

狭い画面

375px・320px幅で横スクロールが発生せず、操作部品が画面内に収まる

保存エラー

破損JSON、不正なデータ形式、読み込み拒否、保存失敗を検証用ページで再現

通常の画面操作など20項目と、意図的に障害を発生させた5項目の計25項目が通りました。画面幅の確認はブラウザの表示幅を変えたもので、スマートフォン端末での検証は含みません。

以下は、タスクを2件追加し、片方を完了にしてから再読み込みした画面です。本文と完了状態が保持されています。

\"\"

無料版のDeepSeek V4.1 Flashを選ぶ

まず、作業用のディレクトリを作ってOpenCodeを起動します。以下はPowerShellでも使えるコマンドです。

mkdir opencode-task-demo\ncd opencode-task-demo\nopencode\n

起動したら、モデル一覧を開きます。

/models\n

一覧で選ぶのは、DeepSeek V4.1 Flash Freeです。公式カタログでは、通常版と無料版は別のモデルIDとして登録されています。

表示名

モデルID

DeepSeek V4.1 Flash Free

deepseek-v4.1-flash-free

DeepSeek V4.1 Flash

deepseek-v4.1-flash

OpenCode提供の無料版を指定する場合の形式は、次のとおりです。

opencode/deepseek-v4.1-flash-free\n

通常版には別の料金設定があるため、無料枠で進める場合は「Free」まで確認してください。モデルIDと料金の公式一覧

OpenCode側のプロバイダーにまだ接続していない場合は、/connect から接続を進めます。認証やAPIキーの入力を求められたら、接続画面と公式Consoleの案内に従ってください。その後、もう一度 /models を開きます。プロバイダー接続の公式手順

今回の検証環境では、OpenCode用のAPIキーを追加登録せずに無料モデルを実行できました。

毎回同じモデルを使いたい場合は、プロジェクト直下の opencode.jsonc に既定値を書けます。設定ファイルがすでにある場合は、既存の内容に model を追加します。

{\n  "$schema": "https://opencode.ai/config.json",\n  "model": "opencode/deepseek-v4.1-flash-free"\n}\n

/models での選択は現在のセッションに適用され、設定ファイルの書き換えは行いません。また、既存セッションで選んだモデルは設定ファイルの既定値より優先されます。設定を変えた後も、セッションの使用モデルを確認しておくと確実です。モデル選択と既定値の仕様

Planで仕様とファイル構成を決める

モデルを選んだら、エージェントをPlanに切り替えます。Planは、通常のプロジェクトファイルを編集せず、調査や実装計画を進めるためのエージェントです。シェル操作には引き続きPermissionの設定が適用されます。PlanとBuildの公式説明

なお、今回の検証ではCLIの --model と --agent でモデルと役割を指定しました。本文で案内している /models での選択や画面上のエージェント切り替えは、公式資料に基づく操作案内です。

まずは、次のように依頼します。

ブラウザで動く個人用のタスク管理アプリを作りたいです。\nまず実装計画を考えてください。まだファイルは変更しないでください。\n\n要件：\n- HTML、CSS、JavaScriptを使う\n- フレームワークと外部APIは使わない\n- タスクの追加、完了切り替え、削除ができる\n- すべて・未完了・完了で表示を絞り込める\n- localStorageでデータを保存する\n- 空欄や空白だけのタスクは追加できない\n- 日本語の画面にする\n- スマートフォンでも操作できる\n\n提案してほしいもの：\n1. ファイル構成\n2. タスクのデータ構造\n3. 実装する順番\n4. 動作確認する項目\n

ここで確認したいのは、要件と提案が合っているかです。ログイン機能やクラウドDBが追加されていたら、今回の範囲から外します。ファイル構成も、アプリ本体は index.html、style.css、app.js 程度で十分です。

計画に手を入れたいときは、その場で条件を足します。

アプリ本体はindex.html、style.css、app.jsの3ファイルにしてください。\n起動方法と手動確認の手順はREADME.mdにまとめてください。\nタスクの並び替えや期限の設定は、今回は追加しないでください。\nこの条件で計画を更新してください。\n

最初の計画で、何を作るかと、どこまでできたら完成とするかをそろえておきます。

Buildに切り替えて実装する

計画が固まったら、Buildに切り替えます。Buildは、ファイルの作成・編集やコマンド実行を含む開発作業を担当します。エージェントの役割

実装の依頼では、合意した計画を参照しながら、確認してほしい処理も伝えます。

合意した計画に沿って実装してください。\n\n追加の条件：\n- タスク本文はHTMLとして解釈せず、文字列として表示する\n- 保存データの読み込みに失敗しても、画面全体が操作不能にならないようにする\n- 保存に失敗した場合は、利用者が分かるメッセージを出す\n- 入力欄とボタンに分かりやすいラベルを付ける\n- キーボードでも追加・完了切り替え・削除を操作できるようにする\n- 新しい依存パッケージは追加しない\n- タスクの削除は確認ダイアログを出さず、その場で行う\n\n実装後に、作成したファイルと役割、確認した内容、\nまだ確認できていない内容を説明してください。\n

タスク本文の表示方法まで指定しているのは、入力した内容がそのまま画面に出るアプリだからです。見た目だけを頼むと抜けやすい条件を、入力・保存・操作の単位で補っています。

OpenCodeが完了を報告したら、作成されたファイルと説明を確認します。ブラウザ操作を行っていない場合は、画面上の動作確認はこれからです。

今回のBuildは、ファイル生成とモデル側の確認処理を含めて約5分51秒でした。実行ログに記録された cost は0です。これは今回の実行ログの値であり、請求管理画面の明細確認は行っていません。

\"\"

モデル自身もNode.js上で確認を行いましたが、OpenCode側からのブラウザ接続は失敗していました。そのため、ここからの画面確認は別途こちらでブラウザを操作して行っています。また、モデルの最後の説明が中国語になる場面がありました。アプリの画面は日本語で生成されています。

ブラウザで動作を確認する

OpenCodeとは別のターミナルを開き、作業ディレクトリで次のコマンドを実行します。Node.jsとnpxが必要です。

npx http-server . -a 127.0.0.1 -p 8080 -c-1\n

初回にパッケージの取得を確認されたら、内容を確認して進めます。起動後は、ブラウザで http://127.0.0.1:8080 を開きます。

ここで使っている http-server は、静的ファイルを配信するためのプレビューツールです。-c-1 はキャッシュを無効にする指定で、修正後の表示を確認しやすくします。終了するときは、サーバーを起動したターミナルで Ctrl+C を押します。http-server公式README

画面が表示されたら、次の項目を確認します。

操作

期待する結果

日本語のタスクを追加する

入力した文字が一覧に表示される

空欄や空白だけで追加する

タスクが追加されない

タスクを完了にする

状態と表示が切り替わる

未完了・完了で絞り込む

条件に合うタスクだけが表示される

2件のうち1件を削除する

選んだタスクだけが消える

ブラウザを再読み込みする

タスクと完了状態が復元される

<b>テスト</b> を追加する

タグも含めて文字列として表示される

画面幅を狭くする

入力欄やボタンが隠れず操作できる

キーボードで操作する

フォーカス位置が分かり、各操作を実行できる

追加・完了・削除がそれぞれ動いていても、絞り込み中だけ別のタスクを操作してしまうことがあります。基本操作を確かめた後は、「完了だけを表示した状態で削除する」のように、機能を組み合わせて確認してください。

実際に「資料を読む」と「メールを返す」を追加し、後者だけを完了にしました。「完了」では「メールを返す」だけが表示されます。

\"\"

その状態で削除してから「すべて」に戻すと、「資料を読む」だけが残りました。今回の生成コードでは、絞り込み中も正しい対象を削除できています。

\"\"

375px幅では入力欄と追加ボタンが縦に並び、長い本文は折り返されました。320px幅でも横へのはみ出しはありませんでした。

\"\"

保存に失敗したときも、画面を操作できるか

保存処理については、通常の操作だけでは確認しにくいエラーも試しました。アプリ本体を変更せずに読み込む検証用ページを別のポートで用意し、破損JSONや保存時の例外を意図的に発生させています。

破損JSONを読み込ませると、「保存データを読み込めませんでした。空の状態で開始します。」と表示されました。その後に新しいタスクを追加すると、画面を継続して操作できました。

保存時に QuotaExceededError を発生させた場合も、画面上のタスクは表示され、保存できなかったことがメッセージで伝えられました。この状態では保存成功を確認できていないため、再読み込み後も残るとは扱いません。

\"\"

不具合は、再現手順と期待結果をセットで伝える

問題が見つかった場合は、OpenCodeに修正を依頼します。今回の検証では、以下の削除不具合は再現しませんでした。次の文章は、同様の問題が起きた場合の報告例です。

完了済みタスクの削除で、違うタスクが消える問題があります。\n\n再現手順：\n1. 「資料を読む」を追加する\n2. 「メールを返す」を追加する\n3. 「メールを返す」だけを完了にする\n4. 表示を「完了」に切り替える\n5. 表示されている「メールを返す」を削除する\n\n期待する結果：\n「メールを返す」だけが削除される。\n\n実際の結果：\n「資料を読む」が削除される。\n\n原因を調査し、この問題に関係する範囲を修正してください。\n修正後は、全件表示と絞り込み表示の両方で、\n削除対象を正しく特定できるか確認してください。\n

この情報があれば、モデルは画面の状態を再現しながらコードを調べられます。エラーメッセージが出ている場合は、それも添えます。

一度に複数の不具合が見つかったときも、再現手順を分けて伝えます。修正後は、問題が出た操作に加えて、関連する基本操作ももう一度確認します。

機能追加は、最初の要件が動いてから

タスク管理アプリには、期限、優先度、検索、並び替えなど、足したくなる機能がいくつもあります。最初の5機能が動いたら、そのうち1つを選んで追加してみます。

ここからは発展課題です。検索機能の追加は、今回の25項目の検証には含めていません。

たとえば、検索機能なら次のように依頼できます。

タスク本文を検索する機能を追加したいです。\nまず、現在のコードを確認して変更計画を説明してください。\n\n要件：\n- 入力した文字列を含むタスクを表示する\n- 完了・未完了の絞り込みと併用できる\n- 検索欄を空にすると、検索条件を解除する\n- 保存済みのタスクデータの形式は変えない\n\n変更が必要なファイルと、追加後の確認項目を示してください。\n

ここでもPlanで影響を確認し、Buildで実装する流れを使えます。新しい機能を加えるたびに、既存の追加・完了・削除・保存が引き続き動くかを確認します。

同じプロジェクトのままモデルを切り替える

今回の作業を通じて、OpenCodeが扱うプロジェクトと、その中で作業するモデルの関係も見えてきます。ファイルは作業ディレクトリに残り、使用モデルは /models から選び直せます。モデル選択の公式仕様

後から別のモデルを使う場合に備えて、READMEには仕様と起動方法、確認済みの項目、残っている課題を残しておくと便利です。モデルが変わっても、プロジェクトの前提をファイルから読み取れるようになります。

無料枠で基本の流れをつかみ、その後、同じ課題を別のモデルに依頼してみるのも1つの使い方です。その際は、最初の出力だけでなく、要件を満たすまでに必要だった修正や確認も含めて比べると、作業との相性を判断しやすくなります。

次は、自分の作業に必要な小さなツールへ

タスク管理アプリで流れをつかめたら、CSVの列を整えるツールや、文字数を数えるツールなど、自分が繰り返し行っている作業に置き換えてみてください。

最初に決めるのは、入力するもの、処理すること、出力してほしいものです。そこからPlanで構成を考え、Buildで実装し、実際のデータで確かめます。

前回の記事で紹介したPlanとBuildは、この往復のために使えます。DeepSeek V4.1 Flash Freeを選んだら、まずは動作を自分で確かめられる規模のツールから始めてみてください。

参考リンク

","category":{"category":"AI"}}},"pageContext":{"id":"ea4f1d31-6145-524b-b517-68a0d0d352bc"}},"staticQueryHashes":["3649515864","63159454"]}