アプリ作りの基本を知ろう

こんにちは😊 ここまでのレッスンでは、Claude Codeと一緒にホームページを作って、最後はインターネット上に公開するところまで進めてきました。

今回からは、新しいステップに進みます✨ これから作っていくのは秘書アプリです。ホームページとの違いは、見るだけのページではなく、操作すると動いてくれるものを作っていくというところです。ボタンを押したら何かが動いたり、入力した内容をもとに処理してくれたり、外部のAIサービスとつながったり。少しずつ「アプリらしい動き」が増えていきます。

「急に難しくなりそう……」と思った方もいるかもしれませんが、大丈夫です😊 今回いきなり難しいプログラミングをするわけではありません。まずは、これからどんなものが出てくるのか、全体像を一緒に見ていきます。地図を見てから出発するようなイメージですね。

名前だけ見ると難しそうですが、全部覚える必要はありません😊 今日は「あ、そういう役割なんだ」と何となく分かれば100点です✨

ホームページを作ったときは、index.htmlやstyle.cssなど、比較的少ないファイルで作っていましたよね。でも今回から作る秘書アプリでは、もう少したくさんのファイルが出てきます。画面を見て「うわ、いっぱいある……」と思っても大丈夫です😊 全部覚える必要はありません。まずは「アプリになると、いろいろな役割を持つファイルが増えるんだな」くらいでOKです。

まずは、これまでにも出てきた3つをおさらいしておきましょう。

そしてアプリを作っていると、今まで見たことのない名前も出てきます。たとえばTypeScript、Python、PHPなど。「え、これ全部勉強するの？」と思いますよね😊 大丈夫です、全部を覚える必要はありません。

TypeScriptはJavaScriptをもう少し間違いに気づきやすくしたようなもの、Pythonはアプリの裏側でAIとのやり取りやデータ処理に使われることがあるもの、PHPはサーバー側で動く処理に使われるものです。今の段階で「こう書く」まで理解する必要はありません。覚えてほしいのは、アプリによって、必要なファイルの種類が変わるということだけです😊 必要なものはClaude Codeが作ってくれますし、知らないファイルが出てきたら「このファイルは何？」と聞けば、その都度日本語で説明してもらえます✨

ファイルの最後に付いている.html .css .jsのような文字は拡張子と呼ばれる、「このファイルは何の種類ですよ」と分かる名札のようなものです。これも暗記しなくて大丈夫、見慣れないものが出てきても「何これ？」と慌てなくてOKです。

ここから、とても大事なところです。アプリを作っていくと、他の人に見せてはいけない情報を扱うことがあります。たとえばAPIキーやパスワード、ログインに使う情報などです。

APIキーという言葉も初めて聞くと分かりにくいですが、これはサービスを使うための合言葉だと思ってください。秘書アプリからAIサービスを使うときに「私はちゃんとこのサービスを使っていい人ですよ」と証明するための特別な文字列で、家の鍵のようなものでもあります😊

では、その秘密情報をどこにしまうのか。そこで出てくるのが.envというファイルです。今回は「ドット・エンブ」と呼んでおきます。これは秘密の情報専用の引き出しだと思ってください😊 APIキーやパスワードなど、他の人に見せたくないものを、普段使うファイルとは別の場所にして「ここには大事なものが入っています」と分けて管理します。

そしてもう1つ出てくるのが.gitignoreです。役割はシンプルで、このファイルは外に出さないでねと指定するためのファイルです。ホームページやアプリのファイルをインターネット上に公開するとき、.envまで一緒に出てしまったら困りますよね。そこで.gitignoreを使って「.envは公開しないでね」と指定します。荷物を発送するときに「これは送る」「これは送らない」と分けてくれる仕分け係のようなイメージです😊

万が一「APIキーを公開してしまったかも」ということがあった場合も、焦らなくて大丈夫です。

ここからは「ビルド」「ローカルサーバー」「デプロイ」という言葉を見ていきます。また専門用語が出てきましたが、役割だけ分かれば大丈夫ですよ✨

この3つをつなげると、全体の流れはこうなります。

細かい仕組みは今は分からなくて大丈夫です。「作る」「組み立てる」「自分のPCで試す」「インターネットに公開する」、この順番が何となくイメージできれば十分です✨