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

Blitz.jsの紹介

99196b3824f4fa6188e9d1ef48603761?s=47 nitaking
November 18, 2020
410

 Blitz.jsの紹介

フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15

https://icare.connpass.com/event/192817/

※GIF多用しているんですがPDF化に伴い死んでおります

99196b3824f4fa6188e9d1ef48603761?s=128

nitaking

November 18, 2020
Tweet

Transcript

  1. @nitaking Blitz.jsͷ঺հ 2020-11-18

  2. @nitaking Satoshi Nitawaki airCloset, Inc. Blitz.js L1 Maintainer Skills: React

    Native, React, Node.js, Flutter, etc… Twitter: @nitaking_ Github: @nitaking
  3. @nitaking Blitz.jsͱ͸ʁ • RailsΠϯεύΠΞ • ϑϧελοΫReactϑϨʔϜϫʔΫ • Rails͕࣮ݱͨ͠ޮ཰తͳ։ൃମݧΛReact΁

  4. @nitaking ⚡Railsͱ͍͑͹CLIʢʁʣ

  5. @nitaking RailsͱࣅͯΔͱ͜ΖɿCLI • rails new • rails server • rails

    generate • rails console • rails dbconsole • rails db • rails test etc… • blitz new • blitz start • blitz generate • blitz console • blitz db • blitz test etc…
  6. @nitaking ⚡ ࠓճ͸ʮBlitz.jsͬͯͲΜͳ͜ͱͰ͖ΔͷʁʯΛ ɹ CLIΛ঺հ͓ͭͭ͠఻͑Ͱ͖Ε͹ͱʂ

  7. @nitaking ⚡ Blitz CLIΛ঺հ • blitz new • blitz start

    • blitz generate • blitz db • blitz console • blitz install
  8. @nitaking Introduction CLI • blitzΛ Global Install

  9. @nitaking blitz new • projectͷ࡞੒

  10. @nitaking blitz new • FormϥΠϒϥϦΛબ΂·͢ • React Final Form •

    React Hook Form • Formik • બ୒ͨ͠ϥΠϒϥϦͰFormͷίʔυ͕ࣗಈੜ੒͞Ε·͢
  11. @nitaking blitz new • File͕ੜ੒͞Ε·͢ɻ • app/ • db/

  12. @nitaking blitz new • app/ • APIɺWEB૚ • db/ •

    migrationϑΝΠϧ
  13. @nitaking blitz new • app/ • APIɺWEB૚ • WEBͷ࢓૊Έ͸Next.jsͷ΋ͷ •

    db/ • migrationϑΝΠϧ • Migrationͷ࢓૊Έ͸Prismaͷ΋ͷ
  14. @nitaking blitz start • WEB Server͕ىಈ

  15. @nitaking blitz generate [type] [model] • ࣗಈੜ੒ίϚϯυ • ੜ੒͞ΕΔ΋ͷ •

    Model • Query • Mutation • Page
  16. @nitaking • Model • PrismaͷORMͷmodel • ϞσϧఆٛͱϚΠάϨʔγϣϯϑΝΠϧͷ࡞੒ • db/schema.prisma Λߋ৽

    blitz generate [type] [model]
  17. @nitaking • Model • blitz generate model project name:string blitz

    generate [type] [model]
  18. @nitaking • Page • tsxϑΝΠϧͷੜ੒ • app/[model]/pages/ • index.tsx •

    new.tsx • [modelId].tsx • [modelId]/edit.tsx • CRUDͷϖʔδ͕Ͱ͖ͯ·͢ blitz generate [type] [model]
  19. @nitaking • Query / Mutation • ΨοπϦPrismaͷݴ༿Ͱ͢ɻɻ • GraphQL͔Β೿ੜͨ͠PrismaΛ࢖༻͍ͯ͠ΔӨڹͰ GraphQLͷ֓೦͕Blitzʹʹ͡Έग़ͯ·͢ɻ

    blitz generate [type] [model]
  20. @nitaking • Query / Mutation blitz generate [type] [model]

  21. @nitaking • Query / Mutation • blitz generate crud project

    blitz generate [type] [model]
  22. @nitaking blitz db • blitz db migrate • blitz db

    studio • blitz db seed
  23. @nitaking blitz db migrate • db/schema.prisma ͷ಺༰ͱ Ұக͢ΔΑ͏ʹςʔϒϧͱྻΛߋ৽ɻ • blitz

    generate ͷ͋ͱɺ blitz db migrate Λୟ͘͜ͱͰ࣮ࡍʹ൓ө͞Ε·͢ɻ
  24. @nitaking blitz db studio • GUIΤσΟλʔ্ཱ͕͕ͪΓ·͢ɻ

  25. @nitaking blitz db studio • ⚡ModelͰrelationΛఆٛࡁΈσʔλͷमਖ਼͕ಛʹ؆୯ʂ

  26. @nitaking blitz db seed • db/seeds.ts ʹఆٛ͞Εͨ export default functionΛ࣮ߦͯ͠σʔλΛ௥Ճ͠·͢ɻ

    • SeedϑΝΠϧࣗମ͸खॻ͖Ͱ͢ɻ
  27. @nitaking blitz console • REPL ͱݴΘΕΔର࿩ܕͷ࣮ߦ؀ڥ • ⚡CLI্ͰίʔυΛ࣮ࡍʹಈ͔͠ͳ͕Β֬ೝ͕ՄೳͰ͢ʂ

  28. @nitaking blitz console • ⚡Modelૢ࡞ͷ࣮ߦ΍ɾɾɾ

  29. @nitaking blitz console • ⚡QueryɺMutationͷ࣮ߦ΋Ͱ͖·͢ʂ

  30. @nitaking blitz install • Recipesͱݺ͹ΕΔػೳ • pluginͷΑ͏ʹThird partyͷίʔυΛಋೖͰ͖·͢ɻ • ࣗ෼ಠࣗͷRecipe΋࡞੒Ͱ͖·͢ɻ

  31. @nitaking blitz install • blitz install Ͱ͖Δ΋ͷʢ11/18ݱࡏʣ • tailwind •

    emotion • material-ui • base-web • render
  32. @nitaking Blitz CLIͰշదͳ։ൃΛ

  33. @nitaking Let’s try blitz new !!!

  34. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ⚡