21. GatsbyJSで作成したブログ
作品概要 #
今回進級展の製作をするにあたって、僕は授業では習っていないような新しいことに挑戦してみようと思いました。
僕はフロントエンドエンジニアを目指しているということもあり、最近話題になっていると言われているJAMstackの構成について調べ、GatsbyJSを利用して自分のブログを作成しました。
JAMstackの構成のWebサイトが話題になってきているということで、自分にとってレベルの高いことではありますが、この機会に実際にブログを制作してみて少しでも理解をしておきたいということが目的です。
プレゼンテーション動画 #
アピールポイント #
一番のアピールポイントとしては、表示されている画像がすべて最適化された状態の画像になっているということです。
Gatabyにはgatsby-imageというプラグインがあり、そのプラグインを利用することによって画像の劣化が目立たない範囲で圧縮、ファイルのサイズが小さくなるフォーマットWebPの使用、デバイスの画像サイズや解像度に応じて適切なサイズで表示してくれるといった、最適化や高速化の処理をしてくれます。
今回作成したブログの読み込み速度はすごく早いと思っています。
制作者 #
- 武藤 将紀
- フロントエンドエンジニア志望
- HTML+CSS、JavaScript、Gatsby
- アルタ賞、GrowGroup賞、ワンダーズ賞、Clap賞、アップルップル賞、メイクリー賞、アクアリング賞
制作者感想 #
今回の制作は授業では習っていないような全く新しいことに挑戦したため、全体的に理解するということが大変でした。
今回利用したGatsbyJSはReactベースということで、Reactに初めて触れるということになったので大変でした。
でも、開発サーバーを起動することだったり、GitHubにソースコードを上げたりするためのターミナルや、Webサイトを公開するためのNetlify、ブログの記事を更新していくためのContentfulなどの利用方法については理解することができました。
- 次の作品: APEX to be strong
- 前の作品: みやの書庫
コメント #
作品ならびにプレゼン動画の閲覧ありがとうございました。
さらに学生作品への評価・アドバイス、感想などコメントいただけると、今後の制作、就職活動の励みになります。よろしくお願いいたします。