そのwebシステムのフレームワークは、何を使っているの？と聞かれると、「Vanilla（バニラ）フレームワークです」と答えるようにしている、ユゲタです。
vanillaフレームワークというのは、
vanilla.jsというJavascriptライブラリから持ってきているんですが、
このライブラリは、世の中のどのjavascriptライブラリよりも、「早くて」、「軽くて」、「Javascript以外の学習コストが不要で」、「世の中でJavascriptで実現できることは全て実装することができる」
という夢のようなライブラリなのだそうです。
そして、このvanilla.jsのサイトから本体のソースをダウンロードすると、0kbのファイルがダウンロードできるのが確認できます。
要するにこれって、何を隠そう、Javascriptで書こう！というコンセプトのユニークライブラリーなんですね。
ということで、最近世の中で、様々なフレームワークやライブラリが溢れてきて、それぞれ独自の書き方や、手法を用いて、まあまあな学習コストを有してしまい、
その影響かどうかわからないけど、ネイティブ言語をよく知らないというエンジニアが増えてきていることから、プログラミングの本末転倒現象が起きています。
Javascriptで言うところの、「jQueryが無ければ、Javascriptでは、webサイトが構築できない」というヤツですね。
本末転倒ですね〜。
これで「javascriptができます」といって、開発現場に入ったとしたら、どんな結末を迎えるのでしょうか？
そんな、vanilla.jsからのvanillaフレームワークというのを、意識しつつ、
スピードが速いという、ベンチ結果が数多くネットに掲載されているnodejsベースのフレームワークを作ってみたくなり、
今回はその仕様設計を簡単にですが、やってみたいと思います。
nodejsベース
これまで作ったフレームワークは、phpベースが基本で、内部機能として、いろいろなjavascriptを埋め込んでいたんですが、
今回は、スピードの観点と、Reactなどの、Nodejs基盤のフレームワークが、SEO効果も高いということで、
Nodejsベースのフレームワークを作って、SPAなどへの対応も柔軟にできるフレームワークを作ってみたいと思います。
単純に、会社ページをリプレイスしてみて、Googleの
Page Speed Insightの計測や、
Search Consoleにおける、各種SEO結果などをビフォーアフターで比較してみて、
効果を検証してみたいと思います。
ということで、フレームワークを作った後で、効果が「ある、なし」で判定するまでを、このプロジェクトのゴールとして考えたいと思います。
サーバーサイドレンダリング
JSフレームワークで言われる「サーバーサイドレンダリング」って、一体何？と思ったら、PHPなどサーバーサイドプログラムは、基本的にサーバーサイドレンダリングであると考えると良いでしょう。
Javascriptだけが特殊で、webページを見ている人のブラウザを動的にレンダリングさせることができるJavascriptは、基本的に「クライアントサイドレンダリング」という方式で動作します。
でも、Nodejsはサーバーで実行できるので、サーバー側で、データベースなどから必要なデータを取得した後で、サーバー側でHTML構成を作って、それを出力することで、サーバーサイドレンダリングを実現します。
もちろん、画像読み込みや、読み込み速度の遅いAPIなどを、遅延ロード（クライアントレンダリング）させることで、よりページの読み込み速度によるストレスを軽減させることはできますが、
基本ページ読み込みはサーバーサードレンダリングにすることで、SEOにも効果が出るという風に言われているようなので、今回はこの辺にこだわってフレームワークを作ってみたいと思います。
こんな機能が必要
PHPなどでフレームワークを作った経験から、こうしたWEBページを作る時に、いかに効率的な構造体を持たせられるかが、ページ更新や安定運用につながると考えられます。
ReactやAngularなどのJSフレームワークを触ってみた所、Javascriptと少しかけ離れたjsxやその他独自仕様の言語にも近い機能を覚える学習コストが極めて高いというデメリットがあります。
HTMLを書きたいだけなのに、わざわざ違う言語で書いて、レンダリング結果が想定外になってしまうトラブルも、何度か見てきました。
ということで、HTML,CSS,Javascriptは、ネイティブ言語を基本的にそのまま採用させてもらい、
組み込み機能として、特殊タグを設ける方式にしたいと思います。
組み込み機能ってどういう物が必要かと言うと、
1. ページ毎にタイトルタグの記述を帰るための、文字列を読み込む機能や
2. サーバーのconfig設定として用意されたデータの呼び出し
3. URLのクエリ情報をHTMLに反映させる機能
4. リスト表示や、ガジェット組み込みのように使える、HTMLファイルに別のHTMLファイルをincludeできる機能
5. 別サーバーの情報をURLで呼び出してincludeできる機能
とりあえず、PHPフレームワークの時に使っていた機能ではこのぐらいを設けていたので、これらは実装したいと考えられます。
最後に
とにかく、これまでのフレームワークにない、サーバーサイドのポーリング通信や、ユーザー同士の相互通信などの機能を持たせることができるはずなので、
チャット機能や、リアルタイム通信ゲームなどの機能も持たせることができるようになるはずです。
なんだか、そう考えると、ワクワクしてきましたね。
こういうフレームワークを作ることで、現状のSEOへの最新対応もできるし、最新フレームワークの良いところだけを持ってきて、
独自仕様にすることで、既存フレームワークのもどかしいさや、開発スピード、挙動スピードなどにも、影響がでると思います。
何より、自分にとっての知見が貯まるのが、とてもいい学習効果があると思うので、できれば、学習者の人たちには、オススメしたいんですが、
なかなかこの思考になる人も少ないようなので、興味のある人は是非情報のやり取りをしてください。
ということで、このフレームワーク、出来上がったらまたこのブログでご紹介したいと思います。
お楽しみに！！
