フロントエンド技術を学ぼう 2-19.静的サイトジェネレータについて学ぶ-もじゃげくらぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第29回はPart II: Learning Front-End Devから、19項のLearn Static Site Generatorsを紹介します。

静的サイトジェネレータについて学ぶの説明です。

静的サイトジェネレータについて学ぶ

静的サイトジェネレータは基本的にサーバサイドコード(ruby、php、python、nodeJSなど)によって書かれており、サーバからクライアントへ送信する静的なテキスト/データ＋テンプレートを生成します。CMSとは違い静的HTML/CSS/JavaScriptファイルを生成するツールなので、Webサーバには自分でアップロードする必要があります。

静的サイトジェネレータとCMSの違い

上記で説明した静的サイトジェネレータと比較されるのが、CMS(Contents Management System)です。CMSとはWordPressがとても有名ですが、プログラミング言語(PHPなど)とデータベース(MySQLなど)を使用し、ユーザーがURLにアクセスする度にWebページを動的に生成するアプリケーションです。どちらもWebページを作成&管理する目的は同じですが、以下の点で比較されています。

比較項目	静的サイトジェネレータ	CMS(Contents Management System)
セキュリティ対策	◯	☓
大量アクセス時の処理能力	◯	☓
Webページの表示速度	◯	☓
複数人での管理	☓	◯
カスタマイズ性	△	◯
動的機能	☓	◯
管理者にITスキルを問わない	☓	◯

セキュリティ

CMSは毎年のように新しい脆弱性が発見されています。PHP、MySQL、REST APIなど、動的にWebサイトを生成している分、攻撃者が入り込むスキがある為です。対策として、各アプリケーションを常に新しい状態にアップデートしておくことが望ましいのですが、すぐにアップデート出来ない環境であったり、最新版の脆弱性を突かれてからアップデート版が公開されるなど、イタチごっこからは逃れられません。

静的サイトジェネレータの場合、公開するWebサーバに配置するデータは静的なものだけですので、攻撃が入り込むスキはありません。

ちなみに、サーバそのものを乗っ取られてしまった場合はCMS/静的サイトジェネレータどちらを使用していても、Webサイトを改ざんされるリスクがあります。こちらのセキュリティ対策は考慮する必要があります。

WordPressを利用するのであれば、専用ホスティングのwpXレンタルサーバー、静的サイトジェネレータを使用するのであれば、オブジェクトストレージのAmazon S3を使用して、バックエンドの管理はおまかせすることも方法の一つです。

処理能力/表示速度

CMSはアクセスされる度にスクリプトが起動して、Webページを動的に組み立てます。この組み立てるまでの時間はサーバやスクリプトの性能に依りますが、一般的にアクセス->スクリプト->データベース->スクリプト->Webページ生成この挙動をします。

静的サイトジェネレータを使用した場合は、Webサーバ上にある完成されたWebページのデータを取得するだけになるので圧倒的に早いです。

同様にWebサイトに大量のアクセスが発生した場合を考えると、CMSの方が処理が多いのでキャッシュ、リバースプロキシ、冗長化、余裕を持ったサーバリソースなどを検討しておく必要があります。

複数人での管理

CMSは複数人で管理することを前提としている(ユーザーアカウントを複数作成できる)アプリケーションなので、この点は問題ありません。逆に静的サイトジェネレータはそういった機能を持ち合わせていないため、Webページを生成する元のデータを共有/管理する方法を考える必要があります。ただ、相当厳密な管理をしないと、更新したファイルを古いもので上書きされる様な危険性があります。

カスタマイズ性

カスタマイズ性を比較するならば、例えばWordPressの場合だと膨大な量のテーマテンプレートやプラグインが存在します。静的サイトジェネレータの場合はブログ特化型のJekyllはテーマがなかなか多めですが、Webサイト/ブログどちらも対応可能なHUGOでは、WordPressのテーマ数には遠く及びません。

カスタマイズを自分で行おうとする場合、HTML/CSS/JavaScriptの知識に加えて、そのアプリケーションが使用している言語(WordPressならPHP / HUGOならGo)の知識が必要となります。

動的機能

前述した通り、CMSは動的にWebページを生成します。これはPHPなどのサーバサイドスクリプトが行っているのですが、静的サイトジェネレータを使用した場合は生成された後のHTML/CSS/JavaScriptによるWebページデータを直接Webサーバに配置することになります。つまり静的サイトジェネレータでは、SNSの様にログイン機能やアカウント毎にページを生成すること、コメント欄やフォームなどの動的機能は提供できません。

しかし、一部の機能は外部のWebサービスを使用することにより、実現可能となります。たとえばFaceBookのコメント機能やGoogleフォームは自分のWebサイトに動的機能を実装することが出来ます。

ITスキル

今までの比較から、どちらも一長一短で用途によって使い分けると理想的だと感じます。しかし、ITスキルに自信がない場合はCMS、それもWordPress一択になると思います。日本語で使用、GUIで操作、情報が豊富、Microsoft Word感覚で使えるなど、最低限の使用であればHTMLが少し分かっていれば問題ないと言える程です。静的サイトジェネレータはというと、まだIT関係者以外では知名度も低いため殆どの場合、英語＆CUIで扱うことになります。

フロントエンドエンジニアとして、管理する人間のITスキルを考慮するようにしましょう。

参照元 : 2017年注目の「静的サイトジェネレーター」を３つ紹介します。