1.ローカル開発をしてみよう
目安時間:1分
これまで数々のレッスンお疲れ様でした!
ここにたどり着いたあなたはWebアプリケーションを作るために必要な知識を得たはずです。今度はProgateを飛び出して自身のPC上でWebアプリケーションを作ってみましょう!レッスンの中ではなく自身のPC上で作り上げることができたとき、本当にプログラミングを習得できたと感じることができると思います。
1. ローカル開発環境
まずそれぞれの言葉について知っておきましょう。
- ローカル環境→自分のPCのこと
- 開発→Webアプリケーションなど何かを作ること
ローカル開発をするためにはWebアプリケーションを動かせる環境を準備する必要があります。開発で使う言語やフレームワークなどはあらかじめPCにインストールされていないことが多いため、自身で必要なものをインストールするところから始めます。またデータベースもローカル環境に準備しましょう。
これまでの道のりももう少しでゴールです!このあと紹介する環境構築記事にそって準備を整え、これまで以上に刺激的なプログラミングの世界に飛び込みましょう!
Node.jsの開発環境を用意しよう!(Windows)
目安時間:30分
この記事では、Progate上ではなく自分のパソコン上でNode.jsを実行する方法を紹介します。
この記事を読みながら実際に手を動かして、Node.jsの開発環境を構築していきましょう!
◯ 必要なもの
Windows搭載のPC
この記事はWindowsをご利用の方向けの内容です。macOSをご利用の方はこちらの記事をご覧ください。
1. 環境構築の準備
Node.jsの環境構築を始める前に、「コマンドプロンプト」というツールを準備していきましょう。
このコマンドプロンプトは、Progateの演習でも使用したツールで、ターミナルとも呼ばれます。Node.js 学習コースでは「ターミナル」タブを選択したときに表示される部分にあたります。
コマンドプロンプトの起動
コマンドプロンプトはWindowsに標準でインストールされています。早速起動してみましょう。
PCの画面左下にある検索バーに「コマンド」と入力してください。「コマンドプロンプト」というアプリケーションが表示されたら、クリックで開いてみましょう。
すると、以下画像のようなウインドウが表示されたかと思います。
今後、このコマンドプロンプトでコマンドを実行していきます!
Node.jsがすでにインストールされているか確認しよう
Node.jsのインストールを始める前に、使っているパソコンにすでにNode.jsがインストールされているかを確認しましょう。
先程開いたコマンドプロンプトで、
node
-v
というコマンドを実行してください。
バージョンが表示された場合
v12.13.1 と表示された場合は、すでにNode.jsがインストールされています。この記事を読み進める必要はありません。
バージョンが表示されない場合
上の画像のように表示された場合は、まだNode.jsがインストールされていません。次の章でNode.jsのインストールをしていきましょう!
2. Node.jsのインストール
Node.jsをローカル環境にインストールしていきましょう。
Node.jsのインストーラーは公式サイトからダウンロードできます。今回は、推奨版をダウンロードしていきます。
インストーラーをダウンロード後、実行してください。
インストーラーを実行すると、以下のような画面が出るかと思います。指示に従って進めていきましょう。
途中で設定を変更できる箇所がありますが、基本的に変更する必要はありません。 以下に示す項目のみ、設定を変更しましょう。 注釈の付いているチェックボックスを選択してください。
このような画面が出たら「Finish」ボタンを押してください。
次に、以下のような画面が出るかと思います。画面の指示の通り、何かキーを押してください。
最後に、このような青い画面で「Type Enter to exit」と出れば完了です。Enterキーを押したあと、パソコンを再起動してください。
最後に、正常にインストールができているか確認してみましょう。
先程開いたコマンドプロンプトで、
node -v
npm -v
というコマンドを実行してください。
バージョンが表示されたらNode.jsのインストールは完了です!
3. うまくいかない時のチェックリスト
うまくいかない場合は、以下のような間違いがないかチェックしてみましょう。
- 記事で指定したコードが貼り付けられていない
- 入力したファイル名やソースコードなどに誤字脱字がある
- ファイルが保存されていない
- 記事で指定している箇所にフォルダが配置されていない
- コマンドの内容や実行している場所が違う
コメントをお書きください