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
190
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
wakamsha
5
5.7k
Vite を使ってアプリケーションに環境変数を参照させる方法を考える
wakamsha
0
1.3k
小さくはじめる車輪の再発明のすゝめ
wakamsha
0
330
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
Eval-Centric AI: Agent 開発におけるベストプラクティスの探求
asei
0
130
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2.4k
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
160
20250807_Kiroと私の反省会
riz3f7
0
230
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
8
340
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
750
結局QUICで通信は速くなるの?
kota_yata
7
7.1k
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
6.6k
Cloud WANの基礎から応用~少しだけDeep Dive~
masakiokuda
3
110
Rubyの国のPerlMonger
anatofuz
3
740
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
370
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
710
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
How to Ace a Technical Interview
jacobian
278
23k
Fireside Chat
paigeccino
38
3.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Designing Experiences People Love
moore
142
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
The World Runs on Bad Software
bkeepers
PRO
70
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Building Applications with DynamoDB
mza
96
6.5k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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