ITK Educate
レッスン一覧
LESSON 6

開発環境を整えよう

Lesson 5 ではメモ帳で Webページを作りました。でも、本格的に作るならプロと同じ道具を使ったほうが、ずっと楽で楽しくなります。 このレッスンでは、Chrome・VS Code・Claude Code の3つをそろえます。

はじめる前に： 会社のパソコンにソフトをインストールするときや、AIツールを使うときは、社内のルールや情報システム担当者の案内に従ってください。 このページの手順は Windows のパソコンを前提にしています。画面の見た目や手順は、ソフトのバージョンによって少し変わることがあります。

1. 3つの道具の役割

Google Chrome

ブラウザ。作ったページを表示して確認します。開発者向けの調査機能（デベロッパーツール）が便利です。

VS Code

正式名称は Visual Studio Code。Microsoft が無料で公開しているコードを書くためのエディタです。世界中のエンジニアが使っています。

Claude Code

Anthropic 社の AIアシスタント。コードの説明、書き方の相談、間違いの発見などを、会話しながら手伝ってくれます。

2. Google Chrome を入れる

すでにパソコンに入っている場合は、この章は飛ばしてOKです。

  1. ダウンロードページを開く

    今使っているブラウザ（Microsoft Edge など）で https://www.google.com/chrome/ を開きます。

  2. 「Chrome をダウンロード」をクリック

    インストール用のファイル（ChromeSetup.exe）がダウンロードされます。

  3. ダウンロードしたファイルを開く

    「このアプリがデバイスに変更を加えることを許可しますか？」と聞かれたら「はい」を選びます。自動でインストールが進み、Chrome が起動します。

デベロッパーツールを開いてみよう

Chrome で何かのページを開いた状態で F12 キーを押してみてください。画面の横に、ページの HTML や CSS を調べられる デベロッパーツールが開きます。Lesson 8・9 で使うので、「F12 で開く」とだけ覚えておきましょう。もう一度 F12 を押すと閉じます。

3. VS Code を入れる

  1. ダウンロードページを開く

    Chrome で https://code.visualstudio.com/ を開き、「Download for Windows」をクリックします。

  2. インストーラーを実行する

    ダウンロードしたファイル（VSCodeUserSetup-…exe）を開き、「同意する」を選んで「次へ」で進みます。

  3. 「追加タスクの選択」でチェックを入れる

    途中の画面で、次の項目にチェックを入れておくと便利です。

    • エクスプローラーのファイル コンテキスト メニューに [Code で開く] アクションを追加する
    • エクスプローラーのディレクトリ コンテキスト メニューに [Code で開く] アクションを追加する
    • PATH への追加（再起動後に使用可能）

    これで、ファイルやフォルダを右クリックして「Code で開く」が使えるようになります。

  4. インストールして起動する

    「インストール」→「完了」で VS Code が起動します。

  5. 日本語化する

    最初は英語で表示されます。左側の四角いアイコン（Extensions）をクリックするか Ctrl + Shift + X を押し、 検索欄に Japanese Language Pack と入力します。Microsoft 製の「Japanese Language Pack for Visual Studio Code」の「Install」を押し、 右下に出る「Change Language and Restart」を押すと、日本語で再起動します。

Lesson 5 の hello.html を開いてみよう

VS Code のメニューで「ファイル」→「フォルダーを開く」を選び、Lesson 5 で作った hello フォルダを開きます。 （「このフォルダー内のファイルの作成者を信頼しますか？」と聞かれたら、自分で作ったフォルダなので「はい」を選びます） 左側の一覧から hello.html をクリックすると……

タグや文字が色分けされて表示されるはずです。メモ帳よりずっと読みやすいですよね。 さらに VS Code は、<p> と打つと終了タグ </p> を自動で補ってくれるなど、入力も手伝ってくれます。

小ワザ： VS Code で新しく .html ファイルを作り、半角で ! と入力して Enter（または Tab）を押してみてください。 Lesson 5 で学んだ「HTMLの基本の形」が一瞬で入力されます。メモ帳で一生懸命打った人は、ちょっと悔しいかもしれません。

4. Claude Code を入れる

Claude Code は、ターミナル（文字でパソコンに命令する画面）や VS Code の中で、AI と会話しながら作業できるツールです。 「このコードの意味を教えて」「ここをこう変えたい」と日本語で話しかけると、説明したり、実際にファイルを編集したりしてくれます。

アカウントについて： Claude Code を使うには、Claude の有料プラン（Pro / Max）、会社向けプラン（Team / Enterprise）、または Claude Console のアカウントが必要です（無料プランでは使えません）。 どのアカウントを使うかは、社内の案内に従ってください。

  1. VS Code でターミナルを開く

    VS Code のメニューで「ターミナル」→「新しいターミナル」を選びます。画面の下に、文字を入力できる黒っぽい領域が開きます。 これがターミナル（Windows では PowerShell）です。

  2. インストール用のコマンドを貼り付けて実行する

    次の1行をコピーしてターミナルに貼り付け、Enter を押します。インストールが自動で進みます。

    PowerShell（Windows）
    irm https://claude.ai/install.ps1 | iex

    Mac の場合は、ターミナルで curl -fsSL https://claude.ai/install.sh | bash を実行します。

  3. インストールできたか確認する

    いったんターミナルを閉じて（ゴミ箱のアイコン）、もう一度「ターミナル」→「新しいターミナル」で開き直してから、次のコマンドを実行します。

    PowerShell
    claude --version

    バージョン番号（数字）が表示されれば成功です。

  4. 起動してログインする

    VS Code で hello フォルダを開いた状態で、ターミナルに次のように入力します。

    PowerShell
    claude

    初回はブラウザが開き、ログイン画面が表示されます。社内の案内に従ったアカウントでログインし、ターミナルに 「Login successful」と表示されたら Enter を押します。これで準備完了です。

  5. （おすすめ）VS Code の拡張機能も入れる

    VS Code の拡張機能（Ctrl + Shift + X）で Claude Code を検索し、Anthropic 製の拡張機能をインストールします。 エディタの右上などに表示される Claude のアイコンから、ターミナルを使わずにチャット画面で話しかけられるようになります。

うまくいかないときは確認すること
claude が見つからないと言われるインストール後にターミナルを開き直したか確認してください。それでもだめなら VS Code ごと再起動してみてください。
インストールのコマンドがエラーになる社内ネットワークの設定でブロックされている可能性があります。情報システム担当者に相談してください。
動作がおかしいターミナルで claude doctor を実行すると、インストールの状態を診断してくれます。

Git for Windows を入れておくと、Claude Code がより多くの作業を手伝えるようになります（必須ではありません）。 最新の手順は公式ドキュメント（https://code.claude.com/docs）で確認できます。

5. 3つを使ってみよう

道具がそろったら、さっそく3つを連携させてみましょう。

  1. Claude Code に質問する

    hello フォルダで Claude Code を起動し、次のように話しかけてみます。

    Claude Code への質問の例
    hello.html の中身を、HTMLを初めて学ぶ人向けに1行ずつ説明してください。

    Lesson 5 で学んだことを、別の言葉で説明し直してくれるはずです。わからない言葉があれば、続けて質問してOKです。

  2. VS Code で書き換える

    hello.html の <p> の文章を自由に書き換えて、Ctrl + S で保存します。

  3. Chrome で確認する

    エクスプローラーで hello.html を右クリック →「プログラムから開く」→「Google Chrome」で開き、書き換えが反映されているか確認します。

「書く（VS Code）→ 聞く（Claude Code）→ 確かめる（Chrome）」。これが、これからのポートフォリオ作りの基本サイクルです。

6. AIと上手に付き合うコツ

Claude Code はとても頼りになりますが、学ぶために使うなら、ちょっとしたコツがあります。

◎ おすすめの使い方

  • 「このタグは何をしているの？」と意味を聞く
  • 「うまく表示されない。どこが間違っている？」と間違い探しを頼む
  • 自分で書いたあとに「もっと良い書き方はある？」と見てもらう

△ 気をつけたい使い方

  • 全部書いてもらって、中身を読まずに終わりにする
  • AI の答えをそのまま信じ込む（AI も間違えることがあります）
  • お客様の情報や社外秘の情報を入力する（社内ルールを守りましょう）

自転車の練習で、ずっと後ろを押してもらっていては乗れるようになりませんよね。 Claude Code は「後ろを支えてくれるコーチ」。ペダルをこぐのは自分、を意識すると、ぐんぐん上達します。

確認クイズ

選択肢をクリックしてください。

Q1. コードを書くための道具（エディタ）はどれ？

Q2. Chrome でデベロッパーツールを開くキーは？

Q3. Claude Code がインストールできたか確認するコマンドは？

Q4. 学ぶために Claude Code を使うとき、おすすめの使い方は？

まとめ

道具がそろいました！ 次の Lesson 7 からは、いよいよ自分のポートフォリオサイトを作っていきます。