Gatsbyお試し

React勉強会@福岡 vol.1（2019/01/25）の発表資料2つめです。

Transcript

1. Gatsbyお試し
   React勉強会＠福岡 vol.1 / Jan 25th, 2019 ponday (@ponday_dev)
   

   View Slide

2. Profile
   - ponday (Honda, Yusuke)
   - 株式会社ベガコーポレーション エンジニア
   - Like : TypeScript / Elixir / Python etc…
   - 日曜フロントエンドエンジニア
   - 副業もやってます
   

   View Slide

3. 突然ですが
   

   View Slide

4. 福岡市、 インフルエンザ 流行ってますね
   

   View Slide

5. Gatsbyの発表がキャンセルになってしまったので
   Gatsbyの話します
   

   View Slide

6. Gatsby
   

   View Slide

7. Gatsby
   - React製の静的サイトジェネレータ
   - 豊富なプラグインによる高い拡張性
   - 組み込みでGraphQL
   - ReactのHPもGatsbyを使ってるらしい
   - ググラビリティ△
   

   View Slide

8. チュートリアルやりなおした
   

   View Slide

9. 触ってみた感想
   - （標準から外れないかぎり）簡単
   - ルーティングの面倒を見なくて良いのはすごく楽
   - JSファイル名 ＝ URL
   - コンポーネント部分は普通のReact
   - 普通のReactなので結構好き勝手やれる
   - Reactのバージョンを上げてしまえばHooksも動いた
   

   View Slide

10. 気になった点
    - Markdown配信までが意外と面倒
    - そもそもチュートリアルがMarkdown配信するまでの道のり
    - まだ日本語情報少ない（古いバージョンとか）
    - プラグインの選択が重要になりそう
    - すごい数ある
    - 手作業でもやれるけど、手数がまったく違う
    

    View Slide

11. おまけ
    

    View Slide

12. 無意識でTypeScript用テンプレート作ってた
    

    View Slide

13. TypeScript化の手順
    - gatsby-plugin-typescriptを入れる
    - gatsby-config.jsでプラグインを読み込む
    - TypeScript関連のモジュールを入れる
    - @types/{node,react,react-dom}
    - typescript
    - tsconfig.jsonを書く
    

    View Slide

14. これだけ
    

    View Slide

15. 動くの確認用にまたチュートリアルやった
    

    View Slide

16. これでGatsbyもTypeScriptで作れる！！
    

    View Slide

17. だけど......
    

    View Slide

18. View Slide

19. Thank you !!
    

    View Slide