お役立ち

【Node】JavaScriptがWeb開発で選ばれる理由と入門

  • このエントリーをはてなブックマークに追加

2年前のわたしはNode.jsを
取っ付きにくい上にメリットがよくわからないため
学ぶのを先延ばしにしてしまいました。
そんな2年前の自分のような人に
Node.jsのすばらしさをわかりやすく伝えたいと思い記事を書きました。

Nodeとは?

Nodeとは、JavaScriptを実行する環境のことです。
Nodeの登場によってサーバーサイドをJavaScriptで実装できるようになりました。
また、Nodeは独特な方法でコードの実行を行います。
一般的な言語では、1行目から順番に次の行へと処理を進めます。
一方、Nodeでは、実行が可能な行からコードを実行するようになっています。
これは、厳密な言い方をすると、
イベントループとノンブロッキングIOによってコードを処理します。
そのため、コードの記述が非同期プログラミングになり
とっつきにくい一面もあります。
しかし、この問題も新たな文法の登場により解消されつつあります。
いまは、Nodeを学ぶベストなタイミングなので、
時代に取り残されないように今の内にNodeを学ぶべきです。

Node.jsが選ばれる理由

私が考えるNode.jsのメリットは、次の3つです。

  • Ajaxアプリケーションが簡単にかける
  • シングルページアプリケーションの作成が容易
  • 同時に膨大なリクエストを裁ける

Ajaxアプリケーションが簡単にかける

従来のWebではページの情報が切り替わるたびにページ全体が更新されていました。
そのため、ちょっとした変更のたびにページ全体の読み込みが行われてしまいます。
しかし、モダンなWebサイトの場合、
Javascriptによってサーバーにリクエストし、
必要な箇所をJavaScriptで変更することでページの読み込みを最小化し
ユーザビリティを高めています。これは、Ajaxと呼ばれたりします。
これをRailsなどのフレームワークで行おうとすると、
JQueryなどで書くことになります。
このとき、言語が代わるため、
デバッグが難しくかなり面倒です。
しかし、Nodeの場合、すべてJavaScriptでかける上に
Reactといった強力なフレームワークがあるため
簡単に非同期通信を用いたアプリケーションが作成できます。

シングルページアプリケーションの作成が容易

Ajaxアプリケーションの発展系ともいえる
シングルページアプリケーションが用意に作成できます。
シングルページアプリケーションとは、
ページの切り替えをすべてJSで行うWebページです。
ユーザーが軽快にブラウジングを楽しめます。

膨大なリクエストを同時に裁ける

これまでは、フロントエンドの話でしたが、
バックエンドでも大きなメリットがあります。
それは、膨大なリクエストを同時に裁けることです。
既存の言語は、スレッドモデルによって
処理を行うためC10K問題にぶち当たります。
これは1つのリクエストに対して、1つのスレッドを生成するので、
スレッド数が上限に達してサーバーがパンクしてしまう問題です。
しかし、Node.jsはイベントループモデルを採用しているため
この問題を上手く回避しています。

PC+スマートフォン+スマートスピーカー+α
と一人で複数の端末を所持する現代にとって、
C10K問題を解決できるNode.jsは注目の技術といえます。

フレームワークの選定

Node.jsでWebアプリケーションを作成する場合、
フレームワークの選定が難しいところです。

Express

Expressを利用するともっともシンプルに
Webアプリケーションを作成することができます。

フロントエンドのフレームワーク

フロントエンドフレームワークは
React、Angular、Vue.jsの三つ巴といった具合です。
ReactはFacebookが、AngularはGoogle開発しています。
Vue.jsは元Angularの開発者がGoogleから独立して開発しています。
この3つの中では、Reactが利用者が多いイメージがあり
Angularがものすごい勢いで追従している状況です。

時代はSSRへ

ただし、Reactだけでは最先端とは言えないです。
現在のWebは、さらに技術が進歩しています。
サーバーサイドレンダリング(SSR)といった新たな技術が生まれました。
これは、シングルページアプリケーションの問題点を解決するために
生まれた技術です。モダンなWeb開発に追いつくためにはここまで学ぶ必要があります。
SSRを実現するフレームワークとして、
create-react-app,Next.js,Reduxがあります。
Next.jsはcreate-react-appの面倒な設定を
自動で行うことでより簡単にしたフレームワークです。
個人的には、Next.jsのほうが好きなので今後ブログで紹介する予定です。

  • このエントリーをはてなブックマークに追加