開発入門
AIを使ってWeb開発を始めると、ターミナルという画面を使う機会が増えてきます。
最初は黒い画面に文字を入力するため難しそうに見えますが、基本的に行っていることはシンプルです。
フォルダを移動する
ファイルを確認する
開発サーバーを起動する
必要なツールをインストールする
Gitを操作する
AI開発ツールを起動するこのページでは、AI開発初心者向けに、ターミナルの役割と最低限覚えておきたい操作を説明します。
ターミナルとは？
ターミナルは、文字でパソコンへ命令を出すためのアプリです。
普段はマウスでフォルダを開いたり、アプリをクリックしたりします。
ターミナルでは、同じような操作を文字で行います。
普段の操作
フォルダをクリック
↓
中を見る
ターミナル
cd フォルダ名
↓
そのフォルダへ移動
POINT
ターミナルは特別な場所ではありません。パソコンのフォルダやファイルを、文字の命令で操作するための画面だと考えると分かりやすくなります。
なぜAI開発でターミナルを使う？
Web開発では、ターミナルからさまざまな開発ツールを操作します。
- プロジェクトを作る
- 開発サーバーを起動する
- Gitを使う
- ライブラリを追加する
- テストを実行する
- ビルドする
- Claude Codeなどを起動する
AIが「このコマンドを実行してください」と案内することも多いため、最低限の意味を理解しておくと安全です。
コマンドとは？
ターミナルへ入力する命令を、コマンドと呼びます。
たとえば、現在いる場所を確認するコマンドがあります。
pwd入力してEnterを押すと、現在いるフォルダの場所が表示されます。
/Users/username/Documents/omochixこのような文字列をパスと呼びます。
パスとは？
パスは、パソコンの中でファイルやフォルダがどこにあるかを表す住所のようなものです。
/Users/username/Documents/omochixこの場合、
Users
↓
username
↓
Documents
↓
omochixという順番でフォルダの中へ入っていることを表します。
pwd：現在いる場所を確認する
pwdpwd は、現在ターミナルがどのフォルダにいるか確認するコマンドです。
AI開発中に「違うプロジェクトを変更してしまった」という事故を防ぐためにも、作業前に現在地を確認する習慣は役立ちます。
ls：中にあるファイルを見る
lsls を実行すると、現在いるフォルダの中にあるファイルやフォルダが表示されます。
package.json
src
public
README.mdプロジェクトが正しく開けているか確認するときにも使えます。
cd：フォルダを移動する
cd Documentscd は、別のフォルダへ移動するコマンドです。
たとえばDocumentsの中にomochixというプロジェクトがある場合は、
cd ~/Documents/omochixのように移動できます。
~ は、自分のホームフォルダを表すためによく使われます。
1つ上のフォルダへ戻る
cd .... は1つ上の階層を意味します。
Documents
└─ omochix
└─ src
現在:
src
cd ..
↓
omochixフォルダ移動で迷ったら、pwd と ls を使って現在地を確認しましょう。
TRY IT
ターミナルを開いて「pwd → ls」の順番で入力してみましょう。ファイルを変更するコマンドではないため、まず現在地と中身を見る練習から始められます。
プロジェクトとは？
Web開発では、1つのWebサイトやアプリに必要なファイルをまとめたフォルダを、プロジェクトと呼ぶことがあります。
my-app
├─ src
├─ public
├─ package.json
├─ README.md
└─ その他のファイルAI開発ツールを使う場合も、基本的にはこのプロジェクトフォルダの中で作業します。
開発を始める前に現在地を確認する
AI開発では、作業開始前に次のように確認すると安全です。
pwd
ls
git statusそれぞれ、
pwd
↓
どのフォルダ？
ls
↓
どんなファイルがある？
git status
↓
Gitの現在状態は？を確認しています。
POINT
AIへ作業を任せる前に「正しいプロジェクトにいるか」「現在どのBranchか」「未保存の変更がないか」を確認すると事故を減らせます。
開発サーバーとは？
Webアプリを開発するときは、自分のパソコン上で確認するために開発サーバーを起動することがあります。
Next.jsなどのプロジェクトでは、たとえば次のようなコマンドを使うことがあります。
npm run dev起動すると、ターミナルに次のようなURLが表示されることがあります。
http://localhost:3000ブラウザでこのURLを開くことで、自分のパソコン上でWebアプリを確認できます。
localhostとは？
localhost は、自分自身のパソコンを表します。
http://localhost:3000は、インターネットに公開されたWebサイトではなく、自分のパソコン上で動いているサービスへアクセスしています。
localhost
↓
自分だけが確認する開発環境
本番URL
↓
インターネット上からアクセスできるnpmとは？
JavaScriptやNext.jsなどの開発では、npm という言葉をよく見ます。
npmは、プロジェクトで使うライブラリなどを管理するために使われる仕組みです。
プロジェクト
必要なライブラリ
↓
npmで管理
↓
インストール
↓
コードから利用たとえば、プロジェクトに必要なパッケージをインストールするときは、
npm installというコマンドを使うことがあります。
package.jsonとは？
JavaScript系のプロジェクトでは、package.json というファイルをよく見かけます。
このファイルには、プロジェクトの情報や使用するライブラリ、実行できるコマンドなどが記録されています。
{
"scripts": {
"dev": "...",
"build": "...",
"start": "..."
}
}そのため、
npm run devというコマンドは、package.jsonで定義された dev の処理を実行しています。
ライブラリとは？
ライブラリは、他の開発者が作った便利な機能を再利用できる仕組みです。
すべての機能をゼロから自分で作る必要はありません。
自分で全部作る
ログイン機能
フォーム
日付処理
UI
その他
↓
必要なライブラリを使う
↓
開発を効率化ただし、AIが提案したライブラリを何でも追加すればよいわけではありません。
AIに勝手にパッケージを増やさせない
AIに機能を実装させると、必要以上に新しいライブラリを追加することがあります。
そのため、次のような指示も使えます。
この機能を実装してください。
条件:
・既存ライブラリで実現できるか最初に確認
・新しいパッケージを追加する場合は理由を報告
・勝手に依存関係を追加しない
・不要なライブラリを追加しない何が追加されたのか分からなくなることを防ぎやすくなります。
エラーはターミナルにも表示される
開発中に問題が起きたとき、ブラウザだけではなくターミナル側にもエラーが表示されることがあります。
Error
Failed to compile
Cannot find module
TypeError
Database connection failedエラー全文をAIへ共有すると、原因を調べてもらいやすくなります。
次のエラーが出ています。
まず原因を説明してください。
まだコード変更はしないでください。
エラー:
［ここにエラー全文］
POINT
エラーの最後の1行だけではなく、可能であれば前後を含めたメッセージをAIへ渡すと、原因を判断しやすくなる場合があります。
Ctrl + C はよく使う
開発サーバーなど、ターミナル上で動き続けている処理を止めたい場合があります。
多くの環境では、
Ctrl + Cで実行中の処理を停止できます。
npm run dev
↓
開発サーバー起動
Ctrl + C
↓
停止Macを使っている場合でも、この操作ではCommandではなくControlキーを使うことがあります。
ターミナルに何でも貼り付けない
AIがコマンドを提案してくれるのは便利ですが、意味を確認せず実行するのは危険です。
コマンドによっては、ファイルを削除したり設定を変更したりできます。
WARNING
意味が分からないコマンドは、そのまま実行する前に「このコマンドは何をする？ファイル削除や設定変更はある？」とAIへ確認しましょう。
特に削除系のコマンドには注意する
ターミナルからファイルやフォルダを削除することもできます。
一部の削除操作は、通常のゴミ箱を経由せず消える場合があります。
AIから削除を含むコマンドを提案された場合は、
このコマンドによって
削除されるファイル・フォルダを教えてください。
復元できますか？
今いるディレクトリで実行して安全ですか？
まだ実行しないでください。と確認してから進めましょう。
環境変数とは？
開発プロジェクトでは、APIキーやDatabase接続情報などを環境変数として設定することがあります。
DATABASE_URL=...
API_KEY=...このような情報は外部へ公開しないことが重要です。
WARNING
APIキー・パスワード・Database URL・秘密鍵などを、質問サイト・SNS・公開GitHub Repositoryへそのまま貼らないようにしましょう。
.envとは？
環境変数を保存するために、.env や .env.local といったファイルが使われることがあります。
.env.local
DATABASE_URL=...
API_KEY=...これらには秘密情報が入ることがあるため、Gitへ登録しない設定が必要です。
.gitignoreとは？
.gitignore は、Gitで管理したくないファイルを指定するために使います。
.env
.env.localなどを指定して、秘密情報を誤ってGitHubへPushする事故を防ぎます。
Gitコマンドもターミナルから使う
Gitもターミナルから操作できます。
初心者が最初によく見るのは、次のようなコマンドです。
git status
git diff
git add
git commit
git push
git pullすべてを今覚える必要はありません。
まずは git status と git diff で「現在の変更を確認する」ところから始めるのがおすすめです。
Claude Codeなどもターミナルから使える
AI開発ツールの中には、ターミナルから起動して使うものがあります。
プロジェクトへ移動
↓
AI開発ツールを起動
↓
コードを調査
↓
修正
↓
テスト
↓
Gitで確認AIがプロジェクト全体のファイルを確認できるため、通常のチャットにコードを1ファイルずつ貼るより、開発作業を進めやすくなる場合があります。
AIにターミナル操作を説明させる
知らないコマンドが出てきたら、その場でAIに聞けばOKです。
次のコマンドを
開発初心者向けに説明してください。
npm install
知りたいこと:
・何をするコマンドか
・どのファイルが変わる可能性があるか
・安全に実行できるか
・元に戻せるか
・実行前に確認すること「意味だけ」ではなく、「何が変更されるか」まで聞くと安全です。
AI開発開始前の確認テンプレート
AIへ開発作業を任せる前に、次のような確認をさせる方法があります。
作業を開始する前に現在の状態を確認してください。
確認:
・現在のディレクトリ
・Git branch
・git status
・未Commit変更
・プロジェクト構成
・使用している技術
まだコード変更はしないでください。
確認結果だけ報告してください。いきなり実装を始めるより、現在の状態を把握してから進める方が安全です。
最低限覚えたいコマンド
pwd
現在いる場所を見る
ls
中身を見る
cd
フォルダを移動
cd ..
1つ上へ戻る
npm install
依存関係をインストール
npm run dev
開発サーバーを起動
Ctrl + C
実行中の処理を停止
git status
Gitの状態を見る
git diff
変更内容を見る最初はこれらの意味が分かれば十分です。
必要なコマンドは開発を進める中で少しずつ増やしていきましょう。
コマンドを暗記する必要はない
AI時代の開発では、すべてのコマンドを暗記する必要はありません。
大切なのは、
今どこにいる？
何を実行する？
何が変わる？
危険な操作はない？
元に戻せる？を確認しながら使うことです。
POINT
コマンドを忘れてもAIに聞けば確認できます。「知らないまま実行する」のではなく、「分からなければ確認する」習慣の方が重要です。
ターミナル操作の基本フロー
ターミナルを開く
↓
pwd
↓
現在地を確認
↓
cd
↓
プロジェクトへ移動
↓
ls
↓
中身を確認
↓
git status
↓
Git状態を確認
↓
開発開始この流れを習慣にすると、違うフォルダや違うプロジェクトを操作するミスを減らせます。
TRY IT
ターミナルで自分のプロジェクトへ移動し、「pwd → ls → git status」の3つを実行してみましょう。何かを変更する前に現在の状態を確認する練習になります。
次に学ぶ
ターミナルと開発環境の基本が分かったら、次はAIにコード変更を任せるときの安全な進め方を学びます。
AI開発とは？
↓
Webサイト・Webアプリの仕組み
↓
ターミナル・開発環境
↓
AIと安全に開発する