Blitz.jsの紹介 - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@nitaking Satoshi Nitawaki airCloset, Inc. Blitz.js L1 Maintainer Skills: React Native, React, Node.js, Flutter, etc… Twitter: @nitaking_ Github: @nitaking

Slide 3

Slide 3 text

@nitaking Blitz.jsͱ͸ʁ • RailsΠϯεύΠΞ • ϑϧελοΫReactϑϨʔϜϫʔΫ • Rails͕࣮ݱͨ͠ޮ཰తͳ։ൃମݧΛReact΁

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

@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…

Slide 6

Slide 6 text

@nitaking ⚡ ࠓճ͸ʮBlitz.jsͬͯͲΜͳ͜ͱͰ͖ΔͷʁʯΛ ɹ CLIΛ঺հ͓ͭͭ͠఻͑Ͱ͖Ε͹ͱʂ

Slide 7

Slide 7 text

@nitaking ⚡ Blitz CLIΛ঺հ • blitz new • blitz start • blitz generate • blitz db • blitz console • blitz install

Slide 8

Slide 8 text

@nitaking Introduction CLI • blitzΛ Global Install

Slide 9

Slide 9 text

@nitaking blitz new • projectͷ࡞੒

Slide 10

Slide 10 text

@nitaking blitz new • FormϥΠϒϥϦΛબ΂·͢ • React Final Form • React Hook Form • Formik • બ୒ͨ͠ϥΠϒϥϦͰFormͷίʔυ͕ࣗಈੜ੒͞Ε·͢

Slide 11

Slide 11 text

@nitaking blitz new • File͕ੜ੒͞Ε·͢ɻ • app/ • db/

Slide 12

Slide 12 text

@nitaking blitz new • app/ • APIɺWEB૚ • db/ • migrationϑΝΠϧ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

@nitaking blitz start • WEB Server͕ىಈ

Slide 15

Slide 15 text

@nitaking blitz generate [type] [model] • ࣗಈੜ੒ίϚϯυ • ੜ੒͞ΕΔ΋ͷ • Model • Query • Mutation • Page

Slide 16

Slide 16 text

@nitaking • Model • PrismaͷORMͷmodel • ϞσϧఆٛͱϚΠάϨʔγϣϯϑΝΠϧͷ࡞੒ • db/schema.prisma Λߋ৽ blitz generate [type] [model]

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

@nitaking • Page • tsxϑΝΠϧͷੜ੒ • app/[model]/pages/ • index.tsx • new.tsx • [modelId].tsx • [modelId]/edit.tsx • CRUDͷϖʔδ͕Ͱ͖ͯ·͢ blitz generate [type] [model]

Slide 19

Slide 19 text

@nitaking • Query / Mutation • ΨοπϦPrismaͷݴ༿Ͱ͢ɻɻ • GraphQL͔Β೿ੜͨ͠PrismaΛ࢖༻͍ͯ͠ΔӨڹͰ GraphQLͷ֓೦͕Blitzʹʹ͡Έग़ͯ·͢ɻ blitz generate [type] [model]

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@nitaking • Query / Mutation • blitz generate crud project blitz generate [type] [model]

Slide 22

Slide 22 text

@nitaking blitz db • blitz db migrate • blitz db studio • blitz db seed

Slide 23

Slide 23 text

@nitaking blitz db migrate • db/schema.prisma ͷ಺༰ͱ Ұக͢ΔΑ͏ʹςʔϒϧͱྻΛߋ৽ɻ • blitz generate ͷ͋ͱɺ blitz db migrate Λୟ͘͜ͱͰ࣮ࡍʹ൓ө͞Ε·͢ɻ

Slide 24

Slide 24 text

@nitaking blitz db studio • GUIΤσΟλʔ্ཱ͕͕ͪΓ·͢ɻ

Slide 25

Slide 25 text

@nitaking blitz db studio • ⚡ModelͰrelationΛఆٛࡁΈσʔλͷमਖ਼͕ಛʹ؆୯ʂ

Slide 26

Slide 26 text

@nitaking blitz db seed • db/seeds.ts ʹఆٛ͞Εͨ export default functionΛ࣮ߦͯ͠σʔλΛ௥Ճ͠·͢ɻ • SeedϑΝΠϧࣗମ͸खॻ͖Ͱ͢ɻ

Slide 27

Slide 27 text

@nitaking blitz console • REPL ͱݴΘΕΔର࿩ܕͷ࣮ߦ؀ڥ • ⚡CLI্ͰίʔυΛ࣮ࡍʹಈ͔͠ͳ͕Β֬ೝ͕ՄೳͰ͢ʂ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

@nitaking blitz install • blitz install Ͱ͖Δ΋ͷʢ11/18ݱࡏʣ • tailwind • emotion • material-ui • base-web • render