Flutter研修【MIXI 23新卒技術研修】

'MVUUFS৽ଔݚम ,VOP"ZBOB

ߨࢣɾνϡʔλʔ ٱ໺จࡊ !BZBOBLVOP ৽ଔ NJBUUPNFSDVSZ ࣾ৯͸ΩʔϚΧϨʔਪ͠ পా޾େ !ZVLJIJSPOVNBUB ೥த్ೖࣾ 'BOTUB
ࣾ৯͸େମ͍ͭ΋=d

ࣄલ४උ͸0,ʁ J04ಈ͔͍ͨ͠ਓɹ "OESPJEಈ͔͍ͨ͠ਓɹ w 9DPEFͷΠϯετʔϧ͓Αͼղౚ w Πϯετʔϧ͸"QQ4UPSFͰ͸ͳ͘EFWFMPQFSαΠτ͔Βམͱͯ͘͠Δ͜ͱΛ͓קΊ w IUUQTEFWFMPQFSBQQMFDPNEPXOMPBENPSF w
ࣄલʹ"QQMF*%͕ඞཁ w ձࣾͷϝʔϧΞυϨεͰΞΧ΢ϯτΛ࡞੒ w "OESPJE4UVEJPͷΠϯετʔϧ͓Αͼղౚ w Ұ୴ىಈ͠ͳ͍ͱ fl VUUFSEPDUPSͨ͠ͱ͖ʹ6OBCMFUPMPDBUF"OESPJE4%,ͷΤϥʔʹͳΔ

ຊ೔ͷ͓඼ॻ͖ ʙ'MVUUFSͱ͸ ʙ fl VUUFSDSFBUFίϚϯυͰΞϓϦΛ࡞ͬͯΈΑ͏ʂ ʙٳܜ ʙDSFBUF͞ΕͨΞϓϦΛݟ͍ͯ͜͏ʂ *OUSPEVDUJPO 4UBUF 5FYU'JFME
ը໘ભҠʢ/BWJHBUPSʣ ʙϥϯν ʙωοτϫʔΫ௨৴ʢIUUQ௨৴ʣ ʙνʔϜͰνϟϨϯδʂ   ɹɹɹɹ$IBU(15ͱͷνϟοτΞϓϦΛ࡞ͬͯΈΑ͏ʂ ʙΫϩʔδϯά

ݚमͷΰʔϧ

ݚमͷΰʔϧ ΞϓϦ։ൃॳΊͯͷਓ 'MVUUFSָ͍ͬͯ͠ʙʂͷؾ࣋ͪΛ࣋ͪؼͬͯʂ 'MVUUFSνϣοτσΩΔਓ ਓʹڭ͑Δ͜ͱͰཧղ౓Λ্͛Α͏ʂ Ԡ༻໰୊·ͰؤுΕʂ

'MVUUFSͱ͸

'MVUUFSͱ͸ w ϚϧνϓϥοτϑΥʔϜ։ൃ͕ՄೳͳϑϨʔϜϫʔΫ w ̓ͭͷϓϥοτϑΥʔϜ্Ͱಈ͘ΞϓϦΛ࡞ΕΔʂ w ੈքʹ͸ສਓҎ্ͷ։ൃऀͱສҎ্ͷΞϓϦ͕͋Δ w (JU)VCͷίϯτϦϏϡʔλʔ਺͸74$PEF IPNFBTTJTUBOUʹ͍࣍ͰҐʂ
w %Ϟσϧͷදࣔ΋Ͱ͖ΔΑ͏ʹʂ 'MVUUFS'PSXBSEIUUQTXXXZPVUVCFDPNXBUDI W[,2:(,"F8 %ϞσϧදࣔΛࢼͯ͠ΈΔIUUQTJUPNFUFBNCMPH fl VUUUFSTDFOFNFNP

'MVUUFSͱ͸ w (PPHMF͕ຊؾΛग़ͯ͠࡞ͬͯΔ w (PPHMFͷΞϓϦʢ(PPHMF"ET΍(PPHMF"TTJTUBOUͳͲʣͰ΋ར༻͞ΕͯΔ w ϚςϦΞϧσβΠϯͷίϯϙʔωϯτΛ"OESPJEΑΓઌʹ࣮૷ͯͨ͠Γ͢Δ w ίϯϙʔωϯτΛඪ४Ͱ༻ҙͯ͘͠ΕͯΔ͔Βॳ৺ऀͰ΋ྑ͍ײ͡ʹ࡞ΕΔʂ ίϯϙʔωϯτҰཡIUUQTNBUFSJBMJPDPNQPOFOUT

w %BSUͱ͍͏ݴޠͰ࣮૷͢Δ w (PPHMF͕+BWB4DSJQUͷ໰୊఺Λվળͨ͠୅ସݴޠͱͯ͠೥ʹ։ൃ͞Εͨ΋ͷ w %BSUͰ/VMM4BGFUZʹͳͬͨʢผϖʔδͰઆ໌ʣ w ϨϯμϦϯάΤϯδϯ΋4LJBΛ࢖ͬͯࣗલͰ࡞ΒΕ͍ͯΔͷͰ଎͍ʂ w 'MVUUFS'PSXBSEͰ৽ϨϯμϦϯάΤϯδϯͷ*NQFMMFS͕ެ։͞Εͨ
w એݴత6*Ͱॻ͘͜ͱ͕ՄೳʢผϖʔδͰઆ໌ʣ w 4UPSZCPBSEΛ࢖ͬͨ4XJGUͷίʔυΑΓ3FBDUͷํ͕ࣅͯΔ͔΋ 'MVUUFSͱ͸ 'MVUUFSͷΞʔΩςΫνϟIUUQTEPDT fl VUUFSEFWSFTPVSDFTBSDIJUFDUVSBMPWFSWJFX *NQFMMFSʹ͍ͭͯIUUQTEPDT fl VUUFSEFWQFSGJNQFMMFS EBTI܅ʹ͍ͭͯIUUQTEPDT fl VUUFSEFWEBTI

/VMM4BGFUZͬͯʁ ͲͷܕͰ΋OVMMΛ࢖ͬͯྑ͍ C͸OVMM΍ͳ͍͔ʙʂ ࣮ߦ࣌ʹOVMMͩͬͨ৔߹ ΤϥʔΛు͘ɾΞϓϦ͕མͪΔ int a = 100; int
b = null; a = 100; print(a + b); OVMMTBGFUZʹ͍ͭͯIUUQTEBSUEFWOVMMTBGFUZ

࣮ߦ࣌ʹOVMMͷΤϥʔͰ མͪΔ͜ͱ͸ͳ͘ͳΔ /VMM4BGFUZͬͯʁ جຊతʹOVMM࢖ͬͪΌμϝ ࢖͍͍ͨ࣌͸ Λ͚ͭΔ int a = 100;
int? b = null; a = 100; print(a + b); // Τϥʔ if (b != null) { print(a + b); } print(a + b!); C͕OVMMͷ࣌͸ආ͚ ͯ͘ΕΔͷͰ҆৺ OVMMTBGFUZʹ͍ͭͯIUUQTEBSUEFWOVMMTBGFUZ

label = UILabel() label.text = “Babu~” label.textColor = .black label.textAlignment
= .center view.addSubview(label) Text( “Babu~", style: TextStyle(color: Colors.black), textAlign: TextAlign.center, ), ໋ྩతʢ4XJGUʣ એݴత6*ͬͯʁ એݴతʢ%BSUʣ ϥϕϧΛ࡞Εʂ ϥϕϧͷςΩετ͸όϒʙͰ͋Εʂ ৭͸ࠇͰ͋ΕʂਅΜதدͤͰ͋Εʂ ͦͷϥϕϧΛ7JFXʹ௥Ճͤ͑ʂ

label = UILabel() label.text = “Babu~” label.textColor = .black label.textAlignment
= .center view.addSubview(label) Text( “Babu~", style: TextStyle(color: Colors.black), textAlign: TextAlign.center, ), ໋ྩతʢ4XJGUʣ એݴత6*ͬͯʁ એݴతʢ%BSUʣ զ͸όϒʙͱ͍͏ࠇ৭ͷ ਅΜதدͤςΩετͰ͋Δʂ

GMVUUFSDSFBUFίϚϯυͰ ΞϓϦΛ࡞ͬͯΈΑ͏ʂ

ΞϓϦΛ࡞ͬͯΈΑ͏ $ flutter create <<ϓϩδΣΫτͷ໊લ>> $ cd <<ϓϩδΣΫτͷ໊લ>> $ open
iOS/Runner.xcworkspace // ios ͷਓͷΈ $ flutter run "OESPJEͷਓ͸࣮ػબ୒΋͘͠͸ "OESPJEελδΦ্ཱͪ͛ͯΤϛϡબ୒ ϓϩδΣΫτ໊͸ΞϯμόʔͰܨ͕ͳ͍ͱ ʰzϓϩδΣΫτ໊zJTOPUBWBMJE%BSUQBDLBHFOBNFʱ ͬͯΤϥʔుౖ͍ͯΒΕΔ

J04೿ͷਓ ࣄલ४උͰ࡞ͬͨ ΞΧ΢ϯτʹͳ͍ͬͯΔ͔ʁ

J04೿ͷਓ ࣮ػ઀ଓͯͨ͠ΒJ04%FWJDFͷͱ͜Ζʹ ͜Μͳ෩ʹग़ͯ͘Δ͸ͣ γϛϡϨʔλಈ͔͢ਓ͸ ޷͖ͳ΍ͭΛબΜͰͶʂ ࣍ճ͔Β͸ԼهίϚϯυͰ্ཱ͕ͪΔΑ $ open -a simulator

J04೿ͷਓʢ࣮ػʣ ઃఆҰൠ71/ͱσόΠε؅ཧ ͷڐՄ͕߱ΓͯΔ͔֬ೝʂ

"OESPJE೿ͷਓ "OESPJE4UVEJPΛ্ཱͪ͛ͯ "7%.BOBHFSΛબ୒ ΋͘͠͸࣮ػ઀ଓͯ͠ $ flutter run ޷͖ͳΤϛϡϨʔλΛ ▶︎ Λԡͯ͠ىಈ

8FCͰ΋ಈ͘ʂ $ISPNFͰ΋ಈ͚͘Ͳ ͔ͤͬ͘ͳΒεϚϗ͔γϛϡϨʔλͰ ಈ͔ͯ͠Έͯ΄͍͠ʂ

ಈ͍͔ͨͳʁʁʁ ϘλϯΛԡ͢ͱ ਅΜதͷ਺ࣈ͕Χ΢ϯτΞοϓ͞Ε͍ͯ͘ΞϓϦ

෼ؒٳܜ ΋ͬͱٳܜ͔ͨͬͨ͠Βݴͬͯω

DSFBUF͞ΕͨΞϓϦΛ ݟ͍ͯ͜͏ʂ

΢ΟδΣοτ ϖʔδશମ

΢ΟδΣοτ ϖʔδશମ "QQ#BS

΢ΟδΣοτ ϖʔδશମ "QQ#BS ςΩετ

΢ΟδΣοτ ϖʔδશମ "QQ#BS ςΩετ Ϙλϯ

΢ΟδΣοτ ϖʔδશମ "QQ#BS ςΩετ Ϙλϯ શ෦΢ΟδΣοτʂ ը໘͸΢ΟδΣοτͰ੒Γཱ͍ͬͯΔʂ

࣮ࡍͷίʔυΛݟ͍ͯ͜͏ʂ w ϥΠϒίʔσΟϯά͍ͯ͘͠ͷͰҰॹʹΞϓϦΛಈ͔͍ͯ͜͠͏ʂ w ͨ·ʹղઆͰεϥΠυʹ໭͖ͬͯ·͢ w 5SZ͸Ұॹʹɼ$IBMMFOHF͸ਓͰؤுͬͯΈΑ͏ʂ w ϦϙδτϦʹίʔυΛஔ͍ͯ͋ΔͷͰฉ͖ͦͼΕͨΒࢀߟʹͯ͠Ͷʂ w
IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFS w ίϛοτϝοηʔδ΍ίʔυ಺ίϝϯτ͕આ໌ʹͳ͍ͬͯ·͢ʂ

74$PEFͷਓʙʂ ֦ுػೳೖΕ͓ͯ͘ͱΊͪΌͪ͘ΌศརͰ͢ ʰ fl VUUFSʱͰݕࡧͯ͠Ұ൪্ʹग़Δ΍ͭ

֦ுػೳ͸͜͏࢖͏ʂ Կ͔Ͱғ͍͍ͨ ΢ΟδΣοτΛӈΫϦοΫ ϦϑΝΫλΛબ୒ ғ͍͍ͨ΢ΟδΣοτΛબ୒ σσϯʂғΘΕͨʂ

*OUSPEVDUJPO w ϥΠϒίʔσΟϯά͠·͢ʂ w ϓϩδΣΫτʢσΟϨΫτϦʣߏ੒ʹ͍ͭͯ w NBJO ͷྲྀΕ΍DMBTTͷઆ໌ w .Z)PNF1BHFͷϑΝΠϧ෼͚ͯΈΔ
w ଞͷϑΝΠϧΛࢀর͢Δͱ͖͸JNQPSU͢Δ w 5FYUͷத਎Λม͑ͯΈͨΓ͢Δ w )PU3FMPBE3FTUBSUͱ͸ʁʢผϖʔδͰઆ໌ʣ w .Z)PNF1BHFݟͯ͘ w 4DB ff PMEͱ͔DPMVNOͳͲඪ४΢ΟδΣοτ͕ͨ͘͞ΜʂʢผϖʔδͰઆ໌ʣ w ֦ுػೳ͸͜͏࢖͏ʂʢผϖʔδͰઆ໌ʣ

)PUSFMPBESFTUBSUͱ͸ʁ )PUSFMPBE )PUSFTUBSU ͍͍ͪͪDUSMD͔Βͷ fl VUUFSSVO͠ͳͯ͘େৎ෉ʂʂʂʂ λʔϛφϧͰ3Λԡ͢ ΄΅Ϧηοτ͞ΕΔ λʔϛφϧͰSΛԡ͢ 5FYU΍৭ͳͲ΢ΟδΣοτΛ
มߋͨ͠Β൓ө͞ΕΔ 4UBUF͸ͦͷ·· ʢ4UBUFʹؔͯ͠͸ޙͰઆ໌ʣ fl VUUFSSVO ωΠςΟϒίʔυ͔Β ࣮ߦ͠௚͢ ˞)PUSFMPBE͕Ͱ͖Δͷ͸σόοάϏϧυ࣌ʢ+*5ίϯύΠϧ࣌ʣͷΈ

ඪ४΢ΟδΣοτ Α͘࢖͏΢ΟδΣοτ͕ ༻ҙ͞ΕͯΔʂ ඪ४΢ΟδΣοτ͕ݟΕΔIUUQTEPDT fl VUUFSEFWEFWFMPQNFOUVJXJEHFUT

5SZඪ४΢ΟδΣοτΛ࢖ͬͯΈΑ͏ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w ϥΠϒίʔσΟϯά͠·͢ʂ w ࢖༻૝ఆ΢ΟδΣοτ w 5FYU w $FOUFS
w $PMVNO w 3PX w 4J[FE#PY w $PMPSFE#PY

IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w 3PXͱ$PMVNOΛ࢖ͬͯӈͷਤܗΛඳըͯ͠ΈΑ͏ʂ w େ͖͞΍৭ɼ伱ؒ͸ςΩτʔͰେৎ෉Ͱ͢ w ࣭໰େ׻ܴʂʂʂʂʂ w 伱ؒͷ෇͚ํ΍ฒ΂ํͳͲ ෼ʂ
$IBMMFOHFਤܗΛඳըͯ͠ΈΑ͏

$PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ

$PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ $PMVNOͷαΠζ͸ ΦϨϯδͷ࿮

$PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ $PMVNOͷαΠζ͸ ΦϨϯδͷ࿮ 3PX΋Ί͍ͬͺ͍ ޿͕Ζ͏ͱ͢Δ

$PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ mainAxisSize:MainAxisSize.min, Λࢦఆͯ͋͛͠Δͱ ࣗ਎ͷେ͖͞ʹཹ·Δʂ $PMVNOͷαΠζ͸ ΦϨϯδͷ࿮

5SZϦετΛදࣔͯ͠ΈΑ͏ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w ϥΠϒίʔσΟϯά͠·͢ʂ w ࢖༻૝ఆ΢ΟδΣοτ w -JTU7JFX w $BSE
w 1BEEJOH

IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w ·ͣ͸ࢥ͍ͭ͘ํ๏Ͱ΍ͬͯΈͯʂ w ΤϥʔʹͳΔਓ͕͍ͨΒώϯτग़͠·͢ʂ $IBMMFOHFϦετʹλΠτϧΛ͚ͭΑ͏

$PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢ 5IFGPMMPXJOH3FOEFS0CKFDUXBTCFJOHQSPDFTTFEXIFOUIFFYDFQUJPOXBT fi SFE 3FOEFS7JFXQPSUD/&&%4-":065/&&%41"*/5/&&%4$0.104*5*/(#*5461%"5& OFFETDPNQPTJUJOH DSFBUPS7JFXQPSUˡ*HOPSF1PJOUFS<(MPCBM,FZBEC>ˡ4FNBOUJDTˡ-JTUFOFSˡ @(FTUVSF4FNBOUJDTˡ
3BX(FTUVSF%FUFDUPS<-BCFMFE(MPCBM,FZ3BX(FTUVSF%FUFDUPS4UBUFD>ˡ-JTUFOFSˡ @4DSPMMBCMF4DPQF ˡ@4DSPMM4FNBOUJDT<(MPCBM,FZB>ˡ/PUJ fi DBUJPO-JTUFOFS4DSPMM.FUSJDT/PUJ fi DBUJPOˡ 4DSPMMBCMFˡ1SJNBSZ4DSPMM$POUSPMMFSˡl QBSFOU%BUBOPOF DBOVTFTJ[F DPOTUSBJOUT#PY$POTUSBJOUT X I*O fi OJUZ ɽɽɽ

$PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢ 5IFGPMMPXJOH3FOEFS0CKFDUXBTCFJOHQSPDFTTFEXIFOUIFFYDFQUJPOXBT fi SFE 3FOEFS7JFXQPSUD/&&%4-":065/&&%41"*/5/&&%4$0.104*5*/(#*5461%"5& OFFETDPNQPTJUJOH DSFBUPS7JFXQPSUˡ*HOPSF1PJOUFS<(MPCBM,FZBEC>ˡ4FNBOUJDTˡ-JTUFOFSˡ @(FTUVSF4FNBOUJDTˡ
3BX(FTUVSF%FUFDUPS<-BCFMFE(MPCBM,FZ3BX(FTUVSF%FUFDUPS4UBUFD>ˡ-JTUFOFSˡ @4DSPMMBCMF4DPQF ˡ@4DSPMM4FNBOUJDT<(MPCBM,FZB>ˡ/PUJ fi DBUJPO-JTUFOFS4DSPMM.FUSJDT/PUJ fi DBUJPOˡ 4DSPMMBCMFˡ1SJNBSZ4DSPMM$POUSPMMFSˡl QBSFOU%BUBOPOF DBOVTFTJ[F DPOTUSBJOUT#PY$POTUSBJOUT X I*O fi OJUZ ɽɽɽ *O fi OJUZʂʂ

$PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢ $PMVNO

$PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢ $PMVNO -JTU7JFX

$PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢ $PMVNO Ͳ͜·Ͱ޿͕ΔΜʁʁʁ -JTU7JFX

$PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ w ղܾࡦ ᶃ -JTU7JFXͷߴ͞Λݻఆ͢Δ ᶄ &YQBOEFEͱ͍͏8JEHFUΛ࢖͏ $PMVNO ߴ͞QYͰʂ -JTU7JFX

$PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ w ղܾࡦ ᶃ -JTU7JFXͷߴ͞Λݻఆ͢Δ ᶄ &YQBOEFEͱ͍͏8JEHFUΛ࢖͏ $PMVNO $PMVNOͷ༨Γͷ伱ؒ શ෦ຒΊͨΔʂ
-JTU7JFX

$PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ w ղܾࡦ ᶃ -JTU7JFXͷߴ͞Λݻఆ͢Δ ᶄ &YQBOEFEͱ͍͏8JEHFUΛ࢖͏ ᶅ Ϧετͷ࠷ॳͷཁૉʹλΠτϧΛ࣋ͨͤͯ͋͛Δʂ -JTU7JFXͷΈʹ͢Δ
λΠτϧ ཁૉ ཁૉ ཁૉ ཁૉ ɾ ɾ ɾ

4UBUFͱ4UBUFMFTT8JEHFU4UBUFGVM8JEHFU w Χ΢ϯτΞοϓͯ͠දࣔ͸Ͳ͏΍͍ͬͯΔͷͩΖ͏͔ʁ w ͦ΋ͦ΋4UBUFͬͯͳ͋ʹʁʢผϖʔδͰઆ໌ʣ w 4UBUFGVM8JEHFUͷ঺հ w 4UBUFΛ௥Ճͯ͠ΈΑ͏ w
ഒ͍ͯ͘͠Ϙλϯ w 4UBUF͸খ࣋ͭ͘͞Α͏ʹ͠Α͏ʂ w 4UBUFMFTT8JEHFUͷ঺հ

4UBUFͬͯͳ͋ʹʁ w 4UBUFঢ়ଶ w 4UBUF͕มΘΔͱը໘ߋ৽͞ΕΔʢCVJME಺͕࠶࣮ߦ͞ΕΔʣ ͳΜΒ͔ͷΞΫγϣϯ ݁ՌΛඳը ݁ՌΛඳը

4UBUFͬͯͳ͋ʹʁ w 4UBUFঢ়ଶ w 4UBUF͕มΘΔͱը໘ߋ৽͞ΕΔʢCVJME಺͕࠶࣮ߦ͞ΕΔʣ ͳΜΒ͔ͷΞΫγϣϯ ݁ՌΛඳը ݁ՌΛඳը 6*G 4UBUF
એݴత6*Λந৅Խ͢Δͱ ঢ়ଶΛҾ਺ͱͯ͠6*Λฦ͢ ෭࡞༻Λ࣋ͨͳ͍ؔ਺Ͱ͋Δ

w 4UBUFΛ࢖͏΢ΟδΣοτΛ4UBUFGVM8JEHFUͱ͍͏ w ٯʹ࢖Θͳ͍΢ΟδΣοτ͸4UBUFMFTT8JEHFUͱ͍͏ 4UBUFͬͯͳ͋ʹʁ 4UBUFGVM8JEHFU ݁ՌΛඳը ݁ՌΛඳը

5SZഒʹͳΔTUBUFΛ௥Ճ͠Α͏ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w ϥΠϒίʔσΟϯά͠·͢ʂ w 4UBUFΛ৽ͨʹ༻ҙ͠Α͏ w ͦͷ4UBUFΛഒ͍ͯ͘͠ϘλϯΛ௥Ճ͠Α͏

5SZഒʹͳΔTUBUFΛ௥Ճ͠Α͏ w ৽͍͠4UBUFΛఆٛ w ഒ͢ΔϝιουΛఆٛ w ഒ͢ΔϝιουΛݺͿϘλϯΛ௥Ճ void _twice() {
setState(() { _counter2 = _counter2 * 2; }); } FloatingActionButton( onPressed: () { _twice(); },

5SZ5FYU'JMFEΛ࢖ͬͯΈΑ͏ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w ϥΠϒίʔσΟϯά͠·͢ʂ w 5FYU'JMFEΛ࢖ͬͯΈΑ͏ w จࣈଧͭͨͼʹԼʹςΩετදࣔͤ͞Δʹ͸ʁ w 4UBUFʹ͠ͳ͖Ό͍͚ͳ͍Ͷʂ

$IBMMFOHFจࣈදࣔϘλϯΛ࡞Ζ͏ w ͖ͬ͞͸จࣈΛଧͭͨͼදࣔͩͬͨ w ϘλϯΛԡͨ͠Βจࣈ͕දࣔ͞ΕΔΑ͏ʹͯ͠ΈΑ͏ʂ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM ෼ʂ

$IBMMFOHFจࣈදࣔϘλϯΛ࡞Ζ͏ w TFU4UBUFͷλΠϛϯά͕ॏཁ w 5FYU'JMFEͷPO$IBOHFEͰ͸TFU4UBUF͠ͳ͍Α͏ʹ w ࠶ඳը͞Εͯ͠·͏ͨΊ w Ϙλϯԡͨ࣌͠ʹTFU4UBUF͢ΔΑ͏ʹʂ TextField(
onChanged: ((value) { tmpText = value; }), IconButton( onPressed: () { setState(() { showText = tmpText; }); },

ϥϯν

5SZը໘ભҠͯ͠ΈΑ͏ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w /BWJHBUPSͷ΍ΓํͰ͢ w ϥΠϒίʔσΟϯά͠·͢ʂ w 'JSTU1BHFͱ4FDPOE1BHFΛ࡞੒ w 4DB
ff PMEͳ͍ͱ౔୆͕ͳ͍͔ΒมͳදࣔʹͳͬͪΌ͏Αʙ w QVTIͷઆ໌ʢผϖʔδͰઆ໌ʣ w ͋Β͔͡Ί3PVUFొ࿥͓ͯ͘͠ͱศརͩΑʙ w QPQͷઆ໌ʢผϖʔδͰઆ໌ʣ

ը໘ભҠ " .BUFSJBM"QQ͕͍࣋ͬͯΔ/BWJHBUPSΛ࢖ͬͯը໘ભҠ͢Δ " # .BUFSJBM1BHF3PVUF Navigator.push( context, MaterialPageRoute<void>( builder:
(BuildContext context) => B(), ), ); Navigator.pop(conte

(BuildContext context) => B(), ), ); Navigator.pop(conte 8JEHFU ࠓճ͸4FDPOE1BHF Λ .BUFSJBM1BHF3PVUFʹ౉ͯ͠ 3PVUFΛ࡞ΓɼͦΕΛදࣔ

ը໘ભҠ .BUFSJBM"QQ͕͍࣋ͬͯΔ/BWJHBUPSΛ࢖ͬͯը໘ભҠ͢Δ " # FSJBM1BHF3PVUF ute<void>( ildContext context) => B(),
Navigator.pop(context); "

(BuildContext context) => B(), ), ); Navigator.pop(conte

(BuildContext context) => B(), ), ); Navigator.pop(conte ͍͍ͪͪ͜Εॻ͘ͷ ΊΜͲ͍͘͞ʂʂʂ

.BUFSJBM"QQʹ͋Β͔͡Ί3PVUFΛొ࿥͓ͯ͜͠͏ʂ return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.pink,
), initialRoute: '/', routes: <String, WidgetBuilder>{ '/': (BuildContext context) => const FirstPage(), '/second': (BuildContext context) => const SecondPage(), }, ); ͜ΕͰݺ΂ΔΑ͏ʹͳΔʂ Navigator.pushNamed(context, "/second");

IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w (JU)VCͷϦϙδτϦҰཡΛऔಘ͢Δ"1*Λୟ͍ͯΈΑ͏ʂ w IUUQTEPDTHJUIVCDPNKBSFTUSFQPTSFQPT BQJ7FSTJPOMJTU SFQPTJUPSJFTGPSBVTFS w ·ͣ͸DVSMίϚϯυͰୟ͍ͯΈΑ͏ w
'MVUUFSͰIUUQ௨৴͢ΔͨΊʹIUUQύοέʔδΛ͍ΕΑ͏ʂ w IUUQTQVCEFWQBDLBHFTIUUQ 5SZωοτϫʔΫ௨৴ͯ͠ΈΑ͏ $ curl -L https://api.github.com/users/kno3a87/repos ϦϙδτϦҰཡ ͍ͩ͘͞ʙ <\ JE OPEF@JEIPHF OBNF)FMMP8PSME ʜ ωοτϫʔΫ௨৴ ΫϥΠΞϯτ "1*

ඇಉظॲཧʢBTZODBXBJUʣ ઀ଓதʂ ୳͠தʂ ௐ΂தʂ ฦ͠தʂ ଴ͬͯ͋͛Δ ʢBXBJUʣ

IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w ·ͣ͸KTPO͔ΒEBSUͰѻ͑ΔΦϒδΣΫτʹม׵͠Α͏ w IPHF<bGVHB`><bQJZP`>Έ͍ͨͳऔಘํ๏ͩͱจࣈྻUZQPͪ͠Ό͏͔΋ʜ w Ϟσϧʹม׵ͪ͠Ό͓͏ʂ w ࢖༻ύοέʔδ w
IUUQTQVCEFWQBDLBHFTKTPO@TFSJBMJ[BCMF w IUUQTQVCEFWQBDLBHFTCVJME@SVOOFS 5SZKTPOΛύʔε͠Α͏ $ flutter pub run build_runner build \ lOBNFzlLVOPz lBHFzlz ^ VTFSOBNF͸LVOP VTFSBHF͸ʂ

෼ؒٳܜ ͔࣍ΒνʔϜνϟϨϯδʹͳΓ·͢ʂ

νʔϜͰνϟϨϯδʂ $IBU(15ͱͷνϟοτΞϓϦΛ ࡞ͬͯΈΑ͏ʂ

$IBU(15ͱ͸ʁ w 0QFO"*͕೥݄ʹެ։ͨ͠ਓ޻஌ೳνϟοτϘοτ w ΢ΣϒΞϓϦ͚ͩͰͳ͘"1*΋༻ҙ͞ΕͯΔ w IUUQTQMBUGPSNPQFOBJDPNEPDTBQJSFGFSFODFNBLJOHSFRVFTUT w "1*Λ࢖͏্Ͱͷ஫ҙࣄ߲ w
ػີ৘ใ΍ୈࡾऀͷ஌తࡒ࢈ݖΛ৵֐͢ΔΑ͏ͳΠϯϓοτ͸͠ͳ͍Ͱʂʂʂʂ w ΋ͪΖΜ㒷ᨱதই΋/( w Ξ΢τϓοτ͸ݸਓͰར༻͢ΔൣғʹͱͲΊ͍ͯͩ͘͞

νʔϜͰνϟϨϯδʂ w جຊ࣮૷͸֤ʑ΍͍ͬͯͩ͘͞ʂʂ w νʔϜʹͨ͠ҙਤ͸ฉ͖΍͘͢ɾڭ͑΍͘͢͢ΔͨΊͳͷͰϫΠϫΠ΍͍ͬͯͩ͘͞ʂ w ࠷ॳͷ໰୊͔Βղ͍ͯ͘ͱॱ൪ʹνϟοτΞϓϦ͕ग़དྷ্͕ͬͯ͘૝ఆͰ͢ʂ w ࠷ޙ·ͰḷΓண͚ͳ͍ͷΛ૝ఆͨ͠໰୊ྔͳͷͰযΒͣʂ w
ٳܜ΋ࣗ༝ʹͱͬͯͶʂόΠϩϯͰด·ΔͷͰؾΛ͚ͭͯʂʂ w ఆظతʹνϡʔλʔ͕ݟͯճΓ·͢ʂ w Կ͔࣭໰ɾ૬ஊ͋ͬͨΒଈ࠲ʹνϡʔλʔݺΜͰ΋Βͬͯେৎ෉Ͱ͢ʂ

5FBN$IBMMFOHF౤ߘϖʔδͷ࡞੒ w ౤ߘ͢ΔϖʔδΛ࡞Ζ͏ʂ w ดͨ͡Βॻ͍ͨจࣈ͕දࣔ͞ΕΔΑ͏ʹͯ͠ΈΑ͏ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHF$IBU(15ͱ઀ଓ w $IBU(15"1*ͷτʔΫϯ͸%SPQCPYʹ͋Γ·͢ʂ w (JUʹQVTI͠ͳ͍ͰͶʂʂʂ w FOWϑΝΠϧΛ࡞੒ͯ͠HJUJHOPSFʹॻ͍͓ͯ͘ͱ҆৺͔΋ w LP w
͖ͬ͞ͷ౤ߘϖʔδͰॻ͍ͨ಺༰Λ"1*ʹ౤͛ͯΈΑ͏ w ݁Ռ΋දࣔͯ͠ΈΑ͏ʂ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM $ flutter run —-dart-define=MY_TOKEN=<͜͜ʹτʔΫϯ>

5FBN$IBMMFOHFKTPOΛϞσϧʹม׵ w ͖ͬ͞ͷUSZΛࢀߟʹ΍ͬͯΈΑ͏ʂ w ڍಈࣗମ͸͖ͬ͞ͱมΘΒͳͯ͘0, w SFTQPOTF͕ೖΕࢠʹͳͬͯΔͷ͸Ͳ͏ͨ͠Βྑ͍͔ͳʁ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHFϩʔσΟϯάදࣔ͠Α͏ w "1*Λୟ͍͔ͯΒ݁Ռ͕ฦͬͯ͘Δ·ͰͷؒϩʔσΟϯάΛදࣔ w ϩʔσΟϯά΢ΟδΣοτ͸ඪ४Ͱ༻ҙ͞ΕͯΔͷͰ୳ͯ͠ΈͯͶ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHFϩʔΧϧʹอଘ͠Α͏ w ࠓճ͸)JWFͱ͍͏ύοέʔδΛ࢖༻ w IUUQTQVCEFWQBDLBHFTIJWF w ୺຤ͷϑΝΠϧγεςϜʹอଘͯ͘͠LFZWBMVFετΞ w SFBE΋XSJUF΋ΊͬͪΌૣ͍ʂʂʂ w
Ұ୴QSJOUσόοάͳͲͰอଘ֬ೝͰ͖Ε͹0,Ͱ͢ʂ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHFจ຺Λཧղͤ͞Α͏ w $IBU(15͸จ຺΋ཧղͯ͠ฦ౴ͯ͘͠Ε·͢ʂ w ࢦࣔޠΛ࢖͏ͱจ຺ཧղͯ͠Δ͔֬ೝͰ͖·͢ w ͠ΓͱΓͱ͔Ͱ΋Αͦ͞͏ʂ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHFϦετදࣔ͠Α͏ w อଘͨ͠ϝοηʔδ಺༰ΛϦετදࣔʹͯ͠νϟοτͬΆ͘͠Α͏ʂ w σβΠϯ΋ࣗ෼޷Έʹ༡ΜͰΈͯʂ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHFΤϥʔΛදࣔ w λΠϜΞ΢τΛઃ͚ͯΈΑ͏ w ඵܦͬͯ΋Ϩεϙϯε͕ͳ͚Ε͹ΤϥʔΛฦ͢Α͏ʹͳͲ w Կ͔͠ΒͷΤϥʔΛड͚औͬͨΒμΠΞϩάͷදࣔΛ͠Α͏ʂ w μΠΞϩά͡Όͳͯ͘εφοΫόʔͰ΋0, ౴͑
IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHFϝοηʔδΛશ࡟আ w ࠓ·Ͱอଘͨ͠ϝοηʔδΛશ࡟আ͢ΔϘλϯΛ͚ͭΑ͏ʂ w σόοά͠΍͘͢ͳΓ·͢ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHF)JWFͰ΋ϞσϧΛ࢖͏ w KTPOͷ࣌Έ͍ͨʹจࣈྻࢦఆ͢ΔՕॴ͕ग़͖ͯͯେมʂ w ϞσϧΛ࢖͑ΔΑ͏ʹ͠Α͏ʂ w ࢖༻ύοέʔδ w IUUQTQVCEFWQBDLBHFTIJWF@HFOFSBUPS w
IUUQTEPDTIJWFECEFWDVTUPNPCKFDUTUZQF@BEBQUFST ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏ w #MPDύλʔϯͱ͸ঢ়ଶ؅ཧʹؔ͢ΔΞʔΩςΫνϟύλʔϯͷҰͭ w ೥ͷ(PPHMF*0Ͱ঺հ͞Εͨ w ϏδωεϩδοΫͱ6*Λ෼཭ͯ͠։ൃ͠΍͘͢͠Α͏ʂ w IUUQTCMPDMJCSBSZEFW w
'MVUUFSެࣜαϯϓϧ࣮૷΋͋Δʂ w IUUQTHJUIVCDPN fl VUUFSOFXT@UPPMLJUUSFF DEDFEDGFCCFBBB w 'MVUUFSͷϕετϓϥΫςΟεΛ౿ऻ w ࢖༻ύοέʔδ w IUUQTQVCEFWQBDLBHFT fl VUUFS@CMPD

5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏ TUBUF #MPDΫϥε͸ ৗʹTUBUFΛ࣋ͬͯΔ

5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏ TUBUF #MPDΫϥε͸ ৗʹTUBUFΛ࣋ͬͯΔ ࣋ͬͯΔ࠷৽ͷTUBUFΛݟͯ 6*Λߏங͢Δ

5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏ ઒ ʢTUSFBNʣ TUBUF

5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏ ઒ ʢTUSFBNʣ TUBUF TUBUFΛྲྀ͢ ʢFWFOUʣ

5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏ ઒ ʢTUSFBNʣ TUBUF TUBUFΛྲྀ͢ ʢFWFOUʣ ྲྀΕͯ͘ΔͷΛ ଴ͪߏ͑ͯΔ ʢMJTUFOʣ

5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏ ౴͑ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

Ϋϩʔδϯά

Ϋϩʔδϯά 'MVUUFSָ͠Ί͔ͨͳʁ

ҎԼิ଍ࢿྉ

ม਺ ʲ࠶୅ೖͰ͖Δʳ WBS ʲ࠶୅ೖͰ͖ͳ͍ʳ fi OBMʢ࣮ߦ࣌ఆ਺ʣ DPOTUʢίϯύΠϧ࣌ఆ਺ʣ ίϯύΠϧ࣌ʹఆ਺ʹ͢Δํ͕ύϑΥʔϚϯε͕ྑ͍ͷͰDPOTUΛ࢖͓͏ʂ

΢ΟδΣοτͷ੾Γग़͠ํ class SampleState extends State<Sample> { final text1 = '΄͛ΓΜ';
final text2 = '͏ͳΓΜ'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( children: [ Text(text1), Text(text2), ], ), ), ); } } ଞͷ΢ΟδΣοτͰ΋ ࢖͍·Θ͍ͨ͠ͷͰ ੾Γग़͍ͨ͠ʂ

΢ΟδΣοτͷ੾Γग़͠ํIFMQFSNFUIPE class SampleState extends State<Sample> { final text1 = '΄͛ΓΜ';
final text2 = '͏ͳΓΜ'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( children: [ Text(text1), Text(text2), ], ), ), ); } } class SampleState extends State<Sample> { final text1 = '΄͛ΓΜ'; final text2 = '͏ͳΓΜ'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: showText(), ); } Widget showText() { return Center( child: Column( children: [ Text(text1), Text(text2), ], ), ); } } ؆୯ʹ੾Γग़ͤΔ

΢ΟδΣοτͷ੾Γग़͠ํΫϥε8JEHFU class SampleState extends State<Sample> { final text1 = '΄͛ΓΜ';
final text2 = '͏ͳΓΜ'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( children: [ Text(text1), Text(text2), ], ), ), ); } } class SampleState extends State<Sample> { final text1 = '΄͛ΓΜ'; final text2 = '͏ͳΓΜ'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: SampleText( text1: text1, text2: text2, ), ); } } class SampleText extends StatelessWidget { final String text1; final String text2; const SampleText({ super.key, required this.text1, required this.text2, }); @override Widget build(BuildContext context) { return Center( child: Column( children: [ Text(text1), Text(text2), ], ), ); } } Ϋϥεͱͯ͠੾Γग़͢ͱ ͪΐͬͱΊΜͲ͍͚͘͞Ͳ ςετ͠΍͍͢ˍ ແବͳ࠶ඳըΛ཈͑ΒΕΔʂ

#VJME$POUFYUͬͯͳΜͩʁ 8JEHFU͸ӈਤͷΑ͏ʹπϦʔঢ়ʹͳ͍ͬͯΔ #VJME$POUFYU͸݂ےͷ͜ͱͰ૆ઌͷ৘ใʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ ˞௚ܘͷ૆ઌ͔͠ḷΕͳ͍ʂ ˞ͭͷ8JEHFUΠϯελϯεʹରͯ͠   ͭͷ#VJME$POUFYU͕ϖΞͷؔ܎ʹͳ͍ͬͯΔʂ .BUFSJBM"QQ 5IFNF CMVF
4DB ff PME 5IFNF QJOL 8JEHFU$ 5IFNF PSBOHF 8JEHFU" $PMVNO 3PX 8JEHFU#

#VJME$POUFYUͬͯͳΜͩʁ 8JEHFU͸ӈਤͷΑ͏ʹπϦʔঢ়ʹͳ͍ͬͯΔ #VJME$POUFYU͸݂ےͷ͜ͱͰ૆ઌͷ৘ใʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ ˞௚ܘͷ૆ઌ͔͠ḷΕͳ͍ʂ ˞ͭͷ8JEHFUΠϯελϯεʹରͯ͠   ͭͷ#VJME$POUFYU͕ϖΞͷؔ܎ʹͳ͍ͬͯΔʂ .BUFSJBM"QQ 5IFNF CMVF
4DB ff PME 5IFNF QJOL 8JEHFU$ 5IFNF PSBOHF 8JEHFU" $PMVNO 3PX 8JEHFU# 8JEHFU#ͷ݂ےΛḷͬͨΒ ͜͜ͷ5IFNF͕ݟ͔ͭͬͨʂ ͸ࣗ෼ͷ݂ےΛḷͬͯ ૆ઌʹ͋Δ5IFNFΛݟ͚͖͍ͭͯͯΔ Theme.of(context)

Flutter研修【MIXI 23新卒技術研修】

Flutter研修【MIXI 23新卒技術研修】

More Decks by MIXI ENGINEERS

Other Decks in Technology

Featured

Transcript