Gatsby.jsでブログ作ってみた


3

2019/03/26 18:05:04

create-gatsbyjs-blog


プログラミング NodeJS GraphQL







前回の更新から

・結婚式の準備
・転職活動
・新しい働き先での始めの準備



をしていたので、
ブログ更新できません
でした。

楽しみにしていた人は申し訳ないです!



今回は、Gatsby.jsというReactやGraphQLといったモダンなフロンドエンドの技術を

たくさん盛り込んだフレームワークを使って、ブログを作ってみました。


なので、作成過程での話を書きたいと思います!!!


これから、ブログを作ってみたいなというなという人や、

ReactやGraphQLといった
フロントの最新技術
を学習してみたいという人は

Gatsby.jsはおすすめです!






Why do we employ Gatsby.js?







前回のブログは、著名CMS(Content Mangement System)、Wordpressによって作られていました。

ですが、マイクロサービスオタクの自分にとっては、
やっぱり1から作りたかった
んですよ。



Wordpressは今は、プログミングの知識がなくても、ボタンを押せば、作れます。

これは素晴らしいことですね。



WordPressも普通に使いますが、

自分的には、色々と
技術的に物足りなかった
のです。




Gatsby.jsの場合、データベース(データソース)、Editorも分離されているのて、
自由は高いです。

これはエンジニアには嬉しいことですね。


当ブログの場合、データソースとしてAWSのAppSyncを使用しているので、
DBはDynamoDB
です。

個人的にDynamoDBはかなり使いこなしているので、


こうやって色々なサービスが使えるのはとても嬉しい訳
ですよ。



また、各サービスが分離されていることで、

Kubernetesのようにサービス単位でのリソース(人間の場合、技術スタック、時間など)の


割り当てが効率よくできるという側面もあります。



また、WordPressと違って、Gatsby.jsは静的サイトジェネレーターなので、

デプロイするときは静的ファイルをアップロードします。



WordpPressのようにアクセスする際にデータベースから記事のデータを取ってくるみたいな

構造にはなっていないので、
超高速
です。




静的なサイトですので、S3、Netlify、Heroku、Firebaseなどにホスティングしたあとに、

最終的にはGoogle Cloud CDN、CloudFront、CloudFlareのような、
CDNを設置すれば良い
というわけです。






自分が、Gatsby.jsに魅力を感じたのが、使用されている技術です。

React、GraphQLが採用
されています。


個人的にReactはしばらく使っていて、いくつか作品もあるので、

Reactで書けるのはとても管理しやすいなと感じました。



ちなみに、Reactを学習したいという人は、

とか、

また最近はも対応したみたいなので


やってみると、みるみる
その魅力にハマっていく
ことでしょう。


比較的に息の長い技術なので、学習するしてみるのはおすすめです。



GraphQLですが、従来のRESTfulの代わるAPIのアーキテクチャとして近年採用事例が増えてきています。

DBを操作する場合、GraphQLを使って、記述していくとどんなDBを使っていても

簡単なクエリ言語で管理できるので


使いがってがとても良い
です。



従来のRESTfulだとたくさん(すぎる)エンドポイントを
作って管理しなければならず辛いもの
がありましたが、
GraphQLのエンドポイントは1つにまとめられていてQueryを発行することで、よりデータを操作できます。


GraphQLについてもが超わかりやすいので、コンセプトを理解する際はおすすめです。



ちなみに当ブログでは、GraphQLの外部エンドポイントとして、AWS AppSyncを採用しています。

AppSyncを使えば、
気軽にGraphQLの使用を開始
できるので、こちらもおすすめです。








普通に読んでいけば、
とても親切に書かれている
ので、サクサクと進めるはずです。





instagramをもじったGatsbygramなど、ここのレポジトリを参考にするだけ、開発速度は12倍です。





実は、この方にGatsby.jsの存在を教えていただいたので、今回とても参考にさせていただきました。
本当にありがとうございました。






Gatsby.jsの仕組みがどうなっているか、公式でわかりにくいところを補強できました。Eurokaさん、ありがとうございました。








から学んだのですが、Gatsby.jsではビルドが実行されるときに

呼び出す関数の順序があります。

開発を進める上、この
順序を覚えておいて損はない
と思います。


・Bootstrap
・sourceNodes
・onCreateNode
・setFieldsOnGraphQLNodeType
・resolvableExtensions
・onCreateLayout
・createLayouts
・createPages
・onCreatePage
・onCreateNode
・createPagesStatefully
・onPreExtractQueries
・setFieldsOnGraphQLNodeType
・preprocessSource
・onPostBootstrap
・onPreBuild
・modifyBabelrc
・modifyWebpackConfig
・onPostBuild



始めのsourceNodesはGatsbyJSで使用するサイトで使用するデータを取得してくる部分のことです。



まず、Gatsby.jsはデータを取ってくることから始めます。

ここで、当ブログの場合は
AppSyncからデータを持ってくる
わけです。



Nodeは、Gatsby.jsにおいては使用されるデータの集合です。

なので、次のOnCreateNodeは


Transform the new node here and create a new node or
create a new node field.



と公式にある通り、
取得したデータから新しいNodeを作ったり
、変更したり、Nodeのフィールドを加えたりするところになります。


取得したデータから、html parserや、正規表現などで抜き取って新しいフィールドを作成する

ときなどはここで処理を書くように設計されています。


ちなみに、フィールドとはtableにおける新しいカラムです。


取ってきたhtmlから、

サムネイルの画像のuriを取り出したり、

タイトルを取り出したり、

本文の
抜粋部分を取り出したり
する際に使えます。


他の関数も名前のごとくの役割を持っていて、例えばcreatePageなどでは、


持ってきたデータを使って、実際にページを作成します。



GatsbyJSは、日本だとまだまだ流行っていな感がありますが、

ReactやGraphQLというモダンな技術を採用していたり、PWAに対応していることもあって、これから、
ユースケースが増えていく
でしょう。


自分は、Gatsby.jsを使って開発したいので、お仕事欲しいくらいです笑


WordPressや、Contentful、Medium、Noteなど、既存のメディアを持っている人も、フロントエンドだけ、


Reactで書き換えたいという場合も
とっても簡単に移行
できるので、超オススメです!


これから、Gatsby.jsにも大いに貢献できたらなと思っています。


なので、source系のプラグイン等を作成予定です。





また、
サイトも自分の実験場
として色々機能拡張していきます。



度々、このブログで、アウトプットしていこうと思っているので、2019年もよろしくお願いします。


PROFILE
avator imagetwitter-icongithub-icon
統計とデータサイエンスが好きなエンジニア。
クラウド、ウェブ、バックエンドのマイクロサービスが趣味です。
node image /post/review-book-without-travel-i-die
node image https://note.mu/arthurlawrence/n/n142232ac1f06
node image /post/make-you-motivated-to-be-a-invididual-developer
node image /post/my-twitter-highlight
node image /post/lets-get-meditated
node image https://speakerdeck.com/lyuji282/rdeshi-merusisutemutoredo
node image /post/create-gatsbyjs-blog
node image https://medium.com/@ryujihioki/unknown-juggling-benefits-on-a-daily-basis-94b2853edcc6
node image /post/what-is-handflute-magical-whistle-just-with-hands