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
86
我が家のフロントエンド開発事情 2015年度版
2015年9月現在、私が取り組んでいる新規開発案件におけるフロントエンド開発環境周りについてまとめたものです。
wakamsha
September 24, 2015
Tweet
Share
More Decks by wakamsha
See All by wakamsha
Storybook 勉強会
wakamsha
0
150
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
wakamsha
5
5.5k
Vite を使ってアプリケーションに環境変数を参照させる方法を考える
wakamsha
0
1.2k
小さくはじめる車輪の再発明のすゝめ
wakamsha
0
300
JavaScript ( 時々 TypeScript ) で ゆるやかにはじめる関数型プログラミング
wakamsha
6
3.1k
【codegen は難しくない】Swagger から JavaScript ( TypeScript ) コードを自動生成してコーディングを効率化しよう
wakamsha
4
3.4k
My name is WAKAMSHA - I’m a programmer / web frontend engineer.
wakamsha
1
2.1k
それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選
wakamsha
9
14k
LP 制作フローを抜本的に改善した話
wakamsha
1
460
Other Decks in Technology
See All in Technology
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
100
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
160
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
360
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
170
分解して理解する Aspire
nenonaninu
2
1.1k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
150
実は強い 非ViTな画像認識モデル
tattaka
3
1.2k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
700
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
170
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
600
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for humans not robots
tammielis
250
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
BBQ
matthewcrist
87
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Bash Introduction
62gerente
611
210k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Thoughts on Productivity
jonyablonski
69
4.5k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
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