Claude codeで「言葉を調べるアプリ」を作ってみたよ！

OFFです。余談を。

AI全盛ですよね。全盛もなにも、ここからさらに盛り上がり、生活の中心になっていくのではないかという盛り上がり。

AIが人間の知能を超える「シンギュラリティ」といわれる瞬間がもう数年以内にくるのではないかと。

産業革命なんて目じゃない大きな変革がやってくるなんて言う人も。

 

チャッピーなんて言われてもてはやされたチャットGPTは、今や（2026年5月現在）ClaudeというAIに押されて2番手3番手の雰囲気に。

私も半年ぐらいから課金していたチャットGPTを解約し、先月からClaudeのproプランに乗り換えたところです。（geminiもAI Plusという安価なプランに入ってます）

本の執筆に、日常の調べものに、健康相談に、人に聞きにくい質問に。AIを日々いろいろと利用する日がやってきましたね。

プログラミングの知識ゼロでアプリ作成が出来るClaude codeが気になる！

さて、AIを触るようになってずっと気になっていたのがClaude codeです。

なんでも、Claudeの中の機能の１つで、プログラミングの知識が無い人でも、AIと会話をしながらアプリを作成できるというものらしいです。

Claude Code（クロードコード）は、Anthropic社が開発した、ターミナルで動作する自律型AIコーディングエージェントです。自然言語で指示を出すだけで、コードの生成、修正、ファイル操作、テスト実行、Git操作までを自動で行います。従来のチャットAIと異なり、開発環境に直接介入して作業を完結させる能力を持ちます。

こうして専門用語を使って説明されると、もうなんだか理解がぼやけちゃいますよね(+_+)

「ターミナルで動作する？」「自立型AIコーディングエージェント？」「Git操作？」

わからない言葉が多くて教科書が読めないなんていう勉強苦手な子の視界をリアルに見るようです。

WEBサービスを自分で作ることが出来るだなんて、素敵ですよね。学習指導に活かせたらいいじゃないですか。

俄然興味がありますよ。

塾フェスで登壇してくれた常石さん＠スプリックスも言ってました。

「たいがいのWEBサービスは自分で作れる時代になりました」なんて。

その言葉に感化された篠崎先生＠HOME個別は、その日の夜からClaudeでアプリを作って、次の日には出来たアプリをXで報告してくれてました。

今日はAIの話をたくさん聞いたのでベッドに寝転びながら試しにアプリを作ってみようかなとスマホを触っていたらすぐできちゃって割と使い勝手も良さそう。今更だけどこりゃすごい。来週からこのアプリ使おう。

— 勉強犬🐶第二の家 (@homekobetsu) April 12, 2026

こんな感じ。 pic.twitter.com/bHIjgYX54A

— 勉強犬🐶第二の家 (@homekobetsu) April 13, 2026

参りました。篠崎先生のこの行動の早さとフットワークと軽さに。

私がずっと気になっていたAIを利用したアプリ制作を、こんなに軽やかに作られてしまうと、自分の腰の重さが情けなくなりますね(+_+)

これは俺も動かなきゃ。

恐らく篠崎先生と比べると、私の方が基礎知識も無いしアプリ制作にはもっと時間がかかるはずです。

よって日常にちょっと挑戦してみようというのは無理がある気がします。

自分も近々挑戦するけど、ちょっと準備をしよう。そうだ、挑戦日はゴールデンウィーク中にしよう。

こんな経緯で、私のグーグルカレンダーには5月4日に「Claude code挑戦日」と4月中旬に書きました。

Claude code挑戦に向けて下調べを！

さあ、挑戦日が決まりましたし、下調べをしていきましょう。なにせいろいろ知識ゼロなんで、まだ全体がボンヤリとしています。

そんなところに私の理解を高めてくれたのが安野さん＠チームみらいのこの動画です。

バイブコーディングという名前をここで知りました。

バイブコーディング（Vibe Coding）とは、人間がコードを1行ずつ書く代わりに、AIツール（Cursorなど）に自然言語（日常の言葉）で指示を出し、AIに高速でコード生成・修正・実行を繰り返させる開発スタイルです。雰囲気（Vibe）で動くものをAIと作っていく感覚から名付けられ、2025年にAndrej Karpathy氏が提唱しました。

なるほど。これこれ、これやりたいのよ。

そして第二回が一番熱いです。

この動画でアプリを作り上げるまでの全体像がボンヤリと見えてきてます。語られる言葉は全て初耳ですけどね。

「ふぅん、そういう世界で出来てるのね」と、大枠を見せてもらえたのが良かったです。

政治家になるぐらいの人ですから、喋りが上手。例えも上手。

この動画は何度か見返しました。その後ここで紹介されてたものが出てきたときには「安野さんが言ってたやつ！！」なんて嬉しくなりましたね(´▽｀)

 

ここまで安野さんに教えてもらった１つ１つの知識が、この動画で立体的になりました！この動画熱かった！

思わずnews picksの無料トライアルに入って、フル視聴しちゃいました。この素人が挑戦する過程が見たかった。

動画の中で紹介されていたこの図で、安野さんが言ってた言葉たちがどう活かされているのかがだいぶ見えてきましたね。ありがたや。

かかっていたもやが少し晴れてきました。準備整ってきてますよ。

Claudeチャットで英単語の読み上げアプリが出来た！

さて、どんなアプリを作ろうかと、Claudeのチャットで会話をしている中で、英単語の読み上げをするアプリを作ってみることに。

Claudeが言うには、このレベルであればClaude codeを使わずともこのチャット上で完成するよと。

他のサービスを組み合わせたりして動かすアプリになるとClaude codeの出番みたいですが、シンプルなものならばチャットだけでいけると。

そう？じゃあ作ってよと、会話を何度かしたらスッと作ってきました。

ヒー！！！すげーっ！！

ホント、サッと作りおった。

各ブラウザ（？）に入ってるネイティブの合成音声を利用して読み上げるものが出来ました。

読み上げ回数を増やすこと、ジャンルごとで読むこと、カナと日本語訳の表示を選ぶこと。これらは後からリクエストして加えてもらった機能です。

どんな風に加えようかはClaudeの方からいくつかの案を提案してくれて、それを選びながら完成です。

こうして、作りたいアプリによっては、Claude codeを使うまでもないということがわかりました。

思いがけずClaude codeデビュー！

そして挑戦日である5月4日がやってきました。

むむむ。

今日はClaude codeの挑戦日なのに、どんなアプリを作ったらClaude codeを使えるかまではわからんなぁ～という状況に。

 

ひとまず作ってみたいアプリの相談をチャットにし始めました。スタートはここから。

語彙力強化になるようなアプリを作りたいです。わからない言葉を写真に撮って、その言葉の読み方（漢字であれば）と意味を子どもでも理解できるように噛み砕いて説明をしてくれるアプリです。 これを実現させると、APIを使って従量課金となりますよね？

 

APIの従量課金と実装方法を検討した。

はい、そのとおりです。写真を撮ってAIに解析させる処理は、Anthropic APIの画像認識機能を使うことになるので、従量課金になります。・・・

ここから会話を続けて、アプリの制作が始まりました。しばらく会話をしながら作っていると、この展開に。

Claudeのセリフです↓

状況がはっきりしました。整理するとこうです。

アーティファクトのプレビュー内 → ClaudeのAPIキーが自動で注入される仕組みがあるので動く

ChromeでHTMLファイルを直接開く → APIキーがない＋セキュリティ制限で弾かれる

つまり、ブラウザから直接api.anthropic.comを叩く構造では、スタンドアロンのWebアプリとしては動かせないということです。

これを解決するにはClaude Codeの出番です。構造をこう変えます。

スマホのブラウザ
　↓
Node.jsサーバー（ローカルまたはホスティング）
　↓ ← ここでAPIキーを安全に管理
Anthropic API

フロントのHTMLはそのまま使えて、APIキーを持つサーバー側のコードを追加するだけです。Claude Codeで作ればローカルで動かせますし、そのままVercelなどに上げれば外からもアクセスできます。

Claude Codeで続きを進めますか？　その場合は今日のこの会話の内容をまとめたプロンプトを作るので、Claude Codeに貼り付けるだけで始められるようにします。

キター！！

もはや専門用語が多すぎて何を言っているんだ？状態ではありますが、とにかくClaude codeの出番がやってきたことだけはわかりました(笑)

 

5月4日の午後からClaude codeデビューしました。

ちなみに、Claude codeを触り始めた直後にチャットでした私の返信がこちら(笑)

今日が私にとってのClaude codeデビュー日です。嬉しいです。 今契約しているPROプランで使えなくなる日も近いと言われる中、デビュー出来て感慨もひとしお。 3点質問させてください。

・Node.jsサーバーというものの役割を教えてください。作ったプログラムを置いておくところですか？

・Vercelはどのような役割を果たすのでしょうか？（これはまだ出来てからの話ですよね？）

・AnthropicのAPIキーは私はもう持っているのですね？手に入れたんでしたっけ？忘れました。

こんな形で、わからぬことを１つ１つ聞きながら、ゆっくりと進めていきました。

 

Claude codeとの対話とアプリWEB公開を目指して！

Claude code感を高めるべく、黒い画面に変えて雰囲気高めて開始！

しかし意外に地味な作業でしたね。

自分のパソコン上だけで動いていたプログラムを、WEB上に乗っけて誰もが使える形にするのがメイン作業でした。

その作業が大変でした。いろんなサービスの無料枠を駆使してそれを実現するようです。

利用させてもらったサービスはこんな感じ。私が出版に携わってるので、出版でたとえてくれました。

 

• コード（アプリ本体）　→　原稿
• GitHub　→　原稿の保管庫
• Node.js　→　印刷機
• Vercel　→　印刷機ごと持っている出版社

この4つが揃って初めて「どこからでもアクセスできるWebアプリ」になります！

 

また、こちらが今回作ってるものの図解です。（Supabaseはまだ未使用）出版にたとえて書いてくれてます。これで多少わかりやすくなってるでしょうか。

 

また、私の理解を深めてくれたやりとりはこちら。どなたかの役に立つことを信じて！（最初の質問のセリフは私です）

• GitHub　→　原稿の保管庫
• Node.js　→　印刷機
• Vercel　→　印刷機ごと持っている出版社
  と教えてくれましたが、これはサービスの１つであって、別の企業が運営しているサービスもあるのですか？バーセルではない出版社もありそうです。

  はい、それぞれ競合サービスがあります！

  GitHubの代わりになるものとしては、GitLabやBitbucketがあります。ただGitHubが圧倒的にシェアが高く、情報も多いので、これから始める人はGitHub一択で大丈夫です。

  Vercelの代わりになるものはいくつかあります。Renderは無料枠が使いやすく、RailwayやFly.ioも人気です。Netlifyも有名です。大手だとAWSやGoogle Cloud、Azureもありますが、個人開発には設定が複雑すぎます。

  Node.jsの代わりはDenoやBunという新しい印刷機もありますが、Node.jsが圧倒的にスタンダードです。

  VercelがNode.jsアプリに特に相性がいい理由は、Node.jsを作ったのと同じ人たちがVercelを作っているからです。印刷機のメーカーが出版社も経営しているようなイメージなので、連携がとてもスムーズです。

  なので今回の組み合わせ（GitHub＋Node.js＋Vercel）は、個人開発の定番セットとして多くの人が使っています。迷ったらこれを選んでおけば間違いないです！

 

ここからの作業はアプリ制作というよりも、先ほど紹介したWEBサービスそれぞれのアカウント作成をして、実際にWEB上で動かす作業ばかりでしたね。

Claude codeに指示されるがままにコピペをしたり、ターミナルと言われる黒い窓でコマンドを入れたりの作業のくりかえしでした。

いろいろと不具合とその原因とか実況しながら進めてくれてますが、まぁ、マシンガントークで英語で話されてる感じです。

「なんかわからんけど、今直してるんだろうな。なんかわからんけど、順調みたいなだな」といった感じです。

 

↓こんな感じで、WEBページのここをクリックしろなんていう指示されたところもわからず、何度も何度もスクショを貼って「どこですかね？」なんて聞きまくって進めました(笑)

ちなみに今もリポジトリーは不明です(^^;

 

そんなこんなで、デプロイ（公開）完了！

この後も不具合の調整しばらく続きましたが、無事に公開まで終えました！

これで私もClaude codeの経験値１。本日5月5日にデビューしました。

なんでしょう、初めて一人で海外旅行に行ってきたときのような達成感です(笑)

 

今回、この知識ゼロのところからひとまず形にするまでの過程の部分こそ、皆が知りたくて参考にしてもらえるだろうと、思って書き記しておきました。

私と同じ知識ゼロの人が「俺もやってみようかな」となれば嬉しいです♪

（※追記　2026年5月現在、Claude codeは無料では利用出来ません。ただ、無料利用のチャットでシンプルなプログラムを作ることは可能です！）

月額3,000円のproプランではもうすぐClaude codeは使えなくなるなんて言われてますし、滑り込みで安価に使ってみることが出来て本当によかったです。

ここからもっと本格的に使ってる同業の方とか、他業種の方とかに色々教えてもらって、より良い学習指導に繋がるWEBサービス作成をしたいですね。

 

久々の投稿で長くなっちゃいました。

今日はこのへんで。

それでは。

 

出来たアプリです。ここから改良を加えていこうっと。そして自塾生に使ってみてもらおうっと！