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

Flutter 24新卒研修 2024/04/25 Kuno Ayana

ߨࢣνϡʔλʔ ٱ໺จࡊ !BZBOBLVOP ৽ଔͨΜΆΆࣨͨΜΆΆάϧʔϓ ࠷ۙυϥ͑΋ΜάοζΛങ͍ړͬͯͯۚܽ

ݚमͷΰʔϧ

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

ࣄલ४උ w 'MVUUFS4%,ͷΠϯετʔϧ w IUUQTEPDT fl VUUFSEFWHFUTUBSUFEJOTUBMM w J04ಈ͔͍ͨ͠ਓ w
9DPEFͷΠϯετʔϧ͓ΑͼղౚʢJ04ݚम؀ڥͱಉ౳ʣ w "OESPJEಈ͔͍ͨ͠ਓ w "OESPJE4UVEJP*HVBOBͷΠϯετʔϧ͓Αͼղౚʢ"OESPJEݚम؀ڥͱಉ౳ʣ

ࣄલ४උ $ flutter doctor Doctor summary (to see all details,
run flutter doctor -v): [✓] Flutter (Channel stable, 3.19.6, on macOS 13.6.1 22G313 darwin- arm64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.2) [✓] VS Code (version 1.87.2) [✓] Connected device (3 available) [✓] Network resources • No issues found!

ຊ೔ͷ͓඼ॻ͖ 1 2 3 'MVUUFSͱ͸ʁ ΞϓϦΛ࡞ͬͯΈΑ͏ʂ ΞϓϦͷத਎Λݟ͍ͯ͜͏ʂ 7 ωοτϫʔΫ௨৴ͯ͠ΈΑ͏ʂ 4
4UBUFͬͯͳΜͩΖ͏ʁ 5 5FYU'JMFEΛ࢖ͬͯΈΑ͏ʂ 6 8 νʔϜͰνϟϨϯδʂʂʂ ͓ΘΓʙ

'MVUUFSͱ͸ʁ

'MVUUFSͱ͸ʁ w ϚϧνϓϥοτϑΥʔϜ։ൃ͕ՄೳͳϑϨʔϜϫʔΫ w ϞόΠϧɾXFCɾσεΫτοϓɾ૊ΈࠐΈγεςϜΛαϙʔτ w 'MVUUFSΛ࢖༻ͯ͠ެ։͞ΕͨΞϓϦ͸ສΛ௒͑ͨʢ೥݄຤࣌఺ʣ w 'JSFCBTFͷػೳΛαϙʔτ w
(FNJOJ(PPHMF"*%BSU4%,͕ϦϦʔε͞ΕΞϓϦʹ૊ΈࠐΊΔΑ͏ʹ 'MVUUFS'PSXBSEIUUQTXXXZPVUVCFDPNXBUDI W[,2:(,"F8 'MVUUFSެࣜIUUQT fl VUUFSEFW 8IBU`TOFXJO'MVUUFSIUUQTNFEJVNDPN fl VUUFSXIBUTOFXJO fl VUUFSCBBFE *NQSPWJOHJOGPUBJONFOUTZTUFNTBU5PZPUBXJUI'MVUUFSIUUQT fl VUUFSEFWTIPXDBTFUPZPUB

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

w %BSUͱ͍͏ίϯύΠϧܕݴޠͰ࣮૷ w (PPHMF͕+BWB4DSJQUͷ໰୊఺Λվળͨ͠୅ସݴޠͱͯ͠೥ʹ։ൃͨ͠΋ͷ w /VMM4BGFUZ΍ίϨΫγϣϯεϓϨουԋࢉࢠΛ࢖ͬͨ6*ͷߏங͕ՄೳʢผϖʔδͰઆ໌ʣ w "05ίϯύΠϧΛ௨ͯ͡ωΠςΟϒͷػցޠʹม׵͞ΕΔ w ͜ΕʹΑΓωΠςΟϒΞϓϦέʔγϣϯͱͯ͠௚઀࣮ߦ͞ΕΔʢิ଍ࢿྉͰઆ໌ʣ
w ϨϯμϦϯάΤϯδϯ΋ࣗલʢJ04Ͱ͸*NQFMMFS͕σϑΥϧτʹʣ w એݴత6*Ͱॻ͘͜ͱ͕ՄೳʢผϖʔδͰઆ໌ʣ w 4UPSZCPBSEΛ࢖ͬͨ4XJGUͷίʔυΑΓ3FBDUͷํ͕ࣅͯΔ͔΋ 'MVUUFSͱ͸ʁ 'MVUUFSͷΞʔΩςΫνϟIUUQTEPDT fl VUUFSEFWSFTPVSDFTBSDIJUFDUVSBMPWFSWJFX )PXEPFT'MVUUFSSVONZDPEFPOJ04 IUUQTEPDT fl VUUFSEFWSFTPVSDFTGBRSVOJPT *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ʣ զ͸όϒʙͱ͍͏ࠇ৭ͷ ਅΜதدͤςΩετͰ͋Δʂ

ΞϓϦΛ࡞ͬͯΈΑ͏ʂ

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

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

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

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

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

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

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

෼ؒٳܜ

ΞϓϦͷத਎Λ ݟ͍ͯ͜͏ʂ

΢ΟδΣοτ ϖʔδશମ

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

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

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

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

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

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

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

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

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

ඪ४΢ΟδΣοτΛ࢖ͬͯΈΑ͏ w ϥΠϒίʔσΟϯά͍ͯ͘͠ͷͰҰॹʹॻ͍ͯΈΑ͏ʂ w ࢖༻૝ఆ΢ΟδΣοτ w 5FYU w $FOUFS w
$PMVNO w 3PX w 4J[FE#PY w $PMPSFE#PY IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

ਤܗΛඳըͯ͠ΈΑ͏ʂ IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

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

$PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ $PMVNO͸ॎʹ͍ͬͺ͍ ޿͕Ζ͏ͱ͢Δ

$PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ 3PX΋ԣΊ͍ͬͺ͍ ޿͕Ζ͏ͱ͢Δ $PMVNO͸ॎʹ͍ͬͺ͍ ޿͕Ζ͏ͱ͢Δ

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

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

$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ͬͯͳΜͩΖ͏ʁ

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

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

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

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

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

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

จࣈදࣔϘλϯΛ࡞Ζ͏ʂ w ͖ͬ͞͸จࣈΛଧͭͨͼදࣔͩͬͨ w ϘλϯΛԡͨ͠Βจࣈ͕දࣔ͞ΕΔΑ͏ʹͯ͠ΈΑ͏ʂ IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

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

ϥϯν

w (JU)VCͷϦϙδτϦҰཡΛऔಘ͢Δ"1*Λୟ͍ͯΈΑ͏ʂ w IUUQTEPDTHJUIVCDPNKBSFTUSFQPTSFQPT BQJ7FSTJPOMJTU SFQPTJUPSJFTGPSBVTFS w ·ͣ͸DVSMίϚϯυͰୟ͍ͯΈΑ͏ ωοτϫʔΫ௨৴ͯ͠ΈΑ͏ʂ $
curl -L https://api.github.com/users/<<ࣗ෼ͷ github id>>/repos ϦϙδτϦҰཡ ͍ͩ͘͞ʙ <\ JE OPEF@JEIPHF OBNF)FMMP8PSME ʜ ωοτϫʔΫ௨৴ ΫϥΠΞϯτ "1*

w 'MVUUFSͰIUUQ௨৴͢ΔͨΊʹIUUQύοέʔδΛ͍ΕΑ͏ʂ w IUUQTQVCEFWQBDLBHFTIUUQ ωοτϫʔΫ௨৴ͯ͠ΈΑ͏ʂ QVCEFWʹ͸ ͨ͘͞Μͷύοέʔδ͕ʂ

w 'MVUUFSͰIUUQ௨৴͢ΔͨΊʹIUUQύοέʔδΛ͍ΕΑ͏ʂ w IUUQTQVCEFWQBDLBHFTIUUQ ωοτϫʔΫ௨৴ͯ͠ΈΑ͏ʂ QVCEFWʹ͸ ͨ͘͞Μͷύοέʔδ͕ʂ 3FBENF΍ *OTUBMMJOHΛݟͯ ࢖ͬͯΈΑ͏ʂ

w ϥΠϒίʔσΟϯά͠·͢ʂ w ϘλϯΛԡͨ͠Β(JUIVCͷϦϙδτϦऔಘ͢ΔΑ͏ʹ w දࣔ΋ͯ͠ΈΑ͏ʂ ωοτϫʔΫ௨৴ͯ͠ΈΑ͏ʂ IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

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

ඇಉظॲཧʢBTZODBXBJUʣ ઀ଓதʂ ୳͠தʂ ௐ΂தʂ ฦ͠தʂ ଴ͬͯ͋͛Δʙ ͕͔͔࣌ؒΔૢ࡞Λ ϝΠϯεϨουʢ6*ʣΛϒϩοΫ͠ͳ͍Α͏ʹ όοΫάϥ΢ϯυͰ࣮ߦʂ

ඇಉظॲཧʢBTZODBXBJUʣͷྫ Future<void> fetchUserData() async { // ϢʔβʔσʔλΛඇಉظͰऔಘ final response =
await http.get( Uri.parse('https://api.example.com/user'), ); debugPrint('εςʔλείʔυ͸: ${response.statusCode}'); }

await http.get( Uri.parse('https://api.example.com/user'), ); debugPrint('εςʔλείʔυ͸: ${response.statusCode}'); } BTZODΩʔϫʔυ͸ ؔ਺͕ඇಉظͰ͋Δ͜ͱΛࣔ͢

await http.get( Uri.parse('https://api.example.com/user'), ); debugPrint('εςʔλείʔυ͸: ${response.statusCode}'); } BTZODΛ෇͚ͨؔ਺͸ ಺෦ͰBXBJUΛ࢖༻͢Δ͜ͱ͕Ͱ͖Δ ৗʹ'VUVSFΦϒδΣΫτΛฦ͢ BTZODΩʔϫʔυ͸ ؔ਺͕ඇಉظͰ͋Δ͜ͱΛࣔ͢

await http.get( Uri.parse('https://api.example.com/user'), ); debugPrint('εςʔλείʔυ͸: ${response.statusCode}'); } BXBJUͰ଴ͬͯ͋͛Δʂ

w ·ͣ͸KTPO͔ΒEBSUͰѻ͑Δ.BQΦϒδΣΫτʹม׵͠Α͏ʂ w IPHF<bGVHB`><bQJZP`>Έ͍ͨͳऔಘํ๏ͩͱจࣈྻUZQPͪ͠Ό͏͔΋ʜܕ΋ͳͯ͘ෆ҆ʜ w Ϟσϧʹม׵ͪ͠Ό͓͏ʂ KTPOΛύʔε͠Α͏ \ lOBNFzlLVOPz lBHFzlz
^ VTFSOBNF͸LVOP VTFSBHF͸ʂ

w ϨεϙϯεͷKTPOΛQBSTFͯ͠ϦϙδτϦ໊͚ͩऔಘ͠Α͏ w ࢖༻ύοέʔδ w IUUQTQVCEFWQBDLBHFTKTPO@TFSJBMJ[BCMF w IUUQTQVCEFWQBDLBHFTCVJME@SVOOFS w ίϚϯυ
ϦϙδτϦͷ໊લ͚ͩදࣔͯ͠ΈΑ͏ʂ $ flutter pub run build_runner build IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

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

νʔϜͰνϟϨϯδʂ "[VSF0QFO"*ͱͷνϟοτΞϓϦΛ ࡞ͬͯΈΑ͏ʂ

"[VSF0QFO"*4FSWJDFͱ͸ʁ w .JDSPTPGU"[VSF͕ఏڙ͢Δ"*αʔϏεͷͭ w 0QFO"*͕ࣾ։ൃͨ͠"*ϞσϧΛ.JDSPTPGU"[VSF্Ͱར༻Մೳ w ೖྗσʔλ͕"*ͷֶशσʔλʹར༻͞Εͳ͍ w .JDSPTPGU"[VSFͷηΩϡϦςΟػೳΛ࢖༻Ͱ͖ΔͨΊاۀͰͷར༻ʹ޲͍ͯΔ w
"*Ϟσϧ͸0QFO"*͕ࣾఏڙ͍ͯ͠Δ$IBU(15Ͱ࢖ΘΕ͍ͯΔϞσϧͱಉ͡ʂ w ࣗવݴޠʹΑΔ࣭ٙԠ౴΍຋༁ɼձٞͷཁ໿ɾίʔυͷੜ੒ͳͲ༷ʑͳλεΫΛ࣮ߦՄೳ w ͪͳΈʹ$IBU(15ͱҧͬͯ8FCαʔϏε͕ແ͘"1*ར༻ͷΈ

"1*Λ࢖͏্Ͱͷ஫ҙࣄ߲ w ػີ৘ใ΍ୈࡾऀͷ஌తࡒ࢈ݖΛ৵֐͢ΔΑ͏ͳΠϯϓοτ͸͠ͳ͍Ͱ͍ͩ͘͞ʂʂʂ w ΋ͪΖΜ㒷ᨱதই΋/(Ͱ͢ w Ξ΢τϓοτ͸ݸਓͰར༻͢ΔൣғʹͱͲΊ͍ͯͩ͘͞ʂ

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

5$౤ߘϖʔδͷ࡞੒ w ౤ߘ͢ΔϖʔδΛ࡞Ζ͏ʂ w ౤ߘϖʔδΛดͨ͡Βॻ͍ͨจࣈ͕දࣔ͞ΕΔΑ͏ʹͯ͠ΈΑ͏ w ώϯτϫʔυ w ը໘ભҠʢQVTIQPQʣ w
5FYU'JFME w TFU4UBUF IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

5$"[VSF0QFO"*ͱ઀ଓ w "[VSF0QFO"*"1*LFZ͸QBTTXPSEʹ͋Γ·͢ʂ w ઈର(JUʹQVTI͠ͳ͍Ͱʂʂʂ w ·ͣDVSMͰ౤͛ΕΔ͔֬ೝͯ͠ΈΑ͏ʂ w ެࣜυΩϡϝϯτIUUQTMFBSONJDSPTPGUDPNKBKQB[VSFBJTFSWJDFTPQFOBJ RVJDLTUBSU
UBCTDPNNBOEMJOF$QZUIPOOFXQJWPUTSFTUBQJ curl ‘<<ΤϯυϙΠϯτURL>>/openai/deployments/<<σϓϩΠ໊>>/chat/completions? api-version=2024-02-15-preview' \ -H 'Content-Type: application/json' \ -H ‘api-key: <<ೝূ৘ใ>>' \ -d '{"messages": [{“role":"user","content":"͜Μʹͪ͸ʂ"}]}'

5$"[VSF0QFO"*ͱ઀ଓ w EBSUEF fi OFίϚϯυΛ࢖ͬͯ஋Λ౉ͯ͋͛͠Α͏ʂ w EBSUEF fi OFίϚϯυ͔Βड͚औΔ࣌͸͜͏ʂ flutter
run —-dart-define=API_URL=<<ΤϯυϙΠϯτURL>> -—dart- define=DEPLOY_NAME=<<σϓϩΠ໊>> —-dart-define=API_KEY=<<ೝূ৘ใ>> const apiUrl = String.fromEnvironment('API_URL');

5$"[VSF0QFO"*ͱ઀ଓ w ౤ߘϖʔδͰॻ͍ͨ಺༰Λ"1*ʹ౤͛ͯΈΑ͏ʂ w ݁Ռ΋දࣔͯ͠ΈΑ͏ w ώϯτϫʔυ w IUUQύοέʔδ w
VUG IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

5$KTPOΛϞσϧʹม׵ w KTPOΛϞσϧʹม׵ͯ͠࢖ͬͯΈΑ͏ w ڍಈࣗମ͸͖ͬ͞ͱมΘΒͳͯ͘0,ʂ w ώϯτϫʔυ w KTPO@TFSJBMJ[BCMFύοέʔδ w
CVJME@SVOOFSύοέʔδ IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

5$ϩʔσΟϯάΛදࣔ͠Α͏ w ϩʔσΟϯάΛදࣔͯ͠ΈΑ͏ʂ w "1*Λୟ͍͔ͯΒ݁Ռ͕ฦͬͯ͘Δ·Ͱͷؒ w ώϯτϫʔυ w 1SPHSFTTJOEJDBUPST w
4UBUF IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

5$จ຺Λཧղͤ͞Α͏ w 0QFO"*͸จ຺΋ཧղͯ͠ฦ౴ͯ͘͠ΕΔ w NFTTBHFTʹࠓ·ͰͷNFTTBHFΛ٧ΊࠐΉ͜ͱͰՄೳ w ࢦࣔޠΛ࢖ͬͨΓ͠ΓͱΓΛ͢Δͱจ຺ཧղͯ͠Δ͔֬ೝͰ͖Δ curl ‘<<ΤϯυϙΠϯτURL>>/openai/deployments/<<σϓϩΠ໊>>/chat/completions?api- version=2024-02-15-preview'
\ -H 'Content-Type: application/json’ \ -H 'api-key: <<ೝূ৘ใ>>' \ -d '{"messages": [{“role":"user","content":"͠ΓͱΓ͠Α͏"}, {“content":"ָͦ͠͏Ͱ͢ͶʂͦΕͰ͸ɺ࢝Ί·͢ɻ\n\nʲϦϯΰʳ", “role”:"assistant"}, {“role":"user","content":"͝·"}]}'

5$จ຺Λཧղͤ͞Α͏ w ࠓ·Ͱͷձ࿩಺༰Λอ࣋ͯ͠"1*ʹ౤͛ΕΔΑ͏ʹͯ͠ΈΑ͏ w ώϯτϫʔυ w ϩʔΧϧετϨʔδ IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

5$νϟοτཤྺΛදࣔ͠Α͏ w Ϧετදࣔʹͯ͠νϟοτͬΆ͘͠Α͏ʂ w σβΠϯ΋ࣗ෼޷Έʹ༡ΜͰΈͯʂ w ώϯτϫʔυ w 4BGF"SFB w
-JTU7JFX w Ϧόʔεදࣔ IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

5$ΤϥʔΛදࣔ w λΠϜΞ΢τΛઃ͚ͯΈΑ͏ w ඵܦͬͯ΋Ϩεϙϯε͕ͳ͚Ε͹ΤϥʔΛฦ͢Α͏ʹͳͲ w Կ͔͠ΒͷΤϥʔΛड͚औͬͨΒμΠΞϩάͷදࣔΛ͠Α͏ʂ w ώϯτϫʔυ w
TIPX%JBMPH w USZDBUDI IUUQTHJUIVCDPNNJYJHSPVQ'MVUUFS5SBJOJOHQVMM

5$ঢ়ଶ؅ཧʹ͍ͭͯ஌Ζ͏ w 4UBUFGVM8JEHFU w 8JEHFUͦͷ΋ͷʹঢ়ଶʢTUBUFʣΛ͍࣋ͬͯΔ w TFU4UBUFΛ໌ࣔతʹߦ͏͜ͱͰ࠶ඳը͞ΕΔͷͰΘ͔Γ΍͍͢ w ଞͷ8JEHFUͰঢ়ଶʹมԽ͕͋ͬͨ࣌ʹ൓өͰ͖ͳ͘ɼখن໛ϓϩδΣΫτ޲͖ w
3JWFSQPE w ঢ়ଶΛ೚ҙͷ৔ॴ͔ΒΞΫηεՄೳʹ͢Δґଘؔ܎஫ೖϑϨʔϜϫʔΫ w #MPD w ΠϕϯτΛ࢖༻ͯ͠ঢ়ଶͷมߋΛτϦΨʔ͠ෳࡶͳঢ়ଶͷϑϩʔΛ؅ཧͰ͖ΔϥΠϒϥϦ w ϏδωεϩδοΫͱ6*Λ؆୯ʹ෼཭Ͱ͖ςετ͕؆୯ʹ

#MPDύλʔϯ TUBUF #MPDΫϥε͸ ৗʹTUBUFΛ࣋ͬͯΔ

#MPDύλʔϯ TUBUF #MPDΫϥε͸ ৗʹTUBUFΛ࣋ͬͯΔ ࣋ͬͯΔ࠷৽ͷTUBUFΛݟͯ 6*Λߏங͢Δ

#MPDύλʔϯ ઒ ʢTUSFBNʣ TUBUF

#MPDύλʔϯ ઒ ʢTUSFBNʣ TUBUF TUBUFΛྲྀ͢ ʢFWFOUʣ

#MPDύλʔϯ ઒ ʢTUSFBNʣ TUBUF TUBUFΛྲྀ͢ ʢFWFOUʣ ྲྀΕͯ͘ΔͷΛ ଴ͪߏ͑ͯΔ ʢMJTUFOʣ

Ϋϩʔδϯά

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

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

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

Video

More Decks by MIXI ENGINEERS

Other Decks in Technology

Featured

Transcript