我が家のフロントエンド開発事情 2015年度版

Slide 1

Slide 1 text

զ͕ՈͷϑϩϯτΤϯυ։ൃࣄ৘ ࢁా௚थ גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ - Web application development environment -

Slide 2

Slide 2 text

ࣗݾ঺հ Զͷ໊લΛݴͬͯΈΖ

Slide 3

Slide 3 text

ࣗݾ঺հ ࢁా௚थ !XBLBNTIB גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ ϑϩϯτΤϯυΤϯδχΞ ೥݄ೖࣾ ࣾ໨ ϦΫϧʔτʹདྷΔલ͸6*σβΠφʔϑϩϯτΤϯυΤϯδχΞͱͯ͠ ۀ຿ܥΞϓϦέʔγϣϯͷ6*ઃܭ͔Β։ൃ·ͰΛ΍͍ͬͯͨ

Slide 4

Slide 4 text

https://ryorisapuri.jp ྉཧαϓϦ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

͍·औΓ૊ΜͰ͍Δ࢓ࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ େ·͔ͳΞϓϦέʔγϣϯߏ੒ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ "HFOEB

Slide 9

Slide 9 text

͍·औΓ૊ΜͰ͍Δ࢓ࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ େ·͔ͳΞϓϦέʔγϣϯߏ੒ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

Slide 10

Slide 10 text

৽نαʔϏεΛ 41"Ͱ࡞͍ͬͯ·͢ Single Page Application

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

8FC4FSWFS

Slide 13

Slide 13 text

೥݄຤ 8FC൛ϦϦʔε Ծ Coming soon...

Slide 14

Slide 14 text

͍·औΓ૊ΜͰ͍Δ࢓ࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ େ·͔ͳΞϓϦέʔγϣϯߏ੒ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

Slide 15

Slide 15 text

4JOHMF1BHF"QQMJDBUJPOͳͷͰ +BWB4DSJQU͕େن໛ʹͳΔͷ͸ඞવ 5PP'BU'SPOUFOE$PEF

Slide 16

Slide 16 text

41"ͳͷͰ+BWB4DSJQU͕େن໛ʹͳΔͷ͸ඞવ w มԽͷܹ͍͠8FCϑϩϯτΤϯυք۾ w σϑΝΫτελϯμʔυͷੜ·Εʹ͍͘ྖҬ w ͻͱͭͣͭࣗ෼ୡͰௐࠪͭͭ͠ɺख୳ΓͰ؀ڥߏங w ྲྀߦ͸ద౓ʹऔΓೖΕͭͭɺ෼͔Γ΍͢͞Λॏࢹ w ໰୊ʹ௚໘ͨ͠Βɺ։ൃͷ࠷தͰ΋᪳᪯ͳ͘ݟ௚͢

Slide 17

Slide 17 text

5ZQF4DSJQU "UZQFETVQFSTFUPG+BWB4DSJQUUIBUDPNQJMFTUPQMBJO+BWB4DSJQU

Slide 18

Slide 18 text

5ZQF4DSJQU w .JDSPTPGU͕։ൃͨ͠"MU+4 τϥϯεύΠϥ w +BWB4DSJQUͷεʔύʔηοτ ׬શ্Ґޓ׵ w ੩తܕ෇͚ݴޠ w ܕਪ࿦͋Γ w ѹ౗తଟػೳ w $MBTT *OUFSGBDF "SSPXGVOD (FOFSJD .PEVMF /BNFTQBDFʜ جຊతʹ͸ਪ࿦ʹཔΒͣ શྗͰܕఆٛ͠·͢

Slide 19

Slide 19 text

5ZQF4DSJQU w +BWB $ʹΠϯεύΠΞ͞Εͨݴޠ࢓༷ w &$."4DSJQUͷ࢓༷Λੵۃతʹ࠾༻͍ͯ͠Δ w ίϯύΠϧޙͷ+4ίʔυ͸ඒ͘͠ಡΈқ͍ w طଘ+4ϥΠϒϥϦͷଟ͕͘࢖͑Δ ॆ࣮ͷܕఆٛϑΝΠϧ

Slide 20

Slide 20 text

7BOJMMB+4ΑΓ͸ͣͬͱߴػೳ͕ͩɺ ಈతܕ෇͚ͳͷ͸େن໛։ൃʹ͓͍ͯෆར ෳ਺ਓͰ։ൃ͢ΔҎ্ɺܕ͸ඞਢཁ݅ ͋Δఔ౓ίʔσΟϯάʹ΋౷੍͕ͱΕΔ ͦͷ΄͔ީิʹͳͬͨ+4τϥϯεύΠϥ ࠓޙ&4͕ਁಁ͍ͯ͘͜͠ͱΛߟ͑Δͱ ͜ͷ࣌ظʹ͋͑ͯબ୒͢Δඞཁੑ͸௿͍ͱ΋

Slide 21

Slide 21 text

ͦͷ΄͔ީิʹͳͬͨ+4τϥϯεύΠϥ &4Ͱॻ͔Εͨ+4ίʔυΛ&4ʹม׵͢Δ τϥϯεύΠϥ ࠓ೥ͷ०ͳٕज़Ͱ͸͋Δ͕ɺ ΍͸ΓܕΛ࣋ͨͳ͍ͱ͍͏ཧ༝͔Β/( &4ͷจ๏͸5ZQF4DSJQUͰ΋͍͍ͩͨॻ͚ΔͷͰ ͋͑ͯͪ͜Βʹ߆Δཧ༝͸ബ͍

Slide 22

Slide 22 text

"OHVMBS+4 4VQFSIFSPJD+BWB4DSJQU.78'SBNFXPSL

Slide 23

Slide 23 text

"OHVMBS+4 w (PPHMF͕։ൃͨ͠ϑϧελοΫ+4ϑϨʔϜϫʔΫ w ѹ౗తଟػೳ w %BUBCJOEJOH 3PVUJOH $VTUPNEJSFDUJWF %* 1SPNJTF BOENPSFʜ w ಛʹڧྗͳϧʔςΟϯάػೳ͸41"ʹ͏͚ͬͯͭ w "OHVMBS6*3PVUFSϞδϡʔϧͱ૊Έ߹ΘͤΕ͹࠷ڧ

Slide 24

Slide 24 text

$VTUPNEJSFDUJWF ಠࣗͷػೳΛ࣮૷ͨ͠λά΍ϓϩύςΟΛఆٛͰ͖Δ

Slide 25

Slide 25 text

"OHVMBS+4º5ZQF4DSJQU 5ZQF4DSJQUͱͷ૬ੑ͕ൈ܈ ίϯτϩʔϥɺαʔϏεɺσΟϨΫςΟϒͳͲ ػೳผʹΫϥεԽ͠΍͍͢ ͨͩ͠ɺ஌ݟ͸গͳΊ άάͬͯ΋࣮ફతͳ৘ใ͸ຆͲग़ͯ͜ͳ͍

Slide 26

Slide 26 text

ࠓ೥࠷΋०ͳ+4ϑϨʔϜϫʔΫ "OHVMBS+4ͱൺֱͯ͠஌ݟ͕গͳ͍ ೥ॳ಄͸·ͩ৘ใ͕গͳ͔ͬͨ ͦͷ΄͔ީิʹͳͬͨ+4ϑϨʔϜϫʔΫ +49ͷจ๏͕ಠಛ͗ͯ͢ ೃછΊΔࣗ৴͕࣋ͯͳ͔ͬͨ ҙࣝߴ͍ܥͷਓ͕ͨͪ΍ͨΒਪ͍ͯ͠Δ͕ Ͳͷൃݴ΋එଣ͍͘͞ҹ৅ 3FBDU

Slide 27

Slide 27 text

"OHVMBS+4͕ྲྀߦΔલ͸օ͜Εʹເதͩͬͨ ΘΓͱૉ௚ͳ.7$ 1 ͕ॻ͚Δͷ͸޷ҹ৅ .BSJPOFUUFͱ૊Έ߹ΘͤΕ͹ɺࠞಱͱ͕ͪ͠ͳ #BDLCPOFͷίʔυʹ΋͋Δఔ౓౷੍͕ͱΕΔ ͜Ε͔Β࡞ΔΞϓϦͷن໛Λߟ͑Δͱ ΍΍ྗෆ଍Λײ͡Δ ͦͷ΄͔ީิʹͳͬͨ+4ϑϨʔϜϫʔΫ

Slide 28

Slide 28 text

$SFBUF+4 "TVJUFPG+BWB4DSJQUMJCSBSJFTBOEUPPMTEFTJHOFEGPSXPSLJOHXJUI)5.-

Slide 29

Slide 29 text

w $BOWBT΍"VEJP౳Λ͍͍ײ͡ʹ͓ੈ࿩ͯ͘͠ΕΔ w ֤छ"1*͕'MBTI "4 ͷͦΕͱࠅࣅ͍ͯ͠Δ w 5ZQF4DSJQUͱͷ૬ੑ͕ൈ܈ w ϦονίϯςϯπΛදݱ͢ΔՕॴͰ࢖༻ w $BOWBTΛ࢖ͬͨΞχϝʔγϣϯ w ΦʔσΟΦϑΝΠϧͷ࠶ੜ w ϝσΟΞϑΝΠϧͷඇಉظಡΈࠐΈ $SFBUF+4

Slide 30

Slide 30 text

͍·औΓ૊ΜͰ͍Δ࢓ࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ େ·͔ͳΞϓϦέʔγϣϯߏ੒ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

Slide 31

Slide 31 text

ྲྀߦ͸ద౓ʹऔΓೖΕΔ ෼͔Γ΍͢͞આ໌͠΍͢͞Λॏࢹ େࣄͳ͜ͱͳͷͰೋճݴ͍·ͨ͠

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

+BWB4DSJQU࣮ߦ؀ڥ ͜ΕΛϕʔεʹ։ൃ؀ڥΛߏங͠ɺ ༷ʑͳπʔϧΛಈ͔͢ Ұ࣌ظɺJPKTͱରཱ ͍ͯͨͬ͠Ά͍͚Ͳɺ ࠷ऴతʹ࿨ղͯ͠౷߹ɻ7FS͕ϦϦʔε OPEFKT

Slide 34

Slide 34 text

λεΫϥϯφʔ (VMQ w 5ZQF4DSJQU 4$44 +BEFͷίϯύΠϧ w ϩʔΧϧαʔόʔͷىಈ w 8FCϑΥϯτͷੜ੒ w ͦͷଞͳΜͰ΋ʜ $ npm install -g gulp ৄ͘͠͸ฐࣾͷϒϩάΛಡΊʂ IUUQUFDISFDSVJUNQDPKQGSPOUFOEHFUUJOHTUBSUFEHVMQTBTTCPVSCPO

Slide 35

Slide 35 text

ϑϩϯτΤϯυؔ࿈ͷύοέʔδ؅ཧπʔϧ #PXFS "OHVMBS+4 $SFBUF+4 #PPUTUSBQ ͱ͍ͬͨ֎෦ϥΠϒϥϦ͸શͯ͜Εܦ༝Ͱ औಘ؅ཧ #SPXTFSJGZ΍8FCQBDLͷ࠾༻΋ݕ౼͕ͨ͠ɺ ॾʑͱෆ౎߹͕͋ͬͨͷͰ٫Լ

Slide 36

Slide 36 text

$44Λੜ੒͢ΔϓϦϓϩηοαʔݴޠ 4$44 (VMQܦ༝Ͱ࢖༻͢Δ ͨͩ͠-FTT ͯΊʔ͸μϝͩ 4BTTͰ΋4UZMVTͰ΋͓޷͖ͳͷΛͲ͏ͧ

Slide 37

Slide 37 text

)5.-Λੜ੒͢ΔϓϦϓϩηοαʔݴޠ +BEF (VMQܦ༝Ͱ࢖༻͢Δ )BNM΍4MJNͱඇৗʹΑ͘ࣅͨจ๏͕ͩɺ ػೳ͸ͦΕΒʹҰஈྼΔ

Slide 38

Slide 38 text

+BWB4DSJQUͷϢχοτςετπʔϧ +BTNJOFº,BSNB "OHVMBS+4ͷඪ४ςεςΟϯάϑϨʔϜϫʔΫ ৄ͘͠͸ฐࣾͷϒϩάΛಡΊʂ IUUQUFDISFDSVJUNQDPKQGSPOUFOEQPTU ςετΛಋೖ͢Δ͔͸ɺΤϯδχΞͷεΩϧͱ Ϧιʔε ظؒ ʹԠͯ͡ॊೈʹ൑அ͢Δ͜ͱ εΩϧPSظؒʹෆ͕҆͋ΔͷͳΒ ܿ͘੾ΓࣺͯΑ͏

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

5ZQF4DSJQU͸ίϯύΠϥࣗମ͕*%&༻"1*Λ ͍࣋ͬͯΔͨΊɺΤσΟλʹίʔυิ׬ͱ͍ͬͨػ ೳΛ࣋ͨͤ΍͍͢ ίʔυิ׬5ZQF4DSJQUͷ৔߹ 7JTVBM4UVEJPͱಉ౳ͷิ׬ػೳ͕ظ଴Ͱ͖Δ ๻͸*OUFMMJ+ͱ4VCMJNF5FYU Λ࢖͍ͬͯ·͢

Slide 41

Slide 41 text

͍·औΓ૊ΜͰ͍Δ࢓ࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ େ·͔ͳΞϓϦέʔγϣϯߏ੒ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

Slide 42

Slide 42 text

"OHVMBS6*and5ZQF4DSJQU "SDIJUFDUVSF IUUQTHJUIVCDPNXBLBNTIBBOHVMBSVJ@UZQFTDSJQU

Slide 43

Slide 43 text

͍·औΓ૊ΜͰ͍Δ࢓ࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ େ·͔ͳΞϓϦέʔγϣϯߏ੒ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

Slide 44

Slide 44 text

"1*υΩϡϝϯτ͸ ඞਢ

Slide 45

Slide 45 text

"1*υΩϡϝϯτ͸ඞਢ w αʔόʔΫϥΠΞϯτ͸"1*ͷΈͰ΍ΓऔΓ͢Δ w ͲͷΑ͏ͳ +40/ ܗࣜͰ௨৴͢Δͷ͔ৗʹ೺Ѳ͓ͯ͘͜͠ͱ͕ඞཁ w ։ൃத΋υΩϡϝϯτΛৗʹ࠷৽ʹ͓ͯ͘͜͠ͱͰೝࣝʹᴥᴪ͕ੜ·Ε ΔͷΛ๷͙

Slide 46

Slide 46 text

"1*#MVFQSJOU࢓༷Ͱॻ͔Εͨ .BSLEPXOϑΝΠϧ HVMQBHMJPͰ.BSLEPXOϑΝΠϧ͔Β ੩త)5.-Λੜ੒ ద౰ͳαʔόʔʹΞοϓϩʔυ͢Ε͹ ཱ೿ͳ"1*υΩϡϝϯτϖʔδ͕׬੒ "1*υΩϡϝϯτ࡞੒πʔϧ HVMQBHMJP "1*#MVFQSJOU ৄ͘͠͸ฐࣾͷϒϩάΛಡΊʂ IUUQUFDISFDSVJUNQDPKQEFWUPPMTQPTU