$30 off During Our Annual Pro Sale. View Details »

Gatsbyお試し

ponday
January 25, 2019

 Gatsbyお試し

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

ponday

January 25, 2019
Tweet

More Decks by ponday

Other Decks in Programming

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