HTML・CSS・JavaScriptの基本を学び終えた初心者です。
学んだことを体系的に復習するため、いくつかWebアプリを作っていきます。
定番のToDoアプリを作成したのち、TypeScript・Reactを用いてアップグレードしていく予定です。
私と同じように基本を学び終え、「次なにしよう…」と迷っている方の一助となれば幸いです。
今回は環境構築について一部まとめます。
※プログラミング初学者がまとめている記事です。
温かい目で見守ってくださると嬉しいです
前提条件
以下の環境で使用している前提でまとめていきます。
- OS：Windows10 22H2 or Windows11
- エディタ：Visual Studio Code
- 仮想環境：Docker Desktop
1.Docker導入
仮想環境の構築については、すでに多くの先輩方が解説されているので、そちらの記事を参考にします。
まずはじめに、WSL2とDockerを導入します。
次に、VSCodeとDockerを連携するDevContainerを導入します。
これで、VSCodeとDockerの連携ができました。
仮想環境を使用して作業するときは、Docker Desktopを起動しておきます。
2.VSCodeからコンテナーで仮想環境を構築する
コードを保存するフォルダを開いたら、
- 左下の><（くの字のアイコン）をクリック
- 『新しい開発コンテナー』を選択
- 『Node.js & JavaScript』を選択
するとコンテナーの構築が始まります。
しばらく待つと左下に「開発コンテナー：…」と表示されるはずです。
この仮想環境には、Node.jsとJavaScriptがあらかじめインストールされています。
VSCodeのターミナルで、以下のコマンドを実行してみてください。
npm -v
node -v
それぞれバージョンが返ってくるか確認してください。
これで仮想環境の構築は完了です。
なぜ仮想環境を使うのか？
主にこれらのメリットがあります。
- ローカルを汚さない。直接インストールしてしまうと、後々面倒なことになる
- 複数台のPC・あるいは複数人で作業するとき、イメージを共有すれば同じ環境を簡単に整えられる
- バージョンの差異によるエラーを予防できる
3.Node.js
今回はNode.jsのフレームワーク・Expressを使って開発するので、コマンドを実行してこれをインストールしていきます。
以下、Progateのこちらのページを参考にしています。
まず、npmの設定ファイルを生成します。
npm init --yes
するとフォルダ内にpackage.jsonが生成されます。
次に、Expressとejs、nodemonをインストールします。
nodemonを導入することで、ホットリロード（ファイルを書き換える度に、サーバーを再起動せずとも変更内容を反映すること）が可能になります。
npm install express ejs
npm install -g nodemon
これで開発環境を整えることができました。
4.サーバーを起動する
最後にサーバーを立ててみて、動作を確認します。
- 作業フォルダ内に、ルーティング処理を記述する routes.js を作成する
- 作業フォルダ内に、ビューファイルを置く views フォルダを作成する
- viewsフォルダ内に、表示するページとなる index.ejs を作成する
それぞれに以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<h1>Hello, world!<h1>
</body>
</html>
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.render('index.ejs');
});
app.listen(port);
保存し、ターミナルで以下のコマンドを実行します。
node routes.js
実行すると、仮想環境上でサーバーが起動します。
デフォルトのブラウザから localhost:3000 にアクセスすればページが表示されます。
ターミナルにCtrl+Cを入力するとサーバーを終了できます。
環境構築は、ひとまずこれで完了です。