こんにちは(๑╹ω╹๑ )
実は私...
恥ずかしながら.....
つい数ヶ月までJavascriptと言えば
- Javascript（jQuery補助程度
- jQuery（長いこと書いていた
- Node.js（ほんの少々
- Vue.js（数年前に入門一周した程度
でした😇
根っからのバックエンドエンジニアで、
LAMP構成大好きでした🥺
でもでもでもでも！！
早く技術スタック見直さないと！
特にJavascript😭
という訳で2ヶ月ほどPHP書くのをお休みしてました！
// 😪
sleep(60 * 60 * 24 * 60);
代わりにReact始めました🤝
（技術スタックが少しモダンになった気がします🙌
今では「LAMP構成愛してた？よ😘」と言わんばかりの浮気？心移り？
分かんないですが魅了されています😍
React
尊いです😌
バインディング is 神！🧝♂️
実際にバインディングは内部で実装されていると思うのですが、
C言語のポインタ？🤔
PHPで言うとリファレンス渡し？🤔
そんな気分です🎉
GatsbyJS
地球は青かった？(๑╹ω╹๑ )
いえいえ😅
GatsbyJSは爆速だった🙌
実は以前からGatsbyJSで実装されている爆速SPAがとても魅力的で仕方有りませんでした😊
※GatsbyJSを始めてまだ数日程なので、誤った認識があるかもしれないです🙏
GatsbyJSの特徴
わくわくしながらLighthouseやGTmetrixで計測できる！
画面サイズ毎に画像を書き出している
ビルド後のファイル群を直接触ることはないですが、
画面幅毎に最適化されたサイズの画像を書き出していました！
Data URLスキームの画像も書き出している
深い仕様までは分かっていないのですが、
画像によってはData URLスキームなインラインで出力されている画像も多く見受けられました！
基本的にMinify
ビルド後に出力されたindex.htmlファイルを見ると確認できるのですが、
基本的には何もかもMinifyされていました😮
- CSSはstyleタグを用いたインライン化
- Javascriptは別ファイルでMify化
凄いです！！！！
gatsby-config.js
Non WebPack構成でもビルド出来る！🎉
GatsbyJSの設定ファイル（gatsby-config.js）であんなこと？やこんなこと？が出来ます😌
他にも！
gatsby-plugin-alias-importsというプラグイン重宝しています！
{
resolve: `gatsby-plugin-alias-imports`,
options: {
alias: {
'@components': 'src/components',
'@images': 'src/images',
'@styles': 'src/styles',
'@stores': 'src/stores',
},
extensions: ['js'],
},
},
上記のような設定のみで、
import main from "../../../src/components/main/";
のような記述も、
import main from "@components/main/";
のように実装できます！
※ gatsby-config.jsファイルからの相対パスを予めエイリアス登録出来る
まとめ
JAMstack構成でもっとReactやGatsbyJSを触ってみます🤗