Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
我が家のフロントエンド開発事情 2015年度版
Search
wakamsha
September 24, 2015
Technology
0
92
我が家のフロントエンド開発事情 2015年度版
2015年9月現在、私が取り組んでいる新規開発案件におけるフロントエンド開発環境周りについてまとめたものです。
wakamsha
September 24, 2015
Tweet
Share
More Decks by wakamsha
See All by wakamsha
Storybook 勉強会
wakamsha
0
180
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
wakamsha
5
5.7k
Vite を使ってアプリケーションに環境変数を参照させる方法を考える
wakamsha
0
1.3k
小さくはじめる車輪の再発明のすゝめ
wakamsha
0
320
JavaScript ( 時々 TypeScript ) で ゆるやかにはじめる関数型プログラミング
wakamsha
6
3.1k
【codegen は難しくない】Swagger から JavaScript ( TypeScript ) コードを自動生成してコーディングを効率化しよう
wakamsha
4
3.5k
My name is WAKAMSHA - I’m a programmer / web frontend engineer.
wakamsha
1
2.1k
それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選
wakamsha
9
14k
LP 制作フローを抜本的に改善した話
wakamsha
1
470
Other Decks in Technology
See All in Technology
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
270
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
390
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
140
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
300
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
120
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
550
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
220
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
280
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
280
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
340
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
220
そもそも AWS FIS について。なぜ今 FIS のハンズオンなのか?などなど
kazzpapa3
2
120
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
KATA
mclloyd
30
14k
Faster Mobile Websites
deanohume
308
31k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Facilitating Awesome Meetings
lara
54
6.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Thoughts on Productivity
jonyablonski
69
4.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Scaling GitHub
holman
461
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
զ͕ՈͷϑϩϯτΤϯυ։ൃࣄ ࢁాथ גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ - Web application development environment -
ࣗݾհ Զͷ໊લΛݴͬͯΈΖ
ࣗݾհ ࢁాथ !XBLBNTIB גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ ϑϩϯτΤϯυΤϯδχΞ ݄ೖࣾ ࣾ ϦΫϧʔτʹདྷΔલ6*σβΠφʔϑϩϯτΤϯυΤϯδχΞͱͯ͠ ۀܥΞϓϦέʔγϣϯͷ6*ઃܭ͔Β։ൃ·ͰΛ͍ͬͯͨ
https://ryorisapuri.jp ྉཧαϓϦ
None
http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
None
͍·औΓΜͰ͍Δࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃڥ େ·͔ͳΞϓϦέʔγϣϯߏ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ
"HFOEB
͍·औΓΜͰ͍Δࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃڥ େ·͔ͳΞϓϦέʔγϣϯߏ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ
৽نαʔϏεΛ 41"Ͱ࡞͍ͬͯ·͢ Single Page Application
None
8FC4FSWFS
݄ 8FC൛ϦϦʔε Ծ Coming soon...
͍·औΓΜͰ͍Δࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃڥ େ·͔ͳΞϓϦέʔγϣϯߏ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ
4JOHMF1BHF"QQMJDBUJPOͳͷͰ +BWB4DSJQU͕େنʹͳΔͷඞવ 5PP'BU'SPOUFOE$PEF
41"ͳͷͰ+BWB4DSJQU͕େنʹͳΔͷඞવ w มԽͷܹ͍͠8FCϑϩϯτΤϯυք۾ w σϑΝΫτελϯμʔυͷੜ·Εʹ͍͘ྖҬ w ͻͱͭͣͭࣗୡͰௐࠪͭͭ͠ɺख୳ΓͰڥߏங w ྲྀߦదʹऔΓೖΕͭͭɺ͔Γ͢͞Λॏࢹ w
ʹ໘ͨ͠Βɺ։ൃͷ࠷தͰ᪳ͳ͘ݟ͢
5ZQF4DSJQU "UZQFETVQFSTFUPG+BWB4DSJQUUIBUDPNQJMFTUPQMBJO+BWB4DSJQU
5ZQF4DSJQU w .JDSPTPGU͕։ൃͨ͠"MU+4 τϥϯεύΠϥ w +BWB4DSJQUͷεʔύʔηοτ શ্Ґޓ w
੩తܕ͚ݴޠ w ܕਪ͋Γ w ѹతଟػೳ w $MBTT *OUFSGBDF "SSPXGVOD (FOFSJD .PEVMF /BNFTQBDFʜ جຊతʹਪʹཔΒͣ શྗͰܕఆٛ͠·͢
5ZQF4DSJQU w +BWB $ʹΠϯεύΠΞ͞Εͨݴޠ༷ w &$."4DSJQUͷ༷Λੵۃతʹ࠾༻͍ͯ͠Δ w ίϯύΠϧޙͷ+4ίʔυඒ͘͠ಡΈқ͍ w طଘ+4ϥΠϒϥϦͷଟ͕͑͘Δ
ॆ࣮ͷܕఆٛϑΝΠϧ
7BOJMMB+4ΑΓͣͬͱߴػೳ͕ͩɺ ಈతܕ͚ͳͷେن։ൃʹ͓͍ͯෆར ෳਓͰ։ൃ͢ΔҎ্ɺܕඞਢཁ݅ ͋ΔఔίʔσΟϯάʹ౷੍͕ͱΕΔ ͦͷ΄͔ީิʹͳͬͨ+4τϥϯεύΠϥ ࠓޙ&4͕ਁಁ͍ͯ͘͜͠ͱΛߟ͑Δͱ ͜ͷ࣌ظʹ͋͑ͯબ͢Δඞཁੑ͍ͱ
ͦͷ΄͔ީิʹͳͬͨ+4τϥϯεύΠϥ &4Ͱॻ͔Εͨ+4ίʔυΛ&4ʹม͢Δ τϥϯεύΠϥ ࠓͷ०ͳٕज़Ͱ͋Δ͕ɺ ΓܕΛ࣋ͨͳ͍ͱ͍͏ཧ༝͔Β/( &4ͷจ๏5ZQF4DSJQUͰ͍͍ͩͨॻ͚ΔͷͰ ͋͑ͯͪ͜Βʹ߆Δཧ༝ബ͍
"OHVMBS+4 4VQFSIFSPJD+BWB4DSJQU.78'SBNFXPSL
"OHVMBS+4 w (PPHMF͕։ൃͨ͠ϑϧελοΫ+4ϑϨʔϜϫʔΫ w ѹతଟػೳ w %BUBCJOEJOH 3PVUJOH $VTUPNEJSFDUJWF %*
1SPNJTF BOENPSFʜ w ಛʹڧྗͳϧʔςΟϯάػೳ41"ʹ͏͚ͬͯͭ w "OHVMBS6*3PVUFSϞδϡʔϧͱΈ߹ΘͤΕ࠷ڧ
$VTUPNEJSFDUJWF ಠࣗͷػೳΛ࣮ͨ͠λάϓϩύςΟΛఆٛͰ͖Δ
"OHVMBS+4º5ZQF4DSJQU 5ZQF4DSJQUͱͷ૬ੑ͕ൈ܈ ίϯτϩʔϥɺαʔϏεɺσΟϨΫςΟϒͳͲ ػೳผʹΫϥεԽ͍͢͠ ͨͩ͠ɺݟগͳΊ άά࣮ͬͯફతͳใຆͲग़ͯ͜ͳ͍
ࠓ࠷०ͳ+4ϑϨʔϜϫʔΫ "OHVMBS+4ͱൺֱͯ͠ݟ͕গͳ͍ ॳ಄·ͩใ͕গͳ͔ͬͨ ͦͷ΄͔ީิʹͳͬͨ+4ϑϨʔϜϫʔΫ +49ͷจ๏͕ಠಛ͗ͯ͢ ೃછΊΔࣗ৴͕࣋ͯͳ͔ͬͨ ҙࣝߴ͍ܥͷਓ͕ͨͪͨΒਪ͍ͯ͠Δ͕ Ͳͷൃݴඑଣ͍͘͞ҹ
3FBDU
"OHVMBS+4͕ྲྀߦΔલօ͜Εʹເதͩͬͨ ΘΓͱૉͳ.7$ 1 ͕ॻ͚Δͷҹ .BSJPOFUUFͱΈ߹ΘͤΕɺࠞಱͱ͕ͪ͠ͳ #BDLCPOFͷίʔυʹ͋Δఔ౷੍͕ͱΕΔ ͜Ε͔Β࡞ΔΞϓϦͷنΛߟ͑Δͱ ྗෆΛײ͡Δ ͦͷ΄͔ީิʹͳͬͨ+4ϑϨʔϜϫʔΫ
$SFBUF+4 "TVJUFPG+BWB4DSJQUMJCSBSJFTBOEUPPMTEFTJHOFEGPSXPSLJOHXJUI)5.-
w $BOWBT"VEJPΛ͍͍ײ͡ʹ͓ੈͯ͘͠ΕΔ w ֤छ"1*͕'MBTI "4 ͷͦΕͱࠅࣅ͍ͯ͠Δ w 5ZQF4DSJQUͱͷ૬ੑ͕ൈ܈ w ϦονίϯςϯπΛදݱ͢ΔՕॴͰ༻
w $BOWBTΛͬͨΞχϝʔγϣϯ w ΦʔσΟΦϑΝΠϧͷ࠶ੜ w ϝσΟΞϑΝΠϧͷඇಉظಡΈࠐΈ $SFBUF+4
͍·औΓΜͰ͍Δࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃڥ େ·͔ͳΞϓϦέʔγϣϯߏ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ
ྲྀߦదʹऔΓೖΕΔ ͔Γ͢͞આ໌͢͠͞Λॏࢹ େࣄͳ͜ͱͳͷͰೋճݴ͍·ͨ͠
None
+BWB4DSJQU࣮ߦڥ ͜ΕΛϕʔεʹ։ൃڥΛߏங͠ɺ ༷ʑͳπʔϧΛಈ͔͢ Ұ࣌ظɺJPKTͱରཱ ͍ͯͨͬ͠Ά͍͚Ͳɺ ࠷ऴతʹղͯ͠౷߹ɻ7FS͕ϦϦʔε OPEFKT
λεΫϥϯφʔ (VMQ w 5ZQF4DSJQU 4$44 +BEFͷίϯύΠϧ w ϩʔΧϧαʔόʔͷىಈ w 8FCϑΥϯτͷੜ
w ͦͷଞͳΜͰʜ $ npm install -g gulp ৄ͘͠ฐࣾͷϒϩάΛಡΊʂ IUUQUFDISFDSVJUNQDPKQGSPOUFOEHFUUJOHTUBSUFEHVMQTBTTCPVSCPO
ϑϩϯτΤϯυؔ࿈ͷύοέʔδཧπʔϧ #PXFS "OHVMBS+4 $SFBUF+4 #PPUTUSBQ ͱ͍ͬͨ֎෦ϥΠϒϥϦશͯ͜Εܦ༝Ͱ औಘཧ #SPXTFSJGZ8FCQBDLͷ࠾༻ݕ౼͕ͨ͠ɺ ॾʑͱෆ߹͕͋ͬͨͷͰ٫Լ
$44Λੜ͢ΔϓϦϓϩηοαʔݴޠ 4$44 (VMQܦ༝Ͱ༻͢Δ ͨͩ͠-FTT ͯΊʔμϝͩ 4BTTͰ4UZMVTͰ͓͖ͳͷΛͲ͏ͧ
)5.-Λੜ͢ΔϓϦϓϩηοαʔݴޠ +BEF (VMQܦ༝Ͱ༻͢Δ )BNM4MJNͱඇৗʹΑ͘ࣅͨจ๏͕ͩɺ ػೳͦΕΒʹҰஈྼΔ
+BWB4DSJQUͷϢχοτςετπʔϧ +BTNJOFº,BSNB "OHVMBS+4ͷඪ४ςεςΟϯάϑϨʔϜϫʔΫ ৄ͘͠ฐࣾͷϒϩάΛಡΊʂ IUUQUFDISFDSVJUNQDPKQGSPOUFOEQPTU ςετΛಋೖ͢Δ͔ɺΤϯδχΞͷεΩϧͱ Ϧιʔε ظؒ ʹԠͯ͡ॊೈʹஅ͢Δ͜ͱ εΩϧPSظؒʹෆ͕҆͋ΔͷͳΒ
ܿ͘ΓࣺͯΑ͏
None
5ZQF4DSJQUίϯύΠϥࣗମ͕*%&༻"1*Λ ͍࣋ͬͯΔͨΊɺΤσΟλʹίʔυิͱ͍ͬͨػ ೳΛ͍࣋ͨͤ͢ ίʔυิ5ZQF4DSJQUͷ߹ 7JTVBM4UVEJPͱಉͷิػೳ͕ظͰ͖Δ *OUFMMJ+ͱ4VCMJNF5FYU Λ͍ͬͯ·͢
͍·औΓΜͰ͍Δࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃڥ େ·͔ͳΞϓϦέʔγϣϯߏ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ
"OHVMBS6*and5ZQF4DSJQU "SDIJUFDUVSF IUUQTHJUIVCDPNXBLBNTIBBOHVMBSVJ@UZQFTDSJQU
͍·औΓΜͰ͍Δࣄ 41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃڥ େ·͔ͳΞϓϦέʔγϣϯߏ αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ
"1*υΩϡϝϯτ ඞਢ
"1*υΩϡϝϯτඞਢ w αʔόʔΫϥΠΞϯτ"1*ͷΈͰΓऔΓ͢Δ w ͲͷΑ͏ͳ +40/ ܗࣜͰ௨৴͢Δͷ͔ৗʹѲ͓ͯ͘͜͠ͱ͕ඞཁ w ։ൃதυΩϡϝϯτΛৗʹ࠷৽ʹ͓ͯ͘͜͠ͱͰೝࣝʹᴥᴪ͕ੜ·Ε ΔͷΛ͙
"1*#MVFQSJOU༷Ͱॻ͔Εͨ .BSLEPXOϑΝΠϧ HVMQBHMJPͰ.BSLEPXOϑΝΠϧ͔Β ੩త)5.-Λੜ దͳαʔόʔʹΞοϓϩʔυ͢Ε ཱͳ"1*υΩϡϝϯτϖʔδ͕ "1*υΩϡϝϯτ࡞πʔϧ HVMQBHMJP "1*#MVFQSJOU ৄ͘͠ฐࣾͷϒϩάΛಡΊʂ
IUUQUFDISFDSVJUNQDPKQEFWUPPMTQPTU
%FNP IUUQTHJUIVCDPNXBLBNTIBUSZ@HVMQUSFFNBTUFSUSZ@BQJ
2" "OZ2VFTUJPOT
5IBOLZPV