Webサイト制作に静的サイトジェネレーターを導入してみようと思った話

クリエイティブグループの若松です。

私の所属しているグループは、フロントエンドの業務に多く携わりますが、静的サイトの作成やUIに関する動きの実装を担当することが非常に多く、逆にフロントエンドベースのWebアプリケーションの開発はあまり担当していません。jQueryは普段から使っていますが、ReactなどのJavaScriptフレームワークに触れる機会はそんなに多くないというのが現状です。

ただ、フロントエンドの制作事情の変化は非常に大きく、このままメンバーが「jQueryなら使えます」の状態のままで果たしていいものか、JavaScriptフレームワークをある程度は触れておいた方がいいのでは？・・・と思い続けてもきました。

では、JavaScriptフレームワークに触れる機会を増やすためにはどうすればいいのでしょうか？
考えた末、これら技術を使った静的サイトジェネレーターの導入をグループに促進してみようと思い至りました。

そもそも静的サイトジェネレーターとは？

その名の通り、静的サイトを効率よく作成するためのツールのことです。
MarkDownなどで書かれたテキストファイルを元に、テンプレートに当てはめる形でツール内でビルドを行い、Webページとして出力してくれます。
コンテンツを管理するという意味ではCMSと似ていますが、データベースは必要とせず、コンテンツや、テンプレート、テーマ、設定ファイルなどをテキストファイルのまま扱うのが大きく異なります。

どの静的サイトジェネレーターを導入してみるか

候補を絞り込むにあたっては、上記の「テンプレートに当てはめる形でツール内でビルドを行い」の部分でReactなどのJavaScriptフレームワークを採用しているものを条件にしました。

今のところ、候補は下の3つ。
知名度や使用されている技術、なにより「自分が使ってみたいと思えるか？」を基準に選んでいます。

① Gatsby

• Reactベース
• Progressive Web Appを生成
• Reactベースでは最も有名な模様、検索すると多くの日本語ドキュメントがヒットする

② React Static

• Reactベース
• 特徴としてSEOへの配慮が挙げられている
• 比較的最近リリースされたため、ドキュメントが少ない

③ Nuxt.js

• Vue.jsで作成したアプリケーションをサーバーサイドレンダリングするためのフレームワーク
• 静的サイトジェネレーターという機能は、このフレームワークが提供するの機能の一部っていう捉え方がいいと思われる
• ReactベースのNext.jsに触発されて作成された

どれも非常に魅力を感じています。
個人的にはVue.jsを使っているNuxt.jsに心惹かれています。

まとめ

いきなりプロジェクトに導入となると、学習コストもかかり、なかなか思うようには進まないでしょう。
単に静的なサイトを効率的に作成するだけなら、従来通りEJSなどのテンプレートエンジンを使った方が早いのも事実です。

ただ、フロントエンドの開発はしていないけどもう少しステップアップしたい！！と思っているのであれば、非常にいい機会になるのではないでしょうか。

今後、もし実際のプロジェクトで導入できた際には事例として紹介したいと思います。