おかしんどっとあいおー

ブログ育成日記 000「ブログ育成日記はじめます」

ブログ育成日記企画について

このブログは静的サイトジェネレーターの「GatsbyJS」、ヘッドレスCMSの「Contentful」、静的コンテンツのホスティングサービス「Netlify」で出来ています。

現在のブログの状態はこちら↓

スクリーンショット 2019-02-17 16.39.28

ご覧の通り2019年2月17日現在、このブログは本当に最低限の機能しかなく、デザインなんてあったもんじゃありません。このブログをもっとかっこよく育てていく過程そのものを連載したらインプットとアウトプットを繰り返せて良いんじゃないかと思い始めてみました。

ちなみにブログ名の「おかしんどっとあいおー」は「インプットとアウトプットのサイクル(I/Oサイクル)を回すブログ」という意味を込めてます。

産まれたばかりでデザインもゴミなマイブログちゃんですが、いくつか気に入っている点はあります。

それは

  1. 高速であること
  2. JAMstackであること

です。

高速であること

1つ目は「高速であること」です。Lighthouseでの結果もなかなかのものです。

スクリーンショット 2019-02-17 16.59.28

これはひとえにGatsbyJSとNetlifyのおかげです。

JAMstackであること

JAMstackとは

jamstack.orgによると

JAMstack: noun \’jam-stak’\ Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

直訳すると『クライアントサイドのJavaScript、再利用可能なAPI、および事前作成されたMarkupに基づく最新のWeb開発アーキテクチャ』です。

Why JAMstack ?

Wordpressの場合

例えば世界一利用されているCMS(コンテンツマネジメントサービス)であるWordpressの場合、細かな構成の違いはあれど、LAMP StackというWebサーバ、PHP、データベースの構成で動いています。 原初のWebサイトは各ページのHTMLを手作業でコーディングしていましたが、Wordpressの登場によってこれらがテンプレート化されたのです。Wordpressの一番の利点はコンテンツを再利用可能なコンポーネントに分割して、アセンブリを自動化していることでしょう。

LAMP

ユーザーがサイトにアクセスしてからブラウザでページが表示されるまでを簡単に説明すると、サイトの閲覧者がページを要求すると、「Webサーバがデータベースにアクセス」し、「Wordpressのテーマやプラグインのデータ、各コンテンツを引っ張ってきて」、「PHPがHTMLファイルを生成しユーザーに送信」します。

当然サイトの速度は、Webサーバが載っているマシンスペック、データベースのスペックなどに依存しますし、世界一利用されているWordpressは様々な脆弱性もはらんでおり攻撃の手法もたくさん存在しています。

Wordpressは「CMSとしては便利だが、高速化にも限界があり、攻撃にも弱い」と言えると思います。また、もう一つWordpressの利点を上げるとすると、Wordpressのプラグインやテーマなどの周辺技術が簡略化されている為、比較的「安価にデザイン面などを外注することが可能」である点だと思います。

じゃあ静的サイトジェネレーター?

HugoJekyll、などの静的サイトジェネレーターでHTMLファイルを生成し、AWS S3 + Cloudfront や Netlify を用いてホスティングする手法が考えつきます。

StaticGenerator

静的サイトジェネレーターを使ってサイトを構築し、Markdownでコンテンツを書きGithubにアップすると、CircleCIやNetlifyなどでCIが走ってHTMLが生成されるような構成がよくあるパターンです。

Webサーバは存在せずすでにHTMLは生成されている為、高速に動作しますし、攻撃対象がそもそも消えているのでセキュリティレベルも上がっています。

ただしWordpressの「CMSのとして便利」という点は消えてしまっている場合がほとんどです。コンテンツそのものがGit管理ですし、ライターには辛い構成と言えるでしょう。

JAMstackなら

例えばこのブログでは下図のような構成になっています。

JAMstack

静的サイトジェネレーターのよくある構成の場合、コンテンツそのものがソースの中にあります。 JAMstackの良いところは、CMS部分を外出しできている点です。コンテンツはソースの中には全く現れません。

Netlifyがgitからソースを引っ張ってきて「gatsby build」コマンドを実行すると、GatsbyはGraphQL APIでContentful上のコンテンツを取得してから、それぞれのページごとにHTMLを生成してくれます。

ではContentfulのコンソール画面はどのようになっているかというと、こんな感じです。

スクリーンショット 2019-02-17 18.45.24

Gitも何も必要ありません。特になんの知識もなくコンテンツを書くことに集中できますし、将来的にブログのバックエンドをNuxtなどに乗り換えたいときもコンテンツはそのまま使い回せます。 これこそが「再利用可能なAPI」と「事前作成されたMarkup」を備えたJAMstackの強みなのです。

何故GatsbyJSか

JAMstackには様々な実装例があります。もちろんJekyllやHugoを使っても似たようなことが出来るのです。

私がGatsbyJSを採用したのは以下の二点が大きな理由です。

  • React製である
  • 最初からGraphQLを用いたJAMstack志向で開発されている

React製である

私がReactを学習中であることが大きな理由です。GatsbyJSはサイトのレイアウトなどすべてReactによって開発していくことになるので、「ブログを作ること」そのものがReactの学習につながり、その過程をブログでアウトプットすることで学習効率を高めたいと考えた為GatsbyJSを選択しました。

なぜReactか

じゃあそもそもなんでReactなのか?ですが「Javascriptの将来性が高い」と考えた為です。また、Node.js, React Native, Electron, Google V8 JavaScript Engine, などのエコシステムによって、あらゆるプラットフォームの開発が出来る技術であることが魅力でした。

日本人の個人開発者が開発している「Inkdrop」というメモアプリはReactで開発されているのですが、Windows, Mac, Linux, Android, iOSとすべてのプラットフォーム向けにネイティブアプリがリリースされています。これが個人開発で可能なのはひとえに上記のエコシステムによるものでしょう。(Inkdropの開発ブログはこちら

またTypescriptの登場によって、Angular, React, Vueの技術は最終的には大規模開発にも耐えうる技術となってきています。

StackOverflowのCEO, Jeff AtwoodもThe Principle of Least Powerで以下のように述べています。

any application that can be written in JavaScript, will eventually be written in JavaScript. どんなアプリケーションもJavaScriptで開発出来る、次第にそうなるだろう。

シリコンバレー式プログラミングブートキャンプのCode Chrysalisのブログ記事「なぜ JavaScript か? - codechrysalis’s blog」にもある通り、Node.jsとV8エンジンの登場により、Chromiumベースのブラウザはもはや一種のOSと化しており、そこで動作するJavascriptは持続性のある技術になってきていると思います。

今まで色んな言語を勉強してきたのですが、なかなか身についていません。これは恐らく、「色々手を出している」ことと「アウトプット不足」が一番の原因です。

Reactなら一つで全部出来て、GatsbyJSでのブログ開発自体をアウトプットすることで「アウトプット不足」を補えると考えました。 よってこのブログは「ブログ自体が進化していく」その過程をアウトプットするブログにしたいと思います。

次回

できれば、プログラミング未経験者にも優しいコンテンツにしたいので、次回は「Node.jsのインストール」から書いていきたいと思います。

次回: ブログ育成日記 001「開発環境構築」 | おかしんどっとあいおー


okash1n

Written by okash1n