Gatsby + Storybook + Figma で”いい感じ”の環境を作れないか模索する。
hanetsuki参考になりそうなページを集めてきた
hanetsukiGatsbyJS環境構築
npm init gatsby -ts
こういう機会がないと、公式のstarterって見ないから見に行ったら、最近はgatsby-cliじゃなくてnpm initでやるのを促してたんだね。知らんかった
In the prompts, select TypeScript as your preferred language. You can also pass a ts flag to the above command to skip that question and use TypeScript:
Copycopy code to clipboard
npm init gatsby -ts
とあったけど、結局tsかjsか聞かれた...
オプションに効果はあったんだろうか....？
hanetsuki作成された環境のディレクトリ、結構好み。
gatsby-config.tsって使えるようになってたんだ、知らなかった。
いつも、gatsby-*系のファイルは.jsで作っていたから発見。
他のファイルはどうなんだろう？また、おいおい調べてみるとしよう。
ちなみに環境作成時の問答には下記のように答えた
questions:
What would you like to call your site?
✔ · storybook-figma-environment-gatsby
What would you like to name the folder where your site will be created?
✔ atelier/ storybook-figma-environment-gatsby
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· Sass
✔ Would you like to install additional features with other plugins?No items were selected
Thanks! Here's what we'll now do:
🛠 Create a new Gatsby site in the folder storybook-figma-environment-gatsby
🎨 Get you set up to use Sass for styling your site
✔ Shall we do this? (Y/n) · Yes
✔ Created site from template
✔ Installed Gatsby
✔ Installed plugins
✔ Created site in storybook-figma-environment-gatsby
🔌 Setting-up plugins...
info Adding gatsby-plugin-sass
info Installed gatsby-plugin-sass in gatsby-config
success Adding gatsby-plugin-sass to gatsby-config - 0.074s
🎉 Your new Gatsby site has been successfully created
Storybookの導入
ひとまずgatsby公式のdocに従っていこうか
npx sb init --builder webpack5
Additional configuration is required to allow Gatsby’s components to be manually tested with Storybook. If you want to learn more about Storybook’s configuration, continue reading. If you wish to streamline the process, jump to the add-on section below.
曰く、よしなに進むならアドオンを使えって話らしいので利用していく。