ジャバ・ザ・ハットリ

ベルリンのスタートアップで働くソフトウェアエンジニア

Gatsbyは今、最高にイケてるエンジニア向けブログ。爆速、無料、フルカスタマイズでもう普通のブログには戻れない

2019-01-13ブログ

Loading...

現在、最高にイケてるエンジニア向けブログは間違いなくGatsby(キャッツビー)であると断言する。 Gatsbyにはじめて触れた日に「こいつはマジでスゲー」となって即決で自分のブログをGatsbyに移行することにした。で、今見ていただいてるこのブログがGatsbyというわけです。

image

Gatsbyが最高にイケてる理由は次の3つ

  1. 爆速
  2. 無料
  3. フルカスタマイズ

もうまさに「華麗なるギャッツビー」

1 爆速


Gatsbyの速さに対するこだわりがそこら中にある。

使われている主な技術

  • React
  • GraphQL
  • PWA
  • 非同期レンダリング
  • 静的サイトホスティング

ひとつひとつは速く見せるためのちょっとした工夫かもしれないが、ここまで全部まとめて実装されるとそれはもう速い速い。

普段から私は個人開発プロジェクトをReact, Redux, GraphQL, Railsの組み合わせで作っていて一応は分かっているつもりだった。それでもGatsbyにブログを移行してメンテナンスする中で「あーこうすればもっと速くなるんだ」という学びがたくさんあった。

単なる勉強のためにGatsbyの仕様書を読むだけだったらここまでの学びは無かっただろう。やはり自分の手でコードを書きながらの学びは全然違う。 自分のブログをGatsbyにしてしまえば自然と最新の爆速技術が手に入るのだ。

おそらくこれからのウェブ系エンジニアは爆速サイトの発想を知っているか知らないかで大きな差が付く。

エンジニアが技術に対してフワっとした理解だけで終わったらそれまでだ。 例えばこんなの

  • Railsだからカンタンに速く作れる
  • Pythonだから機械学習を実装できる
  • SPAだから速い

あまりにフワっとしすぎていて反論のしようもない。でもこれらの発言から本当にその技術を理解しているのかは疑わしい。

Gatsbyにしても「**だから速い」だけの理解では自分の技術としての応用はできないだろう。

例えば「Gatsbyは静的サイトだから速い」は確かに正解だが、静的サイトジェネレーターは他にもたくさんある。なぜ他のではなくGatsbyなのかはもっと深く理解する必要がある。

この記事を読んでGatsbyのリポジトリーをほんのちょっと覗いてみるだけで、今後のあなたのエンジニア人生を変える出会いがあるかもしれませんよ、と言いたい。

image

2 無料


このブログサイト全部無料だ(ドメイン登録料は別)。ホスト先もNetlifyで月100Gまで無料。もちろんGatsbyは無料。

だいたいブログプラットホームの有料プランってあの料金に見合ったサービスを提供しているとはとても思えない。エンジニアでブログプラットホームに心の底から満足してる人ってあまり居ないと思う。

かゆい所に手が届かなくて、そのブログプラットホーム独特のやり方にしばりつけられて、しかも金を取られて「一体なんなんだ!」と言いたくなる。

ブログプラットフォームのセールストークとして「うちのサーバーは巨大です。どんなにバズってアクセス増えてもサーバーが落ちません」というのがある。 これってそもそもブログに余計なデータベースとかを付けたサーバー構成にするから落ちる心配してるだけ。Gatsbyのように静的ホストにすれば落ちないし、心配する必要がない。

だいたいブログの主な機能は「書いた内容をユーザーに読んでもらう」というとても静的な内容だ。なので静的にして爆速でSEOをチューニングした方が本来の主たる目的がより機能する。

ブロブプラットフォームの他のメリットとして独自で設計したアクセスを増やす手法がある。読者登録とかブックマーク機能とか。 で、アクセス解析を見てる人はブログのアクセスがどこから来てるか分かっているだろう。検索エンジンだ。

以上のことから私にとってブログプラットフォームにくっついている理由があんまり無いのでGatsbyの独自ドメインに移行した。

しばらく経ってアクセス数やらが、はてなブログ時代に比べてどう変化したかはまたこのブログでレポートします。

3 フルカスタマイズ


なんでも好きにカスタマイズできる。「全部オレのモノだー」ってのがスッとする。自分のブログをGitで管理して、独自ドメインで運営して、ドメインパワーも自分の努力次第になる。

ちょっとでも不満があれば自分でそこになんでも入れ込める。

今回、はてなブログから移行しようとして初めて気が付いたのがはてなブログには標準で「canonical」が指定できない。これは「おい!」となった。

しかしはてな社を責めようとは思わない。業者としてユーザーを招き入れる部分は手厚く実装して、ユーザーが出ていく部分はわざとやりにくくするのは正攻法だ。正直ウザっと思ったけど彼らだって慈善事業でブログフォーマットを提供している訳ではないんだ。

問題はあまりにそういうことに無自覚に他社のブログシステムにどっぷり浸かってしまってるユーザーにある。ある程度のキリのいいところで自前サーバーに移行するのはエンジニアとして必然的な結果だと思う。

ただ「なんでもできる=なんでもやらなければならない」となって面倒な部分もある。Gatsbyの場合はスターターキットで気に入ったデザインを選べば、そこにほぼ全ての枠組みが入っているので後は気に入らない箇所だけ変更すればいい。

今回私が主にカスタマイズしたのはSEOに関して。やはり英語圏向けのスターターキットなので日本語圏の市場には合ってない箇所があった。それでもWordPressなんかの苦痛とは比べ物にならないコードのキレイさだった。

それはひとえにReactやGraphQLといったモダンな技術を採用しているからだろう。

image

Gatsbyをおすすめしないケース


ここまでおすすめしてきたGatsbyだが、おすすめできないケースもある。それは非エンジニアの方に対して。どんなにカンタンに立ち上がると言っても基本的にGitコマンドでデプロイする必要があるし、既存ブログから記事をエクスポートしてGatsbyにインポートするのも1発でいかない箇所がちょこちょこある。エンジニアならそこは自分用にスクリプトを書けばいいのだが、それを非エンジニアの方にカンタンですよ、と言うつもりはない。

でもそのうちにボタンひとつでGatsbyブログが立ち上がるサービスがどこからか出てくると思うし、そんなのが出てきた時には非エンジニアの方もぜひ使ってみてください。

Gatsbyブログの作り方


大まかなやり方は以下の3つ

  1. お好きなスターターキットを選んでローカルへクローンする
  2. ローカルでカスタマイズ
  3. git push してNetlifyへデプロイ

ここから自分のブログデザインに合うスターターキットを選ぶ。ここに無ければもっと探すか、最小構成のを選んでゴリゴリ自分カスタマイズも可。

Gatsby Starters image

Netlifyはネットワークトラフィックが100G/月まで無料。超人気ブログを運営されている方はそれ以降課金されるのでご注意を。

もう少し具体的に作り方を書くのは別記事にする。本記事の主旨としては絶賛おすすめですよ、とただそれだけが言いたかったので。

関連記事


海外移住のQ&Aサイト シティーズ


海外移住向けのQ&Aサイトを運営しています。現在、海外にお住まいの方、これから海外移住や留学、転職をお考えの方はぜひご参加ください。 登録はもちろん無料です。

シティーズ https://www.cityz.jp/

cityz