こんにちはhiro08です。
tmuxで開発していると、自分の開発体制がテンプレート化してくると思います。しかし、ターミナルを立ち上げて、1からtmuxで開発環境を構築するのは大変ですよね。
そこで、Shell Scriptでtmuxの開発環境を自動化すると便利です。例えば、セッションを自動で作成したり、ウィンドウを自動で分割できます。
こちらがコマンドを入力して、一発で開発環境を整えてる画像です。非常に快適になりました。
続きを読む
こんにちはかみむらです。
GatsbyJSで開発していたところ、Developer Toolsで大量のwarningがでていることに気づきました。色々調べてみたところ、GatsbyJSのLinkの書き方に問題があったみたいなので、対処方法をメモしておきます。
toで指定するリンクの前には必ず/をいれる。下記のコードが書き方の例です。これでwarningが解消されました。
<Link to={`/${node.slug}`}>{node.title}</Link>
こんにちはかみむらです。
GatsbyJSではデフォルトで、source mapが有効化しています。これはステージング環境では問題ないですが、本番環境でコードが露呈してしまっているのはあまり良くありません。なので、特別な要件がない限り無効化した方がいいです。
ちなみにcreate-react-appでもデフォルトでsource mapが有効化してるので、無効化する必要があります。
こんにちはhiro08です。
先日GatsbyJSのブログで、Incremental Buildsのリリースがアナウンスされました。これはコンテンツに変更があった場合、変更部分のみを再ビルドする仕組みです。今後のJamstack/静的サイト制作を劇的に変える非常に強力な機能です。
補足 現時点ではGatsby CloudのProfessionalプランで使える機能です。まだまだ試用機能といった感じです。
いままでのGatsbyJSには課題がありました。それは、変更があった場合すべてのページを再ビルドしてしまうことです。少ないページ数の場合あまり影響ないですが、数千から数万ページ以上の大規模な静的サイトでは、
などの課題がありました。
そこで、今回リリースされたIncremental Buildsで、変更ページのみを再ビルドすることができるようになります。なので、ページ数の多い大規模な静的サイトで上記の課題を解決することができます。
実際にどれくらいビルド時間が変わるのか、GatsbyJSのブログにはこう書かれています。
bringing you up to 60x faster builds for Gatsby sites compared to other solutions. Now, when you make a data change in a CMS, the Gatsby Cloud Incremental Builds feature will rebuild only what’s necessary—giving you up to 1000x faster builds. That is an average build time of < 10 seconds!
他のソリューションと比較して、Gatsbyサイトのビルドが最大で60倍高速になります。これで、CMSのデータを変更すると、Gatsby CloudのIncremental Buildsによって、必要な部分が再ビルドされ、最大で1000倍高速なビルドが可能になります。これは平均ビルド時間10秒未満です!
What is Gatsby Incremental Builds? | Gatsbyから引用
こちらはブログからの引用です。実際に数字で表すとIncremental Buildsのインパクトが強いと思います。実際に一回のビルド時間が10秒未満になるとしたら、WordPressなどのサーバー依存のWebサイトと遜色がなくなりますね。
しかし、現時点ではGataby Cloudのパブリックベータ版の機能です。なので、今回はGatsby CloudでCMSを連携して、Incremental Buildsを実際に体感してみましょう。
それでは、実際にIncremental Buildsを試してみましょう。今回はGatsby CloudでContentfulとの連携を自動構築します。そして、Contentfulの更新をフックにビルドを走らせ、Incremental Buildsでどのくらい時間が短縮されたか確認してみましょう。
Gatsby Cloudのサイトはこちらです。あらかじめアカウントを作成してください。
また、Contentfulのアカウントも作成してください。
www.contentful.com
Gatsby Cloudにログイン後、Create new siteをクリックします。
プロジェクトを一から作成するので、左のI don't have a Gatsby site yetを選択。
そして、スターターにBlog with Contentfulを選択してください。
リポジトリ名を入力してください。こちらは実際にGitHubのリポジトリ名になります。
そして、Contentfulの認証をします。
ビルドに成功すると、URLが発行されます。
Incremental Buildsの有効有無は、Site Settings > Buildsの設定でEnable incremental buildsにチェックが入ってることで確認できます。
Contentfulの更新をフックにしてGatsby Cloudでビルドを走らせることができます。試してみましょう。
Contentfulのダッシュボードから左上のドロワーメニューを開くと、スペースが自動で作成されています。
先ほど作成したリポジトリ名と同じスペースを選択して、Conetentから記事の内容を変えてみましょう。そしてPublishします。
するとビルドが始まります。Via Contentfulからわかるように、更新をフックにしてビルドされています。そして、INCREMENTALのタグも確認できます。これはIncremental Buildsで実行されています。最初のビルドと差分を確認してみましょう。最初のビルドが1:04(1分4秒)に対して、2回目のIncremental Buildsでは0:05(5秒)に短縮されています。ビルド時間が非常に短縮されて驚きました。
Incremental Buildsは非常に強力で、今後の静的サイトに影響を与える機能です。また、Next.jsでもIncremental Static Generationに関するディスカッションが上がっています。今後リリースされる予定です。
github.com
今後のJamstack/静的サイトの動向に注目です!!
にんにちはhiro08です。ブログメンタリングも終わり、少しほっとした気持ちが出てしまいあまりブログを更新出来ませんでした。4月からは心機一転頑張ろうと思います。
今月はいくつか案件だったり教材の作成などで忙しくなりそうです。ですが、忙しいを理由にブログを書かないのは言い訳です。どんなに忙しくても、隙間時間を見つけてブログを書いていきます。