• logo
  • hiokiryuji.com
  • Introduction
  • Gatsby.jsでブログ作ってみた


    3

    2019/03/26 18:05:04

    create-gatsbyjs-blog


    プログラミング NodeJS GraphQL





    前回の更新から

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




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

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



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

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


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


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

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

    Gatsby.jsはおすすめです!











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

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


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

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

    でも、気になるじゃないですか、内部がどうなっているのかって。


    だから、WordPressもEC2上で自分で、組み立ててみたりしたんですが、

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



    WordPressですが、Editorや、データベースなどがくっついてしまっていて、分離されていないので、

    それぞれで管理しずらいということがありました。



    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などでは、


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


    全部説明するのは、流石に長いので、

    興味がある人は、全てググってください。理解が深まるはずです。


    また、Eurekaさんのブログに書いてあるですが、Gatsby.jsは内部でReduxを使って状態管理しているみたいです。


    とっても面白いですね!


    まだまだ、自分もGatsby.js勉強中なので、
    これからもっと深いところまで学習を進めよう
    と思います。







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

    ReactやGraphQLを採用していることもあって、これから、
    ユースケースが増えていく
    でしょう。


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



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

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


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

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


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


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




    Profile
    avator imagetwitter-icongithub-icon
    統計とデータサイエンスが好きなエンジニア。
    クラウド、ウェブ、バックエンドのマイクロサービスが趣味です。
    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