レッスン0：パソコン基礎知識

🎯 学習目標

• ファイルとフォルダの違いがわかる
• 拡張子が何かを知り、表示できるようにする
• VS Code をインストールして、基本操作ができる
• ブラウザの開発者ツールを開ける

📖 1. 導入

プログラミングを始める前に、パソコンの基本を確認しよう。

「コードを書く」というのは、つまりファイルを作って、ブラウザで確認することの繰り返しです。この流れをスムーズに進めるために、まずパソコンの基本的な使い方を押さえておきましょう。

英語の単語が出てきても大丈夫です。意味はそのつど説明します。

📁 2. ファイルとフォルダ

フォルダとファイルって何？

パソコンの中のデータは、フォルダとファイルで整理されています。

• フォルダ ＝ 引き出し。中にファイルをまとめて入れておく場所
• ファイル ＝ 紙。実際のデータが入っているもの（文章・画像・コードなど）

たとえば「夏休みの宿題」というフォルダの中に、「作文.txt」「絵.png」というファイルを入れるイメージです。

プロジェクトフォルダを作ろう

プログラミングでは、1つの作品に関するファイルをまとめて1つのフォルダに入れます。これをプロジェクトフォルダと呼びます。

1. デスクトップで右クリック →「新しいフォルダ」（Windows）または「新規フォルダ」（Mac）
2. フォルダ名を my-website にする
3. このフォルダの中に、これから作るファイルをすべて保存していく

🔤 3. 拡張子

拡張子って何？

ファイル名の最後についている .html .css .js などの部分を拡張子（かくちょうし）といいます。拡張子はそのファイルの「種類」を表しています。

拡張子を表示する設定

パソコンの初期設定では拡張子が隠れていることがあります。表示するように設定しましょう。

Windows の場合：

1. エクスプローラーを開く
2. 上のメニューから「表示」をクリック
3. 「ファイル名拡張子」にチェックを入れる

Mac の場合：

1. Finder を開く
2. 上のメニューから「Finder」→「設定」をクリック
3. 「詳細」タブを開き、「すべてのファイル名拡張子を表示」にチェックを入れる

💻 4. VS Code のインストール

VS Code って何？

VS Code（Visual Studio Code）は、コードを書くための無料のアプリです。文字の色分けや補完機能があり、プログラミングがとても書きやすくなります。

インストール手順

1. ブラウザで https://code.visualstudio.com を開く
2. 「Download」ボタンをクリックする（自分の OS が自動で選ばれます）
3. ダウンロードされたファイルを開いてインストールする
   • Windows：.exe ファイルをダブルクリック → 「次へ」を押し続けてインストール
   • Mac：.dmg ファイルをダブルクリック → VS Code のアイコンを「Applications」フォルダにドラッグ

基本操作3つ

これだけ覚えれば始められます。

① フォルダを開く

• メニュー「File」→「Open Folder」（Windows）または「Open...」（Mac）
• 先ほど作った my-website フォルダを選ぶ

② ファイルを新規作成する

• 左のサイドバーでフォルダ名の横にある「新しいファイル」アイコンをクリック
• ファイル名を入力して Enter キーを押す（例：index.html）

③ ファイルを保存する

• Windows：Ctrl + S
• Mac：Cmd + S

🔍 5. ブラウザの開発者ツール

開発者ツールって何？

開発者ツールは、ブラウザに最初から入っている「確認・調査ツール」です。自分が書いたコードにエラーがあるとき、ここに情報が表示されます。

開発者ツールの開き方

• Windows：F12 キーを押す、または右クリック →「検証」
• Mac：Cmd + Option + I を押す、または右クリック →「検証」

「コンソール」タブを確認しよう

開発者ツールを開いたら、上部のタブから「Console（コンソール）」をクリックしてください。ここにエラーメッセージや console.log() の出力が表示されます。JavaScript のレッスンでよく使います。

🚀 7. 次のレッスンへ

準備ができました！次はいよいよ HTML を書いていきます。

→ HTML レッスン1：HTMLって何？ウェブページの仕組みを学ぼう