Web開発 2025年1月10日

開発の準備をしよう！

Webアプリ開発を始めるには、まず開発に必要なツールを整えることが大切です。
この章では、初心者でもスムーズに準備を進められるよう、手順を丁寧に解説していきます。

🎯 この章の目標

  • Webアプリ開発に必要なツール（VS Code、Gitなど）を自分のパソコンにインストールできるようになる
  • それぞれのツールがどんな役割を持っているのか、基本的な使い方を理解する

Kinova編集部

目次

1 開発環境とは？

「開発環境」とは、プログラムを書く、動かす、そしてその動作を確認・修正するために必要なツールやソフトウェアのセットのことです。
例えば、文字を打つためのコードエディタ、Webページの動きを確認するブラウザ、プログラムを実行するための仕組み（実行環境）、変更を記録する履歴管理ツールなどが含まれます。

これらを自分のパソコンに整えておくことで、エラーの発見や修正がスムーズになったり、チームでの作業が効率的になったりします。
最初は必要最低限のツールから始めて、開発に慣れてきたら少しずつツールを追加していくと良いでしょう。

🛠️ Webアプリ開発に必要なもの

📝 コードエディタ

プログラムコードを書くための専用エディタ。メモ帳でも書けますが、コードエディタを使うと色分けされて見やすくなったり、入力補完機能があったりして便利です。

Visual Studio Code Atom Sublime Text

🌐 Webブラウザ

Webページを表示するためのソフトウェア。開発者ツールという機能を使って、作ったページの動作確認ができます。

Google Chrome Firefox Edge

⚙️ Node.js

JavaScriptをパソコンの中で動かすための実行環境。 JavaScriptは元々ブラウザの中でしか動かなかったのですが、Node.jsを使うとパソコンの中でも動かせるようになります。これにより、より本格的なWebアプリが作れるようになりました。

npm（パッケージ管理）

🔄 Git

プログラムの変更履歴を管理するためのツール。「プログラムの作業履歴ノート」のようなものです。完成したプログラムを記録しておけば、間違えて消してしまっても元に戻すことができます。

変更履歴の管理 バックアップ

なぜ開発環境が重要なの？

  • ✓ 効率的にコードを書くことができる
  • ✓ エラーを早期に発見できる
  • ✓ チームでの共同作業がスムーズになる
  • ✓ コードの品質を維持しやすくなる
適切な開発環境を整えることで、プログラミングの学習や開発作業がスムーズになります。
初心者のうちは、シンプルな環境から始めて、徐々に必要なツールを追加していくとよいでしょう。

2 Visual Studio Code（VS Code）をインストールしよう

Visual Studio Code（通称：VS Code）は、Microsoftが提供している無料のコードエディタです。
プログラミングに必要な機能が豊富に揃っており、初心者でも扱いやすく、プロの現場でも幅広く使われているツールです。

HTMLやCSS、JavaScriptといったWebアプリ開発に必要な言語はもちろん、PythonやC++など他の言語にも対応しており、拡張機能を追加することで、自分の使いやすい環境にカスタマイズできるのが特徴です。

このセクションでは、VS Codeをあなたのパソコンにインストールし、基本的な使い方や便利な拡張機能について解説していきます。

💻 VS Codeのインストール手順

  1. 1

    公式サイトにアクセス

    https://code.visualstudio.com/ にアクセスします。

    トップページに表示されている「Download for Windows/Mac/Linux」ボタンをクリックします。

  2. 2

    インストーラーをダウンロード

    お使いのOSに合わせたインストーラーがダウンロードされます。

    Windowsの場合は「.exe」ファイル、Macの場合は「.dmg」ファイルがダウンロードされます。

  3. 3

    インストーラーを実行

    ダウンロードしたインストーラーをダブルクリックして実行します。

    基本的には、画面の指示に従って「次へ」をクリックしていくだけでOKです。

  4. 4

    インストール完了

    インストールが完了したら、VS Codeを起動してみましょう。

    初回起動時に、いくつかの設定画面が表示されることがありますが、基本的にはデフォルトのままで問題ありません。

🔌 おすすめの拡張機能

VS Codeは、拡張機能（Extensions）をインストールすることで、機能を追加できます。 Webアプリ開発に役立つ拡張機能をいくつか紹介します。

Live Server

HTMLファイルをリアルタイムでプレビューできる拡張機能。ファイルを保存すると自動的にブラウザが更新されます。

Prettier

コードを自動的に整形してくれる拡張機能。コードの見た目を統一し、読みやすくします。

ESLint

JavaScriptのコードを分析し、問題点を指摘してくれる拡張機能。バグの早期発見に役立ちます。

Auto Rename Tag

HTMLタグの名前を変更すると、対応する閉じタグも自動的に変更してくれる拡張機能。

拡張機能のインストール方法

  1. 1. VS Codeの左側のメニューから「Extensions」アイコン（四角が4つ並んだアイコン）をクリックします。
  2. 2. 検索ボックスに拡張機能の名前を入力します。
  3. 3. 目的の拡張機能が表示されたら、「Install」ボタンをクリックします。
  4. 4. インストール完了後、必要に応じてVS Codeを再起動します。
VS Codeは非常に多機能なエディタですが、最初から全ての機能を使いこなす必要はありません。
基本的な機能から少しずつ慣れていき、必要に応じて拡張機能を追加していくとよいでしょう。

3 完成サンプルをLive Serverで起動してみよう

この講座で作っていく「Kinova Cafe」のWebページが、どのようなものになるのか、先に体験してみましょう。
下記の3つのファイルを作成し、index.html を Live Serverで起動することで、完成イメージを自分のブラウザで動かすことができます。

📁 ステップ1：プロジェクトフォルダを作ろう

まず、わかりやすい場所に kinova-cafe-sample という名前のフォルダを作成しましょう。
この中に、すべてのファイルを入れていきます。

📝 ステップ2：ファイルを作成しよう

以下の3つのファイルを作成し、それぞれにこのあと紹介するコードをコピーしてください

  • index.html：Webページの本体
  • style.css：ページの見た目を整えるファイル
  • script.js：ページに動きを加えるJavaScriptファイル

VS Codeのエクスプローラーから新規ファイルとして作成しましょう。

📄 index.html

<!DOCTYPE html>
        <html lang="ja">
        <head>
          <meta charset="UTF-8" />
          <title>Kinova Cafe</title>
          <link rel="stylesheet" href="style.css" />
        </head>
        <body>
          <button id="toggleDarkMode">🌙 ダークモード</button>
          <header>
            <h1>Kinova Cafe</h1>
            <p>心と体を癒す、あなたの街のカフェ</p>
          </header>
          <section class="hero">
            <img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=1350&q=80" alt="カフェの雰囲気" />
          </section>
          <section class="menu">
            <h2>Menu</h2>
            <ul id="menuList">
              <li>☕ ブレンドコーヒー <button class="favorite">♡</button></li>
              <li>🍰 手作りチーズケーキ <button class="favorite">♡</button></li>
              <li>🥪 こだわりのサンドイッチ <button class="favorite">♡</button></li>
            </ul>
            <button id="recommendBtn">今日のおすすめに変更</button>
            <p id="menuDescription" class="menu-description"></p>
          </section>
          <footer>
            <p>© 2025 Kinova Cafe. All rights reserved.</p>
          </footer>
          <script src="script.js"></script>
        </body>
        </html>

🎨 style.css

body {
          background-color: #f9f7f4;
          font-family: 'Helvetica Neue', sans-serif;
        }
        
        header {
          text-align: center;
          background-color: #fff;
          padding: 2rem;
        }
        
        header h1 {
          font-size: 2.5rem;
          color: #7b4e2d;
          margin-bottom: 0.5rem;
        }
        
        header p {
          font-size: 1.2rem;
          color: #555;
        }
        
        .hero img {
          width: 100%;
          max-height: 400px;
          object-fit: cover;
          object-position: center 75%;
          display: block;
        }
        
        .menu {
          padding: 3rem 1rem;
          text-align: center;
        }
        
        .menu ul {
          list-style: none;
          font-size: 1.3rem;
          line-height: 2;
          padding: 0;
        }
        
        .favorite {
          margin-left: 1rem;
          font-size: 1.4rem;
          border: none;
          background: none;
          cursor: pointer;
          color: #bbb;
        }
        
        .favorite.active {
          color: crimson;
        }
        
        footer {
          background-color: #ecebe4;
          text-align: center;
          font-size: 0.9rem;
          padding: 2rem 1rem;
        }
        
        #toggleDarkMode {
          position: fixed;
          top: 1rem;
          right: 1rem;
          padding: 0.5rem 1rem;
          background-color: #333;
          color: white;
          border: none;
          border-radius: 20px;
          cursor: pointer;
        }
        
        .dark-mode {
          background-color: #1a1a1a;
          color: #e0e0e0;
        }
        .dark-mode header {
          background-color: #333;
        }
        .dark-mode footer {
          background-color: #2a2a2a;
        }
        .dark-mode .menu-description {
          color: #ddd;
        }

⚙️ script.js

function attachClickEvents() {
          const items = document.querySelectorAll("#menuList li");
          const desc = document.getElementById("menuDescription");
          items.forEach((item) => {
            item.addEventListener("click", () => {
              const name = item.textContent;
              let message = "";
        
              if (name.includes("☕ ブレンドコーヒー")) {
                message = "こだわりの豆を使った香り高いブレンドコーヒーです。";
              } else if (name.includes("🍰 手作りチーズケーキ")) {
                message = "甘さ控えめでコーヒーと相性抜群の手作りチーズケーキ。";
              } else if (name.includes("🥪 こだわりのサンドイッチ")) {
                message = "旬の野菜と自家製パンのサンドイッチ。";
              } else if (name.includes("🍛 ほっこりカレーライス")) {
                message = "スパイス香るまろやかカレー。ランチにぴったり！";
              } else if (name.includes("🍮 自家製プリン")) {
                message = "とろける食感が人気の自家製プリン。";
              } else if (name.includes("🥤 季節のスムージー")) {
                message = "季節のフルーツを使ったさっぱりスムージー。";
              }
        
              desc.textContent = message;
            });
          });
        }
        
        function attachFavoriteEvents() {
          const favButtons = document.querySelectorAll(".favorite");
          favButtons.forEach((btn) => {
            btn.addEventListener("click", () => {
              if (btn.textContent == "♡") {
                btn.textContent = "♥";
                btn.classList.add("active");
              } else {
                btn.textContent = "♡";
                btn.classList.remove("active");
              }
            });
          });
        }
        
        document.getElementById("recommendBtn").addEventListener("click", function () {
          const menuList = document.getElementById("menuList");
          menuList.innerHTML = 
          `<li>🍛 ほっこりカレーライス <button class="favorite">♡</button></li>
          <li>🍮 自家製プリン <button class="favorite">♡</button></li>
          <li>🥤 季節のスムージー <button class="favorite">♡</button></li>`;
        
          attachClickEvents();
          attachFavoriteEvents();
        });
        
        document.getElementById("toggleDarkMode").addEventListener("click", () => {
          document.body.classList.toggle("dark-mode");
        });
        
        attachClickEvents();
        attachFavoriteEvents();

🚀 ステップ3：Live Serverで開いてみよう

index.html を右クリックして 「Open with Live Server」 を選んでください。
ブラウザが開き、作成したページが表示されます。
ボタンを押したり、♡マークを♥に切り替えたり、ダークモードを試したりして、動作を体験してみましょう！

💡ヒント

Live Serverが動作しない場合は、右下にある「Go Live」ボタンがアクティブになっているか確認してください。
また、拡張機能がインストールされているかも見てみましょう。

4 Gitをインストールしよう

プログラミングをしていると、間違ってファイルを削除してしまったり、 以前のバージョンに戻したくなったりすることがあります。 そんなときに活躍するのが、「Git（ギット）」というツールです。

Gitは、プログラムの変更履歴を記録・管理できる仕組みで、 いわば「作業ノート」のような役割を果たします。 誰が、いつ、どこを変更したのかが記録されるので、 複数人での開発や、過去の状態への復元もスムーズに行えます。

また、Gitと組み合わせてよく使われるのが、 「GitHub（ギットハブ）」というオンラインサービスです。 Gitで記録した履歴をインターネット上に保存したり、他の人と共有・共同作業したりできるようになります。

このセクションでは、Gitの基本的な役割と使い方を学びながら、 あなたの開発環境にGitをインストールし、簡単な操作を体験していきます。 初めて触れる人でも、無理なく取り組めるよう丁寧に説明しますので、ご安心ください。

GitとGitHubの関係

💻 Git（自分のパソコン）

作ったプログラムの履歴を管理するツール

  • 変更を記録できる
  • 前の状態に戻せる
  • いつ何を変えたかがわかる

☁️ GitHub（インターネット上の保管場所）

Gitで記録した内容を、インターネット上に保存できるサービス

  • パソコンが壊れてもデータを残せる
  • 他の人とプログラムを共有できる
  • 自分の作品を公開して見せられる

Gitは、あなたのパソコンの中でプログラムの変更を記録してくれるツールです。
そしてGitHubは、その記録をインターネット上に保存してくれる場所です。
この2つを組み合わせることで、「書いたプログラムを安全に残し、他の人と共有できる」ようになります。

🔄 Gitをもっと詳しく

Gitがないとどんな問題が起きる？

  • 😱 間違えてファイルを消してしまった時に戻せない
  • 😰 以前の動いていたバージョンに戻れない
  • 😨 誰がいつどこを変更したのか分からない
  • 😱 パソコンが壊れたらプログラムが消えてしまう

Gitを使うと...

  • ✨ 変更履歴が残るので、いつでも前の状態に戻せる
  • ✨ 誰がいつどこを変更したのか分かる
  • ✨ GitHubを使えば、クラウドにバックアップできる

GitとGitHubの違い

Git

パソコンの中で動く「変更履歴を記録するツール」です。 Word文書の変更履歴のようなものですが、プログラム用により便利な機能が付いています。

GitHub

Gitで記録した変更履歴をインターネット上に保存できるサービスです。 Googleドライブのようなもので、プログラムのバックアップや共有ができます。

実際の使用例

例えば、新しい機能を追加する時：

  1. 1. まず、現在の状態を保存（コミット）します
  2. 2. 新しい機能を追加します
  3. 3. うまくいかなかったら、保存した状態に戻れます
  4. 4. うまくいったら、また新しい状態を保存します

📥 Gitのインストールと基本的な使い方

インストール手順

  1. 1

    https://git-scm.com/downloads にアクセスし、お使いのOSに合わせたインストーラーをダウンロードします。

  2. 2

    ダウンロードしたインストーラーを実行し、基本的には初期設定のまま「次へ」をクリックしていきます。

    Windowsの場合、「Git Bashを含める」オプションを選択しておくと便利です。

  3. 3

    インストールが完了したら、コマンドプロンプト（Windows）またはターミナル（Mac/Linux）を開いて、以下のコマンドを実行してみましょう：

    git --version

    バージョン番号が表示されれば、インストールは成功です！

Gitの使い方は最初は少し複雑に感じるかもしれませんが、基本的なコマンドだけでも覚えておくと、
プログラムの変更履歴を管理できるようになります。また、VS Codeには便利なGit連携機能があり、
画面上でGitを操作することもできます。

5 GitHubアカウントを作成しよう

GitHub（ギットハブ）は、プログラムの履歴をインターネット上に保存し、他の人と共有できるサービスです。
自分が書いたコードを安全に保管したり、世界中の開発者と協力してプロジェクトを進めたりできるため、プログラミングを学ぶ上でとても重要なツールです。

GitHubを使うには、まずアカウントを作成する必要があります。

🌐 GitHubアカウント作成の手順

  1. 1 GitHub公式サイトにアクセスします。
  2. 2 画面右上の「Sign up（サインアップ）」ボタンをクリックします。
  3. 3 メールアドレス、ユーザー名、パスワードを入力し、「Create account」をクリックします。
  4. 4 メールに届いた確認コードを入力し、本人確認を完了します。
  5. 5 その後の質問（使用目的や機能の選択）はスキップしても問題ありません。

アカウントが作成できたら、今後は自分専用のページ（プロフィール）にアクセスできるようになります。 作ったプログラムを公開したり、他の人のコードを見たりする第一歩として、まずはアカウントを準備しておきましょう。

📌 補足：
今後この講座で出題される課題は、作成したプログラムを GitHubにアップロードして提出していただく形になります。

6 GitHubでリポジトリを作成して、コードを管理しよう

GitHubに作成したアカウントを使って、コードを保存・共有するための「リポジトリ」を作りましょう。
リポジトリは、あなたのプログラムをまとめて管理する場所です。ここでは、GitHubでリポジトリを作成し、パソコンにクローンし、ファイルを追加してアップロードする一連の手順を学びます。

📂 リポジトリ作成からコードアップロードまでの手順

  1. 1 GitHubにログインし、右上の「＋」→「New repository」をクリックします。
  2. 2 リポジトリ名に my-task と入力し、「Create repository」をクリックします。
  3. 3 表示されたURL（例：https://github.com/あなたのユーザー名/my-task.git）をコピーし、ターミナルで次のコマンドを実行してクローンします：
    git clone https://github.com/あなたのユーザー名/my-task.git
  4. 4 フォルダに移動し、新しいフォルダとファイルを作成します：
    cd my-task
    mkdir section1
    echo "Hello World" > section1/test.txt
  5. 5 Gitで変更を記録し、コメントを付けて保存します：
    git add .
    git commit -m "section1/test.txt を追加"
  6. 6 最後にGitHubにアップロードします：
    git push origin main

GitとGitHubを使った作業の流れ

☁️

GitHubでリポジトリを作成

GitHub上で、コードを保存するための新しいリポジトリ（プロジェクトの保管場所）を作成します。

💻

リポジトリをパソコンにクローン

クローンとは、GitHubにあるリポジトリをそのまま自分のパソコンにコピーしてくる操作です。

📁

フォルダとファイルを作成

パソコン上で、section1フォルダとtest.txtファイルを作成し、「Hello World」と入力します。

📝

変更をGitに記録する

追加したファイルをGitに登録（add）し、コメントをつけて保存（commit）します。

☁️

GitHubに変更をアップロード

記録した変更をGitHubにアップロード（push）し、インターネット上に保存します。

📘 Gitの基本的な使い方

🔹 最初の設定

Gitをインストールしたら、最初に自分の名前とメールアドレスを設定します。
これによって、誰が変更したのかが履歴に記録されます。

git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

🔹 変更を記録する

ファイルの変更を記録するには、まず「追加（add）」してから「保存（commit）」します。

git add .
git commit -m "最初のコミット"

変更内容に名前（コメント）をつけて記録できます。

🔹 変更履歴を確認する

これまでに記録された変更履歴を確認することができます。

git log

🔹 変更状態を確認する

まだ記録されていない変更があるか、Gitが現在どんな状態かを確認します。

git status

まとめ：準備が整いました

VSCODEと拡張機能がインストールできましたね。 次の章では実際にHTML/CSSを用いてページを作っていきます。

今回学んだこと

  • ✓ 開発環境とは何か、なぜ必要なのか
  • ✓ VS Code（コードエディタ）と拡張機能のインストール
  • ✓ Gitを使ったコード管理の基本