Index

node.js(+express)から javascriptを学び始める、初心者向けガイド

下記の記事を参考に、可能な限り日本語のサンプルを掲載。 また整理して、独自の解釈を加えています。

参照

1 JSは何故残ってるか?

いずれ消えると思われたJavascriptという言語は今も残り続けています。 理由は簡単です。

  • ブラウザでインタラクティブなデータの取り扱いに優れている。

  • バックエンドで使えるnode.jsが出てしまった。

js一つでフロントもバックエンドも再現できるわけです。 学習コスト面でも現在の潮流の意味でも今後この言語が消える事は100%無いでしょう。

※ 過去にブラウザでインタラクティブな物の代表格だったFlashは廃止されています。 ※ また、ブラウザで動作するものに、Javaのアプレットなどもありましたが、今は非推奨となっています。

他の選択肢がどんどん衰退していくのもJSの立ち位置が強固な理由の一つです。

2 JSを学習する前に

一昔前はブラウザでインタラクティブなデータ操作の為に使ったり、jQueryライブラリを利用するのに使うのが一般的でした。

2−1 ブラウザ毎にjavascriptの実装状況に違いがあるのはなぜか?

ブラウザのJavascript,node.jsの基盤を支えてるのはV8エンジンと呼ばれる物です。

V8エンジン

一方Firefoxなどはスパイダーモンキーという物を搭載しています。 スパイダーモンキー

このようにJavascriptを実行する基盤をそれぞれ別々に開発しているため、利用するメソッドやプロパティにブラウザが対応してるを常に気をつける必要があるのです。

MDNにはブラウザ毎の実装状況がよくまとめられています。 MDN Web Docs

※ node.jsにはV8エンジンが搭載されています。 node.js The V8 JavaScript Engine

2−2 どちらを先に学ぶべきか?

  • クライアント側のjavascriptのみを学ぶ
  • サーバーサイドのnode.jsを学ぶ

この2点を同時進行で行う意味でも、先行してnode.jsを学ぶという選択肢は悪くありません。 何故なら、現状のモダンな開発環境をささえる色々なパッケージがそもそもnode.jsによって維持されてるからです。

node.jsがあれば開発環境の構築も出来ますし、実際にサーバーでのサービス運営も出来ます。

3 REST API について

3−1 REST

REST(REpresentational State Transfer)とは簡単に言うと 「ブラウザとサーバーとの通信様式全般」 の事です。

中身はURLを指定して、リクエストとレスポンス自体に決まりがある点。 2回目以降に前回情報の・・・という事が指定できないステートレス性という性質を持つという点です。 (そのため、ログイン状態などの維持にはブラウザ、サーバー側でのセッション維持(クッキー利用等)が必要です)

3−2 API方式

サーバー側から、json方式のデータを取得して、情報を処理するのは現状のAPI方式の主流です。 ※GraphQLという形式の利用も増えてますが、ここでは割愛します。

 3−3 具体的な理解

具体的にはすべて平文のようなヘッダーが通信の頭に割り当てられています。 リクエストを行う時、そしてそのリクエストからのレスポンス。 それぞれを理解する事は今後の理解の助けになります。

HTTPリクエスト

HTTPレスポンス ステータスコード

4 クライアント側とサーバーサイドJSの動作の違いについて

4-1 イベントループについて

JSは基本ノンブロッキングI/Oで、処理が並列に起こってるように見えます。 JSは実際の所はイベントループという仕組みをつかってこのノンブロッキングI/Oを実現させてます。

Node.jsのイベントループはlibuvに基づきます。 ブラウザのイベントループはhtml5に基づきます。

参考

process.nextTick()

抑えるポイントは - フロントとバックエンドでイベントループの仕組みやメソッド数が若干違う。 - node.jsのアクティブハンドルの有無 - node.jsはイベントループを止めるとプログラムが止まる。 - 実行順に決まりがある - CPUを消費する処理は child processを使う

4−2 クライアントJSでの非同期、 node.jsの非同期

node.jsは入出力関連を非同期で行う為、意図通りにプログラムを組むために工夫が必要でした。 しかしasync/awaitを利用する事で、プログラムフローを意識してプログラムの実行が書けるになりました。

フロント側においても、データを外部から取得するAjax処理での非同期においてasync/waitが今は欠かせない物になってます。

5 node.jsの学びを進める

やりながら覚えるなら progate node.js

公式のガイド・日本語版 ガイド

公式サイトに基づいて動画で紹介(英語) 動画ガイド

6 開発前に抑えた方がいい項目について

開発に入る前の基礎固めとして、陥りやすいミスやポイントなどを解説してます。 完全互換な物をさがせてたかわからないので、英語の物+日本語で参考になりそうな物をリンクにしています。

6-1 REST API

How to build a Node.js REST API

Node.jsを利用した単純なREST APIの書き方

6-2 JWT

Build A Node.js API Authentication With JWT Tutorial

JWT Authentication Tutorial - Node.js

日本語補足 node + expressでJWT (2021年1月)

6-3 総合

Crash Course Tutorial

日本語補足

日本語字幕あり NodeJSとExpressを使用してRESTAPIを構築する| CRUDAPIチュートリアル

少しずれるが、色々まとまってる node.js入門

6-4 MERN スタック

MongoDB, Express, React, Node.jsの4つを使ったソフトウェアハンドル

Learn The MERN Stack - Express & MongoDB Rest API

3分で分かる。MERNスタックを簡単に説明してみる

6-5 CRUD API and more

SPEED RUN: Build a CRUD API with Node.js + Express + MongoDB

How to build a MERN Travel Blog

6-6 How to build a Real-time chat with Socket.io

Learn Socket.io In 30 Minutes

7 さらに抑えておきたいポイントについて

7-1 エラーハンドリング

7-1-1 node.jsのエラーハンドリング

Error handling

日本語補足 node.jsのエラーハンドリング

7-1-2 expressのエラーハンドリング

Error Handling

7-2 イベントループについて

Node.jsイベントループ:それほどシングルスレッドではありません

7−3 サーバースピードについて

Take your server to ludicrous speed

7-4 セキュリティ

JWT vs Sessions Session vs Token Authentication in 100 Seconds

Node.js Vulnerability Cheatsheet

7-5 その他

Node.js 公式

NodeConf playlist

8 nodejsフレームワークについて

expressでの開発に慣れてきたら、他のフレームワークを利用するのも悪く有りません。

nodejsで開発するウェブアプリケーション、おすすめのnodejsフレームワークについて

最新記事一覧

続きを見る

関連コンテンツ

カテゴリー一覧

TOP フルスタックエンジニアを目指すに方々へ 2018年4月22日 HTML,CSS,JS