プログラミングで新しい言語を学ぶ時ってこうゆう悩みが多いですよね！
この記事では、こうしたNode.jsの初学者に向けて初心者を脱するまでの学習手順について解説いたします。
この記事のロードマップにそって学習することで、下記のような簡単なアプリケーションを作成できるようになります。
※最終課題として、記事の最後で理解度テストをダウンロードできますので、是非挑戦してみてください！
「最近、独学での学習に限界を感じてませんか？」
私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。
「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。
プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。
ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。
無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！
目次
Node.jsとは？
最初にNode.jsを簡単に説明しておきます。
Node.jsは、JavaScriptをサーバー側でも動作させることのできる仕組みのことです。
JavaScriptは、本来Webブラウザ上で実行するフロントエンドのプログラミング言語であるため、データベースとのやりとりなどを行うことが出来ない言語でした。
そのブラウザ上の環境でしか動かせなかったJavaScriptをサーバーサイドでも、動かすことができるようにしたのがNode.jsです。
この記事どおり学習するだけで、JavaScriptを使って、サーバーとのやり取りが可能となり、簡単なWebアプリを作ることが可能になります。
Node.js学習ロードマップの全体像
それでは学習の全体像について解説していきます。
Node.jsの初学者を脱するため、大きく３つのステップで行います。
- 環境構築
- パッケージ・フレームワークの利用方法
- データベース（CRUD）
環境構築
まずは、環境構築ですが、ここではご自身のPCにNode.jsを使用できる環境を整えていただきます。
環境設定は、初心者が挫折する原因の1つのため、苦手な方には難しい部分もありますが、この記事では、画像を多用して非常にわかりやすくしておりますので、安心して進めてください。
- ローカル環境設定
- 新規プロジェクト作成
- 自動でサーバーを起動
パッケージ・フレームワーク
次に、パッケージ・フレームワークのステップでは、Node.jsを動かすにはなくてはならないパッケージやフレームワークのインストール方法から使用方法まで解説します。
パッケージやフレームワークは、Node.jsを使用する基礎となりますので、1つ1つ覚えていきましょう。
- Expressをインストール
- ルーティングとフォルダ構成
- EJSを使う
- スタイル・画像の表示
- 共通する部分とまとめる
データベース（CRUD）
最後にデータベースとの接続ですが、ここではローカル環境上に作成したMySQLと接続を行い、基本機能であるCRUDを行います。
※CRUDは、永続的なデータを取り扱うソフトウェアに要求される4つの基本機能である、データの作成（Create）、読み出し（Read）、更新（Update）、削除（Delete）の頭文字を繋げたもので、最低限できるようになる必要のある機能です。
Node.jsは、JavaScriptのサーバーサイドを扱える仕組みのため、このデータベースへの接続が一番大切になっていきます。
また、CRUDが操作できるかどうかは、初心者脱出の１つの指標です。
実際の開発の場面でもこれが基本となりますので、確実にできるようになりましょう。
- mysqlのインストール
- データベースから値を取得（Read）
- データベースに値を追加（Create）
- データベースから値を削除（Delete）
- データベースの値を編集（Update)
ここまで出来たら記事の最後に理解度テストも用意していますので、最後まで学習してみてください。
Node.js学習ロードマップ【環境構築】
それでは、実際の学習ロードマップに入っていきます。
ここでは、ご自身のPCでNode.jsの開発が行える環境を整えていきます。
内容は以下の３ステップです。
- ローカル環境設定
- 新規プロジェクト作成
- 自動でサーバーを起動
まずは、開発環境を整えなければ学習が開始出来ないのでじっくりやっていきましょう。
①ローカル環境を整える【環境構築】
Node.jsを使用するには、ご自身のPCにNode.jsをインストールする必要があります。
Node.jsをインストールすることで、ステップ2の説明するフレームワークなんかもインストールするための「npm」と言われるパッケージを管理するシステムを利用可能になります。
ローカル環境の設定は以下の記事を参考に行ってください。
②新規プロジェクト作成【環境構築】
ローカル環境が整ったら、次は、新規プロジェクトを作成していきます。
Node.jsの新規プロジェクトを作成するには、コマンドプロンプトというザ・コンピューターというような黒い画面を使うため、初心者にはとっつきにくいですが、これからエンジニアをやっていくには、どうしても使っていくものなので、ここで慣れておきましょう。
新規プロジェクトの作成は下記記事を参考に行ってください。
③自動でサーバーを起動【環境構築】
ご自身のPCに新規プロジェクトを作成出来たら、Node.jsの開発は可能となります。
しかし、現状では、コードを書き替えるたびに、コマンドプロンプト（黒い画面）でプロジェクトを再起動させる必要があり、かなり手間です。
ここでは、そうした手間を解消するため、nodemonというパッケージをインストールすることで、再起動を自動化していきます。
下記記事を参考に進めてください。
Node.js学習ロードマップ【環境構築】のまとめ
- Node.jsをインストールしてPCに環境を設定する
- コマンドプロンプトにコマンドを打ち込んで、新規プロジェクト作成する
- nodemonをインストールして、再起動の自動化
ここまでで出来れば環境設定は完了です。お疲れ様でした。
次の章からは、Node.jsを使うのに必須となるフレームワークやパッケージについて解説していきます。
Node.js学習ロードマップ【パッケージ・フレームワーク】
ここでは、Node.jsを使用するにあたって、なくてはならないパッケージやフレームワークについて、インストール方法や使用方法を解説していきます。
内容は以下の５ステップです。
- Expressをインストール
- ルーティングとフォルダ構成
- EJSを使う
- スタイル・画像の表示
- 共通する部分とまとめる
このステップを学習することで、画面遷移やデザインなどが可能となります。
Node.jsの最大のメリットであるサーバーとの接続をするにあたって、
ルーティングの知識やデータベースのデータを画面に表示するためのEJSの知識も学習していきますので１つ１つ理解していきましょう。
①Expressをインストール【パッケージ・フレームワーク】
まずは、Node.jsといえばといわれるフレームワークのExpressのインストール方法です。
Expressをインストールすることで、次のステップで解説する画面遷移を管理するルーティングなどを行うことが可能となります。
※Expressのインストールは「新規プロジェクト作成【環境構築】」で一度行っています。
下記記事を参考に進めてください。
②ルーティングとフォルダ構成【パッケージ・フレームワーク】
Expressがインストール出来たら、Expressで行うルーティングです。
このExpressを使ったルーティングは、開発プロジェクトの司令塔のような存在のため非常に重要な内容となります。
また、Node.jsの基本的なフォルダ構成についても解説しておりますので、しっかり理解するようにしてください。
ルーティングとNode.jsのフォルダ構成は、下記記事を参考に行ってください。
③EJSを使う【パッケージ・フレームワーク】
次に解説するのは、EJSです。
EJSは、Node.jsのパッケージで、JavaScriptのコードをHTMLのコードの中に埋め込むことができるので、動的なホームページを作成することが可能となります。
このEJSは、サーバーから取得した値を画面に表示するためにも利用するため、しっかり学習していきましょう。
下記記事を参考に行ってください。
④スタイル・画像を表示【パッケージ・フレームワーク】
Node.jsのスタイルや画面表示は、Expressを使用して行います。
難しくはないと思いますが非常に大切なことなのでしっかり理解していきましょう。
下記記事を参考に行ってください。
⑤共通する部分とまとめる【パッケージ・フレームワーク】
パッケージ・フレームワークの最後です。
ここまで、作成したファイルの共通部分をまとめていきます。
通常のHTMLファイルでは、共通部分をまとめることはできませんが、Node.jsでは共通部分をまとめることが可能です。
共通部分をまとめることで、可読性が向上するだけでなく、修正箇所を一元化できるなどのメリットがありますので、しっかり学習していきましょう。
下記記事を参考に行ってください。
Node.js学習ロードマップ【パッケージ・フレームワーク】のまとめ
- Expressでルーティングとスタイルや画面表示ができる
- EJSでJavaScriptのコードをHTMLのコードの中に埋め込むことができる
- 共通化を図ることで可読性や修正などがしやすくなるメリットがある
このステップでNode.jsで使われる基本的なパッケージ・フレームワークを理解することが出来たと思います。
ここまでの知識を使えば、Node.jsを使って静的なWebページを作成することが可能となります。
一度、Node.jsで簡単なWebページを作ってみると復習になりますので、ぜひ挑戦してみてください。
さて、次のステップはいよいよデータベースとの接続です。
Node.jsは、このデータベースとの接続する部分で威力を発揮するので、しっかり学習していきましょう。
Node.js学習ロードマップ【データベース（CRUD）】
Node.jsの初心者向け学習ロードの最後のステップになります。
最初の「Node.jsとは？」の部分でも触れましたが、Node.jsは、フロントエンドの言語であるJavaScriptをサーバーでも利用できるための仕組みです。
サーバー側で利用できる最大のメリットは、データベースと接続できることです。
つまり、Node.jsの学習において、ここからが本番になります。
サーバーサイドの言語を扱ったことない方には、データベースを扱うのが少し難しいかもしれません。
しかし、データベースを扱う上で「CRDU」と呼ばれるデータの作成（Create）、読み出し（Read）、更新（Update）、削除（Delete）は基本であるとともに非常に重要な機能です。
アプリなどの開発において間違いなく使う機能となりますので、１つ１つゆっくりでいいので理解していきましょう。
- mysqlのインストール
- データベースから値を取得（Read）
- データベースに値を追加（Create）
- データベースから値を削除（Delete）
- データベースの値を編集（Update)
①mysqlのインストール【データベース（CRUD)】
まずは、Node.jsのプロジェクトをデータベースと接続していきます。
今回の解説では、代表的なデータベースであるMySQL（ローカル環境）と接続していきます。
MySQLと接続するには、Node.jsのプロジェクトにmysqlをインストール必要があります。
また、ローカル環境にMySQLを環境を整える必要がありますので、その環境設定をおこなっていきます。
ローカル環境でのMySQLとNode.jsのプロジェクトにmysqlを設定できたら、この二つを接続していきます。
データベースを扱ったことがない人や環境設定が苦手な人は、かなり苦戦するかもしれません。
ここが正念場ですので、１つ１つでいいのでゆっくり理解しながら進めてください。
下記記事を参考に行ってください。
②データベースから値を取得（Read）【データベース（CRUD)】
上記でデータベースの接続を行ったら、実際に接続が出来ているか、データベースから値を取得することで確認していきます。
ここでは、データベースから取得してきた情報を、第２ステップで学習したExpressのルーティングやEJSを利用して、画面に表示していきます。
下記記事を参考に行ってください。
③データベースに値を追加（Create）【データベース（CRUD)】
ここでは、画面上からデータベースに値を追加できるようにしていきます。
上記のデータベースに接続して、値を取得できるところまで出来れば、ここからはその応用になっていきます。
下記記事を参考に行ってください。
④データベースから値を削除（Delete）【データベース（CRUD)】
ここでは、データベースにある値を画面上から削除していきます。
ここが終わればもう一息です。
１つ１つゆっくりでいいのでしっかり理解していきます。
下記記事を参考に行ってください。
⑤データベースの値を編集（Update)【データベース（CRUD)】
ここでは、データベースの値を編集していきます。
この値を編集が学習ロードマップの最後の項目になります。
ここまでの内容が理解できていればそこまで難しい内容ではないと思いますが、値の編集は重要な機能となりますので、しっかり理解していきましょう。
下記記事を参考に行ってください。
Node.js学習ロードマップ【データベース（CRUD)】のまとめ
- MySQLを扱うには、Node.jsのプロジェクトにmysqlをインストールする
- データベースを扱うにあたってCRUDは基本であり重要な機能
ここまで学習出来れば、Node.jsにおけるデータベースのCRUDは理解できたと思います。
データベースを理解出来れば、簡単なアプリ開発を行うことが可能になります。
最後にここまでの学習の復習として理解度テストを用意しておりますので、データベースのCRUDについて復習し、習得できるようにしていきましょう。
Node.js学習ロードマップのまとめ【理解度テストあり】
学習お疲れ様でした。
ここまで学習が出来れば、Node.jsの基礎的な部分は学習出来ています。
サーバー側とのやりとりも可能となったと思うので、是非ご自身で簡単なWebアプリでも作成してみてくださいね！
ここで、ここまでの学習の理解の確認と学習の定着のため理解度テストを用意しました。
実際の開発に近いように簡単な仕様書を作成しましたので、そちらを確認して、指示どおりのアプリケーションを作成してみてください。
ここまでの内容が理解できていれば出来る内容となっておりますので、わからない部分は、ロードマップを再度確認しながら進めてみてください！
テスト内容
下記PDFの仕様書を確認し、ユーザー管理アプリを作成してください。
完成イメージ
完成例
テスト完成例です。
まずは、自身で初級編を確認しながら作成してください。
なお、仕様書にある機能が実装できれば問題ありませんので、完成例どおりのコードでなくても、問題ありません。
「最近、独学での学習に限界を感じてませんか？」
私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。
「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。
プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。
ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。
無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！
私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。
「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。
プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。
ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。
無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！
