ウェブ技術の現在(1)Javascriptを中心として

ウェブ技術の現在(1)Javascriptを中心として

ウェブの技術を調べていると、様々なフレームワークが登場して何を選択すれば良いの?と感じる時がある。Javascriptの情報の整理をしていた時にお世話となったWPJの記事でも、「フレームワーク疲れ」という表現がなされ、最適な処方箋は「ついていこうとするな」「確実なものはたった一つJavascriptそのもの」「とにかく言語(javascript)を学び、知識を増やした後で、フレームワークの動きがわかり納得のいく選択ができる」とあった。それら複雑なウェブ技術の世界を、今更ながらを含めて整理の意味からも、御復習いしてみた。

まず前回まで利用したReactにも使われていたNode.jsについて、Node.jsはサーバーサイドのプログラムをJavaScriptで書くためのランタイムで、npmというパッケージマネージャー兼リポジトリを持ち、2016年にはYarnというパッケージマネージャーもリリースされている。Npmリポジトリでサードパーティ製のモジュールを探すことができ、見つけたモジュールはnpm install コマンドで簡単にダウンロード、利用する事ができる。パッケージはローカルのnode_modulesディレクトリにダウンロードされ、すべてのモジュールと依存オブジェクトがこのディレクトリに格納される。ダウンロードしたパッケージはプロジェクトの依存オブジェクトとしてプロジェクトやモジュールの情報を含めpackage.jsonファイルに記載されるかたちになる。

次にReactについて、Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリ。AngularJSやjQueryと比較されるが、React自体はフレームワークでなく、あくまでもUIを構築するだけのライブラリとなる。Reactを使うメリットとしては、仮想DOM(Virtual Document Object Model)というレンダリング機構を用いる事で動作が早くなる。またそのような特徴を持つため後述のSPA（Single Page Application）が作りやすい等がある。新規のreactアプリを作るには、以下の操作でtemplate(例ではmy-app)を作る事ができる。

npx create-react-app my-app
cd my-app
npm start

前述のelasticsearch用のUIライブラリの導入は、npmを使って「npm install Package名」で導入できる。

次にWebアプリの構造について述べる。従来のウェブアプリケーションは、ウェブサーバーから複数のページを送信するなど、多くの動的な処理が必要になるとユーザーの操作に合わせてAjaxでHTMLを置き換えてコンテンツを読み込む方法が一般的だった。

この手法は、ユーザーが操作するたびにHTMLの断片、またはページ全体を送信することになり、動作時間が課題となった。この状況を脱する新たな手法として、ユーザーにサーバーがアプリケーションを表示するのではなく、クライアントが表示をしてサーバーとコミュニケーションをとる手法が用いられた。

上記の手法を更に進めたアーキテクチャーが、Single Page Application(SPA)。SPAとはアプリケーションの動作に必要なあらゆるものが含まれたJavaScriptの大きな塊で、ユーザーインターフェイスはすべてクライアントサイドで描画されるので再読み込みの必要はなく、唯一変化するものがアプリケーション内のデータとなる。通常はAjaxなどの非同期通信でリモートAPIで処理することとなる。この手法の欠点は、最初の読み込み時間が長いことだが、一度読み込めば、クライアントとサーバーの間はデータの送受信だけなので、ビュー（ページ）間を高速で移動できる。

最初の読み込み時により高速な反応が求められる場合や検索エンジンのインデックス最適化が必要な場合にSPAは最適解にならないこともある。こうした問題点を解決するための手法がIsomorphic（またはUniversal）JavaScriptアプリケーション。この手法により、コードの大部分をサーバー側とクライアント側の両方で実行できるので最初のページ読み込みでは高速化のためにサーバー側で必要なものを描画しそのあとでユーザーがアプリとやりとりする際はクライアント側による描画に切り替える事ができる。Webページは最初にサーバー側で描画されるので、検索エンジンはこれらのWebページを適切にインデックスできる。

ウェブアプリを用いて、デスクトップアプリのようなものを作るツールとしては、Meteor、Electron等がある。またフレームワークとしては携帯端末用のツールとして最近注目されている PWA(Progressive Web Apps)がある。これらの詳細については別途機会があるときに述べたい。

以上、これまで利用してきたNode.js、React、ウェブアプリの構成の概要について述べた。次回は開発ツールに関する概要を述べてみたい。