秘書アプリ開発
Webアプリ開発の基礎知識
フォルダ構成・秘密情報の管理・ビルド／デプロイの仕組みを、専門用語を覚えずにざっくり理解する
はじめに
これまでのHP制作は、HTML・CSSの数枚のファイルを並べれば完成する、いわば「静止画」でした。今回から始まる秘書アプリ開発は、ユーザーの操作に応じてデータを処理したり、外部のAIサービスとやり取りしたりする「動くしくみ」を作る作業になります。
「動くしくみ」を作るには、HP制作にはなかった考え方がいくつか登場します。とはいえ、身構える必要はありません。今回はその中でも特につまずきやすい3つのポイントだけを、専門用語を覚えなくても迷わないレベルでざっくり押さえておきます。
アプリ開発を構成するフォルダ・ファイルの全体像
プロジェクトフォルダとは
HP制作では index.html と style.css くらいのシンプルな構成でしたが、「秘書アプリ」のような動くアプリを作る場合は、1つのプロジェクトフォルダの中にたくさんの種類のファイルが自動的に作られていきます。
ファイルの数が増えても、どのファイルが何のためにあるかを一つずつ暗記する必要はありません。まずは「どんな種類のファイルがあるのか」の全体像だけをつかめば十分です。
ウェブ制作と同じファイル
秘書アプリの画面部分は、これまでのHP制作と同じ3つのファイルが土台になります。役割のおさらいをしておきましょう。
アプリ開発で増える複雑なファイル
秘書アプリのプロジェクトフォルダには、この3つの土台に加えて、TypeScript・Python など普段見慣れない拡張子のファイルもどんどん増えていきます。
アプリ開発では HTML・CSS・JS だけでなく、TypeScript・Python など、他にも多種多様で大量のファイルが自動的に作成されます。一つずつ覚えなくてOK。必要なファイルは Claude Code が用意してくれます。
拡張子 早見表
この章で出てきた拡張子を、ここで一度まとめて振り返っておきましょう。
ファイルが増えても Claude Code にお任せできます。「このファイルは何？」と聞けば、そのつど日本語でやさしく説明してもらえます。
外部に漏洩してはならない情報を安全に管理する方法
なぜ情報管理が重要なのか
秘書アプリを作るときは、AIサービスに接続するための「APIキー」や、ログイン用の「パスワード」など、他人に知られてはいけない情報を扱う場面が出てきます。これらをうっかりインターネット上に公開してしまうと、第三者に悪用されたり、高額な利用料金が発生したりする危険があります。
APIキーはサービスを使うための合言葉のようなものです。他人に見られると、あなたに成りすまして勝手にサービスを使われてしまいます。パスワードと同じくらい大切に扱いましょう。
この「秘密の情報」を安全に扱うために、アプリ開発では次の2つのファイルを使い分けます。
.env — 秘密の情報をしまうファイル
.env秘密の情報をしまうAPIキー（サービスを使うための"合言葉"）やパスワード・認証情報などの"秘密の情報"を入れておく専用のファイルです。プログラムの本体とは分けて、まとめて安全に管理します。
APIキー / パスワード.gitignore — 見せないものを指定するファイル
.gitignore見せないものを指定GitHub などでコードを共有・公開するときに、外部に見せたくないファイル（.env など）や、管理しなくてよいファイルを"対象から外す"よう指定するファイルです。
2つを組み合わせると、次のように「秘密の情報だけがGitHubなどの公開先に含まれない」仕組みができあがります。
すべてのファイル
対象から除外する
含まれない
.env と .gitignore は必ずセットで使うファイルです。Claude Code に「秘書アプリを作って」と頼めば、この2つのファイルも基本的に自動で用意してくれます。
もし誤って公開してしまったら
キーを発行したサービス（例：Anthropic Console など）の管理画面から、該当のキーを削除・再発行します。
古いキーは無効になっているので安全です。新しいキーで .env を作り直します。
今後同じミスをしないよう、.env が正しく除外設定されているか確認してもらいましょう。
アプリのビルド・デプロイ・ローカルサーバーの仕組み
全体の流れ
アプリ開発では「たくさんのファイル」が、いくつかの工程を経て、実際に動く「1つのアプリ」になります。まずは全体の流れをイメージでつかみましょう。
組み立てて1つのアプリにする
サーバーにアップロードする
動かす場所で起動する
ビルドとは何か
「ビルド」とは、人間が読み書きしやすい形で書かれたたくさんのファイルを、コンピューターが効率よく実行できる1つのまとまり（アプリ）に組み立てる作業のことです。工場の組み立てラインをイメージするとわかりやすいです。
組み合わせが読み取れない
npm run build などコマンド1つで自動実行
状態になる
実際には npm run build のようなコマンドを1回打つだけで、この組み立て作業はすべて自動で行われます。中身の仕組みを理解する必要はなく、「アプリを完成させるための儀式」くらいの認識で大丈夫です。
デプロイとは何か
「デプロイ」とは、完成したアプリを、自分のパソコンの外にあるサーバー（インターネット上のコンピューター）にアップロードして、使える状態にする作業のことです。第5回のHP公開で行った Cloudflare Pages へのアップロードも、デプロイの一種です。
まだ自分しか見られない
アプリを送り込む
誰もが使える
ローカルサーバーとは何か
デプロイの前に、まず自分のパソコンの中だけでアプリを動かして動作確認をします。この「自分のPCの中に作る、練習用の動かす場所」のことをローカルサーバーと呼びます。
自分のパソコンの中だけで動く、お試し用の場所です。インターネットにはつながっていないので、あなた以外は誰も見ることができません。
自分だけが見られるデプロイ先としてインターネットに公開されたサーバーです。URLを知っている人なら、世界中の誰でもアクセスできます。
URLを知る全員が見られるローカルサーバーで「動いた！」と喜んでも、それはまだ自分のパソコンの中だけの話です。他の人に使ってもらうには、デプロイしてウェブサーバーに置く必要があります。
この章の確認チェックリスト
| ☐ | プロジェクトフォルダの中に多種多様なファイルが増えていく理由を理解した |
| ☐ | .env が秘密の情報をしまうファイルだと理解した |
| ☐ | .gitignore が公開範囲を指定するファイルだと理解した |
| ☐ | ビルド・デプロイ・ローカルサーバーの違いを説明できる |