始めに
Gatsby Coffee Shop Website の動画に従って作業を行い、Gatsby について学びます。 数ヵ月後に自分で読み直したときに思い出せるようにまとめていきたいと思います。
開発環境
- Mac: 10.15
- Node: v10.15.3
- Visual Studio: 1.39.2
下準備
https://www.gatsbyjs.org/docs/quick-start に従い Gastby をインストール
Visual Studio Code 環境構築
Extension のインストール
動画で解説されている Extension は上記のものですが、チュートリアルを進めていく上で非常に使い勝手がよいものばかりです。
- indent-rainbow：インデント毎に色が変わるのがすごい。インデントズレなどが一発で見分けられるのでスゴイ良き！！←Xcode にも同様のプラグインあったらぜひ入れたい。作れるなら作りたい。
- ES7 Ract … : rcc などを打つと React の Component のひな型が作成されるのが非常に生産性をあげそう。← 逆に文法習得ができなさそうで別途フルスクラッチでも学習はしておきたいところ
- Prettier： ファイル保存時に良しなにフォーマットを書けてくれるのですばらしい。←SwiftFormat でも同様のことができるのかな。
settings.json
settings.json を以下のように編集
{
"editor.tabSize": 1,
"files.autoSave": "off",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.minimap.enabled": false,
"highlight-matching-tag.styles": {
"opening": {
"left": {
"custom": {
"borderWidth": "0 0 0 3px",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px"
}
},
"right": {
"custom": {
"borderWidth": "0 3px 0 0",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px"
}
},
}
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"javascript": "html"
},
"terminal.integrated.fontSize": 12
}ひな型 PJ 作成
テンプレート DL
gatsby new coffeeShopデプロイ
$ gatsby develop
success open and validate gatsby-configs - 0.078s
success load plugins - 1.554s
success onPreInit - 0.005s
success initialize cache - 0.022s
success copy gatsby files - 0.138s
success onPreBootstrap - 0.022s
⠙ source and transform nodes
ERROR
UNHANDLED REJECTION fsevents.watch is not a function
TypeError: fsevents.watch is not a function
- fsevents-handler.js:72 createFSEventsInstance
[coffee]/[chokidar]/lib/fsevents-handler.js:72:25
- fsevents-handler.js:127 setFSEventsListener
[coffee]/[chokidar]/lib/fsevents-handler.js:127:16
- fsevents-handler.js:324 FsEventsHandler._watchWithFsEvents
[coffee]/[chokidar]/lib/fsevents-handler.js:324:18
- fsevents-handler.js:404 FsEventsHandler.initWatch
[coffee]/[chokidar]/lib/fsevents-handler.js:404:23
- fsevents-handler.js:495 FsEventsHandler._addToFsEvents
[coffee]/[chokidar]/lib/fsevents-handler.js:495:12
- next_tick.js:68 process._tickCallback
internal/process/next_tick.js:68:7
ERROR
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in StoreStateProvider
in App
⠙ source and transform nodes自分の環境では、上記のようなエラーが発生しました。
core-js をアップデートすることで解決しました。
$ yarn add core-js@latest3.3.4まとめ
環境構築だけでも Xcode にこのプラグインないのかな？とかいろいろフィードバックをもらえた感じ。一つの言語を極めたいと思ったときに、遠回りのようでほかの開発環境を勉強するのが遠回りのようで近道な気がしました。ちょっとテンションがあがりました。 Gatsby で自分のブログをフルスクラッチできれば良いなと思います。