Blitz.jsの紹介

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

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

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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ⚡