Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gatsbyお試し

52604f94a6d2172df2cad5ab45189940?s=47 ponday
January 25, 2019

 Gatsbyお試し

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

52604f94a6d2172df2cad5ab45189940?s=128

ponday

January 25, 2019
Tweet

Transcript

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

  2. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like

    : TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア - 副業もやってます
  3. 突然ですが

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

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

  6. Gatsby

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

    ググラビリティ△
  8. チュートリアルやりなおした

  9. 触ってみた感想 - (標準から外れないかぎり)簡単 - ルーティングの面倒を見なくて良いのはすごく楽 - JSファイル名 = URL -

    コンポーネント部分は普通のReact - 普通のReactなので結構好き勝手やれる - Reactのバージョンを上げてしまえばHooksも動いた
  10. 気になった点 - Markdown配信までが意外と面倒 - そもそもチュートリアルがMarkdown配信するまでの道のり - まだ日本語情報少ない(古いバージョンとか) - プラグインの選択が重要になりそう -

    すごい数ある - 手作業でもやれるけど、手数がまったく違う
  11. おまけ

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

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

    typescript - tsconfig.jsonを書く
  14. これだけ

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

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

  17. だけど......

  18. None
  19. Thank you !!