webサイトのisomorphic構成がいまいちよく分からん話

何故エンジニアは意味のわかりにくい単語を多様して話をするのか、ようやく理解できた、ユゲタです。 技術力は高いけど、まともに会話ができないエンジニアって、会社では優秀だけどヒューマンスキルが劣っていて、少し敬遠されがちな存在になっていませんか？ そういう人は、自己学習も毎日おこなっていて、勉強熱心で人として劣っているようにも思えないのですが、何故か話をすると、言っている意味がさっぱり分からない・・・ こういう時は、お互いの単語認識が食い違っている事が多く、同じことを言っているのに、話が通じないというケースが多いんですよね。 この間、とある著名なエンジニアの人が「isomorphic」という単語を話していて、話の意味が分からなかったので、調べてみたところ、javascriptにおけるwebサイトの構築の手段だということがわかりました。

isomorphicとは？

この単語、直訳すると、「同型」といって、数学系から言語系、心理学など、色々なジャンルで出てくる単語でもあります。 プログラミングで出てきた時のこの単語の意味は、「isomorphic javascript」の略だと思ってもいいでしょう。 でも、どうやら死後になりかけているようで、HTML5になる前からwebサイトの構成についての手法として一部の人に持てはやされていたようです。 isomorphic javascriptは、わからない人のために簡単に説明すると、通常のwebサイトは、サーバーから出力されるhtmlコードをブラウザでレンダリングしますが、 サーバーサイドと、クライアントサイドどちらでもレンダリングをして、それぞれの変更点を補う相互仕様なのだそうです。 これはnodejsが出てきてから、クライアント負担を軽減するのと、cgiよりもjavascriptの方が効率的と考えるエンジニアが生み出した新たな方式のようです。 （諸説あります） js系のフレームワークである、Reactjsなどを使ったサイト構築は、まさにisomorphic javascript構成といえるわけですね。 そして、最初に読み込まれるwebページは、javascriptモジュールのみが書かれた真っ白なページなので、それを読み解かないとなかなかソースコードが理解しづらいでしょうね。 確かに、サーバー系が得意な人でも、こうしたフロントベースの構成サイトが苦手と言っている人が多いのもうなずけます。

「isomorphic」と「spa」

javascriptだけで作られたwebサイトと聞くと、「SPA」という単語が頭に浮かびますが、SPAとisomorphicは同じものかというと、どうやらそうでも無いらしく、この２つは大きく違っているらしいですね。 SPAは、雑誌の名前ではなく、「SinglePageApplication」の略ですが、この定義は、webサイトに複数あるページをページ遷移させずに、javascriptで内容を切り替えて、ページ移動しているように見せかける方式で、ページ遷移しないので、無駄なローディングなどをなくす事が目的になっていることが多いようです。 twitterやfacebookなどのサービスがspaとしては有名ですよね。 一方、isomorphicは、サイト側とクライアント側の両方でレンダリングをしているため、ページ読み込み後にレンダリングが始まるSPA方式での初動スピードの遅さを補う効果があるようですね。 この点が本当にわかりにくいですが、isomorphicは、SSR（ServderSideRendering)とSPAのハイブリッドというやり方という事がわかります。 なるほど、これは確かにいい方法だ。

もっとも簡単なisomorohicを実現するために

実は、このハイブリッド方式、かつてとある会社のホームページを作った時に密かに採用した方式で、まず、普通のwebサイトをSSR方式で構築します。 この時に、全てのページの構成を同じにして、メニュー、フッタなど、全ページでの共通点と、内容のコンテンツ部分とに切り分けて、ページ移動の際には、ajaxで対象のURLを送ると、コンテンツ部分のみが返ってくるようにします。 それを受け取ったjavascriptでコンテンツ箇所を書き換えてあげれば、nodejsなどを使わなくても簡単に擬似的なisomorphic構成が実現できます。 コンテンツ部分ももっと仕組みを共有化できれば、細分化された箇所のみの書き換えになると、データ転送量もより少なくなり、ページ切り替わりスピードも早く、サックサクのページが作れてしまいます。 これを、Google Insitesで採点してみたところ、98点という高得点が得られて、SEO的にもバッチリの効果を上げることができるようになりました。 実はこの方式、慣れてしまうと、データ転送量だけでなく、サーバー負荷もかなり抑えることができる上、クライアントの負荷も最小限に抑えることができるため、こうしたサイト構築に慣れておくことがエンジニアにとっては、必要なのかもしれませんね。 う〜〜〜〜ん、今回のブログ、全く意味が通じない人も多いだろうな・・・ 個人的には、isomorphicとspaの違いが明確に理解できて、良かったんだが・・・ 話が通じにくいエンジニアというのは、自分自身だった・・・とか・・・ そういや、PWA(Progressive Web Application)という単語もあったなあ・・・また今度考えるとしよう。