ITの基礎知識
開発を始める前に、コンピュータとWebの世界の「地図」を手に入れましょう。ここを理解しておくと、この先のすべてのレッスンがスムーズになります。
1-1コンピュータとソフトウェアの仕組み
コンピュータは大きく分けて「ハードウェア(機械そのもの)」と「ソフトウェア(機械を動かす命令のかたまり)」でできています。私たちが普段使うアプリ(ブラウザ、Excel、LINEなど)はすべてソフトウェアです。
OS — すべてのアプリの土台
ソフトウェアの中でも特別なのがOS(オペレーティングシステム)です。WindowsやmacOSがこれにあたり、画面表示・ファイル管理・キーボード入力など、コンピュータの基本動作をすべて取り仕切っています。アプリはOSの上で動く「間借り人」のような存在です。
アプリはどうやって動くのか
アプリの正体は「プログラム」、つまりコンピュータへの命令を順番に書いたファイルの集まりです。プログラマーが書いた命令文(コード)を、コンピュータが上から順に実行することでアプリは動きます。
つまり「開発する」とは、命令文のファイルを作って組み合わせること。Claude Codeを使う場合、この命令文を書く作業をAIが代行してくれます。
・OSはすべてのアプリの土台(Windows / macOS)
・アプリの正体は「命令文を書いたファイルの集まり」
・開発 = そのファイルを作ること。Claude Codeではそれを AI が代行する
1-2インターネットとWebの仕組み
「Webサイトを見る」とき、裏側では何が起きているのでしょうか。仕組みはシンプルで、「あなたのパソコンが、遠くのコンピュータにデータをください、と頼んでいる」だけです。
クライアントとサーバー
- クライアント:データを「ください」と頼む側。あなたのPCやスマホ(のブラウザ)です。
- サーバー:データを「どうぞ」と返す側。世界のどこかにある、24時間動き続けているコンピュータです。
ブラウザにURLを入力すると、ブラウザはそのURLが指すサーバーに「このページのデータをください」とリクエストを送り、サーバーはHTMLなどのファイルをレスポンスとして返します。ブラウザはそれを受け取って画面に描画する——これがWebの基本動作です。
URLの読み方
https://www.example.com/blog/article1.html └─①─┘ └─────②─────┘└───────③───────┘ ① 通信方式(httpsは暗号化された安全な通信) ② ドメイン名(サーバーの住所) ③ パス(サーバー内のどのファイルか)
・URLは「どのサーバーの、どのファイルか」を指す住所
・あなたが作るWebアプリも、最終的にはどこかのサーバーに置いて公開する
1-3Webサイトを構成する3つの技術
どんなWebサイトも、基本的にたった3つの技術でできています。家にたとえると分かりやすいです。
| 技術 | 役割 | 家でたとえると |
|---|---|---|
| HTML | 文章・画像・ボタンなどの「構造」を作る | 柱や壁などの骨組み |
| CSS | 色・配置・大きさなど「見た目」を整える | 壁紙や内装 |
| JavaScript | クリックしたら動くなどの「動き」をつける | 電気・水道などの設備 |
実際のHTMLを見てみよう
<h1>こんにちは!</h1> <p>これは段落です。</p> <button>クリックしてね</button>
<h1>のような記号をタグと呼び、「ここは見出し」「ここは段落」と意味づけしていきます。暗記は不要です。「HTMLは構造、CSSは見た目、JavaScriptは動き」という役割分担さえ覚えれば、コードを見たときに「これは何をしているファイルか」が分かるようになります。
1-4ファイル・フォルダ・パスの基本
開発では「どのファイルがどこにあるか」を正確に扱うことが重要です。Claude Codeへの指示でも頻繁に登場します。
拡張子 — ファイルの種類を表すしっぽ
ファイル名の末尾の.htmlや.cssを拡張子と呼びます。開発でよく見るのはこのあたりです。
| 拡張子 | 中身 |
|---|---|
| .html | Webページの構造 |
| .css | 見た目のデザイン |
| .js | JavaScript(動き) |
| .md | マークダウン(書式付きメモ。CLAUDE.mdで登場) |
| .json | 設定やデータの記述 |
パス — ファイルの住所
フォルダの階層をたどってファイルの場所を表したものをパスと呼びます。
マイアプリ/
├── index.html ← パスは「マイアプリ/index.html」
├── css/
│ └── style.css ← パスは「マイアプリ/css/style.css」
└── js/
└── main.js ← パスは「マイアプリ/js/main.js」
ひとつのアプリは、このように1つのフォルダ(プロジェクトフォルダ)にまとめるのが基本です。Claude Codeもこの「プロジェクトフォルダ」を単位として作業します。
1-5ターミナル(コマンドライン)入門
ターミナルとは、マウスの代わりに文字(コマンド)でコンピュータを操作する黒い画面のことです。Claude Codeはこのターミナル上で動くツールなので、最低限の操作に慣れておきましょう。といっても、覚えるコマンドはごくわずかです。
ターミナルの開き方
- Windows:スタートメニューで「PowerShell」または「ターミナル」を検索して起動
- Mac:Spotlight(⌘+スペース)で「ターミナル」を検索して起動
最初に覚える3つのコマンド
pwd # 今いるフォルダの場所を表示(print working directory) ls # 今いるフォルダの中身一覧を表示(list) cd 名前 # 指定したフォルダに移動(change directory)
ターミナルでは常に「今どこかのフォルダの中にいる」状態です。cdで目的のプロジェクトフォルダまで移動してからClaude Codeを起動する——これが基本の流れになります。
pwd → ls と打ってEnterキーを押してみましょう。自分が今いる場所と、そこにあるファイルが表示されます。壊れることは何もないので安心して試してください。
・
pwd(どこ?)、ls(何がある?)、cd(移動)の3つだけでOK・難しい操作はClaude Codeに「やって」と頼めばよい
1-6プログラミング言語とは何か
プログラミング言語とは、コンピュータへの命令を書くための言葉です。人間の言葉はあいまいさを含みますが、プログラミング言語は1文字でも間違うと動かない、極めて厳密な言葉です。
よく聞く言語と用途
| 言語 | 主な用途 |
|---|---|
| JavaScript | Webサイト・Webアプリ(このコースの主役) |
| Python | AI・データ分析・自動化 |
| Swift / Kotlin | iPhone / Androidアプリ |
| SQL | データベースの操作 |
AI時代に「学ぶ」とはどういうことか
かつては文法を暗記して自分でコードを書く必要がありました。今はClaude Codeが書いてくれます。では何も学ばなくていいかというと、そうではありません。あなたに必要なのは次の3つの力です。
- 頼む力 — 作りたいものを明確に言語化して指示する
- 読む力 — AIが書いたコードや説明を「だいたい何をしているか」把握する
- 確かめる力 — 出来上がったものが正しく動くか検証する
このコースの残りの章は、すべてこの3つの力を育てるために設計されています。
・Web開発の中心はJavaScript
・あなたが磨くのは「頼む力・読む力・確かめる力」の3つ
📝 第1章 理解度チェック
全問正解できたら次の章へ進みましょう。