導入
環境構築って難しいですよね。
プログラミング初学者の多くが苦手とするのが、この環境構築です。
特に、多くのプログラミングの記事はmacやLinuxを前提にしているものが多く、Windowsユーザーにとっては当てはまらない記事が多いです。
そのため、WindowsユーザーはまずLinuxの環境を準備することから始める場合が多いのですが、これは初学者にとってはかなり難しく、挫折する人も多いです。
そこで、今回の記事では、WindowsでWebサイト・Webアプリ開発をするための環境構築の手順を、画像付きで丁寧に説明していきます。
なぜWindowsだと難しいのか？
実際に手順の説明に移る前に、なぜWindowsだとmacやLinuxと比べて難しいことが多いのかについて、簡単に説明します。
結論から言うと、Windowsとmac・Linuxでは元々のものが違うからです。
具体的には、現在のWindowsはWindows NT、macOSとLinuxはUNIXをベースにしており、そもそもの大元が違います。
これの何が困るのかというと、Windowsとmac・Linuxではコマンドが異なることです。
コマンドとは、パソコンに対して送る命令文のようなものです。
例えば、フォルダの中身を見るコマンドは、Windowsの場合はdir、macとLinuxではlsと異なります。
環境構築では、このコマンドを使っていろいろな操作をしていくことが多いのですが、先生はmacを使っていて自分はWindowsだと、先生に教えてもらったコマンドが動かないということが起きます。
これが、Windowsだと環境構築が難しいといわれる原因です。
Web制作・Web開発ではサーバーがLinuxであることが多いため、mac・Linuxに合わせることが一般的です。
このため、Windowsでmac・Linuxと同じコマンドを使えるようにするため、まず「Windows上でLinuxを使えるようにする」という手順が必要になります。
WindowsでWeb開発環境を構築する手順
それでは、具体的な手順の説明に移ります。
Windows上でWebサイト・アプリ開発のための環境構築の手順は以下のようになります。
- 自分のPCが対象のバージョンか確認する
- Windows上でLinuxを使えるようにする
- 必要なツールをインストールする
- 簡単なWebページを開く（オプション）
それぞれ順に紹介していきます。
もし途中でつまづく場合は、直接講師に教えてもらうのをおすすめします。
TechAcademy [ テックアカデミー]
だと、一人ひとりにエンジニアのメンターが付くのでおすすめです。
1. 自分のPCが対象のバージョンか確認する
まず、自分のパソコンが対象のバージョンであるか確認します。
今回私が使うWindowsのバージョンは、Windows11です。
Windows10以前のバージョンでは、今回紹介する手順ではうまく動かなかったり、画面が異なる場合があるので注意してください。
自分のパソコンがWindows7/8/8.1/10/11のどれかわからない場合は、以下の記事がわかりやすいので参考にしてみてください。
Windows10の方の場合は、そのままでも問題ないですが、無料でWindows11にアップグレードできる場合があります。
以下の記事が参考になるので確認し、もしアップグレード可能であれば、アップグレードするとこの後スムーズです。
Windows7/8/8.1であった方は、パソコン自体が古くな っていて、Web開発時にスピードなどでストレスに感じる場合があるので、パソコンを買い替えることをおすすめします。
例えば、以下のようなパソコンがプログラミングにおすすめです。
持ち運ぶ場合は、軽くて小さい以下の方がおすすめです。
2. Windows上でLinuxを使えるようにする
次に、先ほど書いたように、mac・Linuxと同じコマンドを使えるようにするため、Windows上でLinuxを使えるようにする必要があります。
以前はVirtualBoxを入れるなど、かなり複雑な手順を踏む必要があったのですが、最近はWSL2という便利なものが公式から用意されています。
それでは、具体的な手順に移ります。
まずパソコンを起動し、ホーム画面を表示します。
次に、左下の検索ボタンをクリックし、検索ボックスで下の画像のように「powershell」と入力します。
そして、出てきた検索結果の「管理者として実行」をクリックします。
すると、「このアプリがユーザーに変更を加えることを許可しますか？」というダイアログが出るので、「はい」をクリックします。
（この先も同様のダイアログが出たら、「はい」をクリックしてください）
そうすると、以下の画像のようにPowerShellが起動します。
ここに、先ほど説明したコマンドというものを使うと、パソコンに対して命令をすることができます。
ここでは、Windows上でLinuxを使えるようにするため、WSL2というものをインストールするための命令を入力します。
WSL2のインストールのためのコマンド（命令文）は、
wsl --installです。
先ほどのPowerShellに上のコマンドを入力し、Enterキーを押します。
すると、インストールが開始されるので、しばらく待つと「要求された操作は正常に終了しました。変更を有効にするには、システムを再起動する必要があります。」というメッセージが出ます。
メッセージが出たら、Powershellの画面を閉じて、メッセージにあるようにパソコンを再起動します。
しばらく時間がかかるので、完了するまで待ち、起動したら再度ログインしてホーム画面を開きます。
すると、自動でLinux (Ubuntu) の画面が開きます。
名前(username)とパスワード(password)を2回入力します。
パスワードは画面に表示されませんが、きちんと入力されているので、入力が終わったらEnterを押してください。
Enter new UNIX username: test(好きな名前をアルファベットで入力し、Enterを押す)New password: (パスワードを入力し、Enterを押す。思いつかなければパソコンのパスワードと同じでよい)Retype new password: (上と同じパスワードを入力し、Enterを押す)この情報は、再度聞かれることがあるので、メモに控えておいてください。
これで、Windows上でLinux (Ubuntu)が使えるようになりました。
Ubuntu（ウブントゥ）について簡単に説明すると、無料で使える最も有名なLinuxのディストリビューションです。
実はLinuxは無料で誰にでも公開されているため、多くの種類があります。
その中でもシェアが高く無料で、日本語にも対応しているので、安心して使うことができます。
3. 必要なツールをインストールする
それでは続いて、実際に開発環境を整えるところまで行います。
基本的にWebサイト・Webアプリ開発では、HTML・CSS・JavaScriptと言ったプログラミング用の言葉（プログラミング言語といいます）を使って、どこに何を表示するか、色や配置をどうするか、動きをつけるのかなどを指示しています。
例えば、以下のようなものです。（CSSを使った色の指定）
div { color: red; /* 赤色を指定 */}このプログラミング言語を書くときに使う ツールがエディタと呼ばれるものです。
その中でも有名なのが、Visual Studio Code (VSCode) です。
これはWindowsを作っているMicrosoftが作った無料のプログラミング向けのエディタです。
このパートでは、まずVSCodeをインストールし、その後必要な拡張機能を追加していきます。
VSCodeのインストール
それでは、VSCodeのインストール手順に入ります。
既にVSCodeがインストールされている場合は、このパートを飛ばしてください。
まず、以下のページを開きます。
https://code.visualstudio.com/
すると、以下のようなページが開くので、「Download for Windows」ボタンを押します。
その後、以下のページに移動するので、ダウンロードが完了するまで待ちます。
ダウンロードが完了した後、ダウンロードしたファイルをダブルクリックします。
すると、インストール画面が開くので、「同意する」を選択して、「次へ」を押します。
その後、以下の画面が出るまで、右下の「次へ」か「インストール」ボタンを押します。
この画面が出たら、「完了」ボタンをクリックすると、インストール完了です。
インストール後、自動でVSCodeが開きます。
設定は特にいじらず、すべての項目をクリックし、チェックを入れて、一番下の「Mark Done」ボタンを押すと、初期設定が完了です。
拡張機能のインストール
続いて、VSCodeに機能を追加できる拡張機能をインストールしていきます。
今回入れる拡張機能はこの2つです。
- Remote Development (別のマシン上で開発するためのツール一式。今回はWSL上のLinuxに接続するために使います)
- Japanese Language Pack for Visual Studio Code (VSCodeを日本語表示するためのツール)
それでは、順にインストールしていきます。
まず、Remote Developmentをインストールします。
左のメニューバーの赤枠で囲ったアイコンのExtensionsをクリックし、検索ボックスに「remote dev」と入力して、Enterを押します。
すると、検索結果にRemote Developmentが表示されるので、それをクリックして、インストールボタンをクリックします。
インストールが完了すると、Welcome画面が出るので、すべての項目をクリックしてチェックを入れ、「Mark Done」ボタンを押して設定を完了します。
続いて、Japanese Language Pack for Visual Studio Codeをインストールします。
先ほどと同様に、「japanese」と検索して、インストールボタンを押します。
インストール完了後、下にポップアップが現れるので、そこにある「Change Language and Restart」ボタンを押します。
すると、VSCodeが再起動し、日本語表示になります。
以上で拡張機能のインストールが完了です。
これで、環境構築は完成です。
4. 簡単なWebページを開く（オプション）
環境構築は完了していますが、最後に簡単なWebページを作成し、それを開いてみます。
このパートの細かいことまではわからなくていいので、おおまかな雰囲気をつかんでもらえればと思います。
まず、今開いているUbuntuとVSCodeの画面をそれぞれ、右上のバツ印をクリックして閉じます。
これをしないとエラーが出るので、忘れないようにしてください。
次に、再びLinux (Ubuntu) を開きます。
メニューバーの「検索」をクリックし、検索ボックス内で「Ubuntu」と検索して、「管理者として実行」をクリックしてください。
すると、Ubuntuが開きます。
HTMLファイルの作成
それでは、Webページを表示するために、HTML・CSS・JavaScriptの3つのファイルを作っていきます。
まず、3つのファイルを入れるフォルダを作成します。
フォルダを作成するコマンドは、mkdirです。
ここでは、「sample-html」というフォルダを作ります。
そのためのコマンドは、以下のようになります。
mkdir sample-htmlこれを先ほどのUbuntu内で入力し、Enterを押します。
実際に作成されたのかを確認するため、今いる場所にあるフォルダやファイルの一覧を取得するコマンドlsを入力して、Enterを押します。
すると、結果に「sample-html」と表示されていて、フォルダが正しく作成されていることがわかります。
次に、HTMLファイルを作成します。
まず、先ほど作った「sample-html」フォルダの中に入ります。
そのためのコマンドは、
cd sample-htmlなので、これを入力し、Enterを押します。
次に、新しくHTMLファイル「sample.html」を作ります。
ファイルを作成するコマンドはtouchなので、
touch sample.htmlを入力してEnterを押し、新しく「sample.html」というファイルを作成します。
実際に作成されたのかを確認するためのコマンドlsを使って、中身を確認します。
lsここまでやると、以下のような画面になると思います。
lsの結果として、「sample.html」が表示されていれば、成功です。
HTMLファイルの編集
続いて、VSCodeを使って先ほど作ったHTMLファイルを編集します。
先ほどの「sample.html」をVSCodeを使って開きます。
改めてVSCodeの画面が閉じられているかを確認してください。
確認ができたら以下のコマンドを入力し、Enterを押してください。
code .すると、WSL上のファイルをVSCodeで見るために必要なツールが自動でインストールされるので、完了するのを待ちます。
インストールが終わると、VSCodeが自動で起動し、以下のようなダイアログが出るので、「はい、作成者を信頼します」ボタンを押します。
「sample.html」をクリックして開くと、まだ中身がないことがわかります。
そこで、以下の内容をコピーして、ファイル内に貼り付けてください。
<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sample.css"> <title>サンプル</title> </head> <body> <h1>サンプル</h1> <p>これはサンプルです。</p> <div class="animation-area"> <img id="image" src="https://drive.google.com/uc?export=view&id=1FiOWtMk0oi6tsgKD_lIUNX_M_dBQ0jf1" width="50" height="50" alt="sample-logo" > </div> <script src="sample.js"></script> </body></html>貼り付けると、以下のようになります。
キーボードの左下にあるCtrlキーとSを同時に押して、この内容を保存します。
それでは、HTMLファイルが保存されたので、実際のWebページの表示を見てみます。
エクスプローラーを開き、左のメニューの「Linux」とある場所をクリックし、「Ubuntu」→「home」→「test（最初につけたusername）」→「sample-html」とフォルダをクリックして、HTMLファイルが入っているフォルダの中身を開きます。
そして、「sample」と書いてあるファイルをダブルクリックして開きます。
すると、初回起動時は以下のようになるので、好きなブラウザ（ここでは一番上のGoogle Chromeを選びます）を選択し、「常にこのアプリを使ってhtmlファイルを開く」にチェックを入れ、「OK」ボタンを押します。
すると、以下のようにWebページが表示されます。
これで、HTMLファイルを編集し、開くことができました。
CSS・JavaScriptファイルの追加・編集
最後におまけで、デザインの変更とサイトに動きをつけるために、CSSファイルとJavaScriptファイルを同じフォルダ内に追加します。
下の画像にあるように、フォルダ名（今回だとSAMPLE-HTML）の横にカーソルを当てると、アイコンが表示されるので、一番左の赤枠のアイコンをクリックします。
すると、ファイル名を入力する表示になるので、「sample.css」と入力し、Enterを入力します。
そして、今作ったCSSファイルをクリックし、以下の内容をコピーして貼り付けます。
キーボードの左下にあるCtrlキーとSを同時に押して、この内容を保存します。
h1 { color: red;}
.animation-area { background-color: yellow;}内容としては、タイトルの文字を赤色に、画像が動くエリアを黄色に変更しています。
同様に、「sample.js」というファイルも作成し、その中身を以下のように変更した後、CtrlキーとSを同時に押してこの内容を保存します。
const image = document.getElementById('image');
image.animate( [ { transform: 'translateX(0)' }, { transform: 'translateX(200px)' } ], { fill: 'backwards', duration: 1000, iterations: Infinity, },);内容としては、画像を左から右に、1秒の周期で移動し続けるようにしています。
最終的には、VSCode上では以下の画像のようになるはずです。
それでは、再びエクスプローラーを開き、先ほどと同じ「sample」とあるHTMLファイルをダブルクリックして開きます。
すると、以下のようにサイトの色が変わり、画像に動きが追加されていることがわかります。
このように、CSSはサイトの見た目を変え、JavaScriptはサイトに動きをつけます。
以上で、WindowsとWSL2を使ったWebの開発環境の構築と実際に動作するかの確認が完了しました。
まとめ
今回の記事では、WindowsとWSL2を使って、Webの開発環境を構築する方法を紹介しました。
環境構築に必要なステップは以下の通りです。
- 自分のPCが対象のバージョンか確認する
- Windows上でLinuxを使えるようにする
- 必要なツールをインストールする
- 簡単なWebページを開く（オプション）
この手順に従うと、環境構築ができるはずです。
もし何らかのエラーが発生しうまくいかない、手順通りに進めることができない場合は、講師に直接教えてもらうのが早いです。
先ほども紹介したTechAcademy [テックアカデミー]
だと、メンターが付き、一からサポートしてくれます。
無料相談・無料体験もやっているようなので、うまく活用してみてください！
