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
最新フロントエンド事情2016年版
Search
Takanori Maeda
April 27, 2016
Technology
1
770
最新フロントエンド事情2016年版
社内LT大会用スライド
※非フロントエンドエンジニア向け
Takanori Maeda
April 27, 2016
Tweet
Share
More Decks by Takanori Maeda
See All by Takanori Maeda
Why Redux?
maechabin
0
150
モバイルWeb開発最前線 -PWA開発パターン「PRPL」の紹介-
maechabin
0
560
Why React and not jQuery?
maechabin
0
220
Other Decks in Technology
See All in Technology
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
660
MapLibreとAmazon Location Service
dayjournal
1
150
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
260
反実仮想機械学習とは何か
usaito
PRO
11
4.6k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
120
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
本当のAWS基礎
toru_kubota
0
520
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
470
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
250
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Done Done
chrislema
178
15k
Unsuck your backbone
ammeep
663
57k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
The Mythical Team-Month
searls
216
42k
Building Your Own Lightsaber
phodgson
99
5.7k
Building Adaptive Systems
keathley
31
1.9k
Automating Front-end Workflow
addyosmani
1356
200k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Code Review Best Practice
trishagee
55
15k
Producing Creativity
orderedlist
PRO
337
39k
Transcript
࠷৽ϑϩϯτΤϯυࣄ 2016൛ 2016-04-27 @maechabin
ैདྷͷϑϩϯτΤϯυ
ैདྷͷϑϩϯτΤϯυʢʙ2010ʣ HTML CSS JavaScript
ैདྷͷϑϩϯτΤϯυʢʙ2010ʣ HTML CSS JavaScript ͱΓ͋͑ͣɺ͜ͷ3ͭͷ͕ࣝ͋ Εेͩͬͨ
ݱࡏʁ
ݱࡏͷϑϩϯτΤϯυʢʙ2016ʣ HTML CSS JavaScript + Node.js, npm, TypeScript, ES2015, Babel
browserify, webpack, gulp, grunt, Jasmin, Mocha, React, Angular, ESLint, Jade, Express, Sass, Less, PostCSS, BEM, cssnext etc..
2010લʹԿ͕ى͖ͨʁ
ͦͷ̍
ͦͷ̍. HTML5ͷొ HTML̑ͷొʹΑΓɺϒϥβͷੑೳ্͕ 㱺 V8Τϯδϯͷੜ
ͦͷ̎
ͦͷ2. Node.jsͷීٴ V8ΤϯδϯΛͬͨNode.js͕ීٴ 㱺 αʔόʔαΠυͰJavaScript͕ಈ͘Α͏ʹͳͬͨ
͜ΕʹΑΓ
αʔόʔαΠυΞϓϦέʔγϣϯSPAʢγϯά ϧϖʔδΞϓϦέʔγϣϯʣͷΑ͏ͳߴͰෳࡶ ͳΞϓϦέʔδϣϯΛ։ൃͰ͖ΔΑ͏ʹͳͬͨ ͦΕʹ͍ɺେن։ൃʹ͑ΒΕΔ৽͍͠։ൃ ख๏ݴޠ༷͕ٻΊΒΕΔΑ͏ʹͳͬͨ
ͭ·Γ
͜ΕΒͷ͕ࣝඞཁͱͳͬͨʂ HTML CSS JavaScript + Node.js, npm, TypeScript, ES2015, Babel
browserify, webpack, gulp, grunt, Jasmin, Mocha, React, Angular, ESLint, Jade, Express, Sass, Less, PostCSS, BEM, cssnext etc..
ཧ͢Δͱ
ʻ৽͍͠ݴޠɺ༷ʼ ɾEcmaScript 2015ʢES6ʣ http://www.ecma-international.org/ecma-262/6.0/ ɾTypeScript https://www.typescriptlang.org/ classߏจ, ੩తܕ͚, ϒϩοΫείʔϓ, ί
ʔϧόοΫࠈରࡦ, ϞδϡʔϧγεςϜͳͲ େن։ൃʹରԠ
ʻτϥϯεύΠϥʼ ɾBabel http://babeljs.io/ ઌ΄Ͳͷ৽͍͠ݴޠϒϥβͰಈ͔ͳ͍ ͷͰɺϒϥβͰಈ͘JavaScriptʢES5ʣʹม ͯ͘͠ΕΔ
ʻϏϧυπʔϧʼ ɾBrowserify http://browserify.org/ ɾWebpack https://webpack.github.io/ Node.jsES2015ͷϞδϡʔϧγεςϜͷಋೖʹΑΓɺ ϞδϡʔϧؒʹґଘؔΛ࣋ͨͤΒΕΔΑ͏ʹͳͬͨ ͕ɺBabelͯ͜͠Ε·ͨϒϥβͰಡΊͳ͍ͷͰɺ ͜ͷґଘؔΛҡ࣋ͨ͠··ɺϒϥβͰಡΊΔJSϑ ΝΠϧʹϏϧυͯ͘͠ΕΔ
ʻMV*ϑϨʔϜϫʔΫʼ ɾReact + Flux https://facebook.github.io/react/ http://facebook.github.io/flux/ ɾAngular 1 / Angular
2 https://angularjs.org/ ɾVue.js https://jp.vuejs.org/ JavaScriptͷߴԽʹΑΔෳࡶͳSPAΛ։ൃ͢ΔͨΊ ͷΞʔΩςΫνϟ
ʻഁ͠ͳ͍CSSͷϧʔϧʼ ɾBEM https://en.bem.info/ ɾSMACSS https://smacss.com/ja େن։ൃʹͳΔͱഁ͕ͪ͠ͳCSSΛഁ ͤ͞ͳ͍Α͏ʹ͢ΔͨΊͷCSSઃܭࢥ
ʻഁ͠ͳ͍CSSΛॻͨ͘Ίͷख๏ʼ ɾSass http://sass-lang.com/ ɾLess http://less-ja.studiomohawk.com/ ɾPostCSS http://postcss.org/ BEMSMACSSΛॻ͖ͯ͘͘͢͠ΕΔ ϑΝΠϧΛׂͨ͠େن։ൃʹରԠ
ʻϢχοτςετϑϨʔϜϫʔΫʼ ɾMocha + Chai or power-assert https://mochajs.org/ http://chaijs.com/ https://github.com/power-assert-js/power-assert ɾJasmin
http://jasmine.github.io/ ɾJest https://facebook.github.io/jest/ ΞϓϦέʔγϣϯ͕ෳࡶԽɾେنԽʹΑΓϑϩ ϯτΤϯυͰςετ͕ඞਢʹͳ͖͍ͬͯͯΔ
ʻߏจνΣοΧʔʼ ɾESLint + Airbnb JavaScript Style Guide http://eslint.org/ https://github.com/airbnb/javascript େਓͰಉ͡ίʔυͷॻ͖ํʹͳΔΑ͏ߏจ
ͷνΣοΫΛͯ͘͠ΕΔͷͱɺλΠϙ͛Δ ࣗͨͪͰϧʔϧΛ࡞Δ͜ͱͰ͖Δ
͜ΕΒΛͲ͏ͨ͠Β͍͍ͷʁʁ
ʻλεΫϥϯφʔʼ ɾgulp http://gulpjs.com/ ɾGrunt http://gruntjs.com/ ɾnpm-script https://docs.npmjs.com/misc/scripts ͜Ε·Ͱհͨ͠πʔϧͨͪΛλεΫͱͯ͠· ͱΊͯɺඞཁͳ࣌ʹ࣮ߦͯ͘͠ΕΔ
ʻδΣωϨʔλʔʼ ɾYeoman http://yeoman.io/ ͜Ε·Ͱհͨ͠πʔϧͨͪΛɺίϚϯυͻ ͱͭͰ४උͯ͘͠ΕΔ railsͰݴ͏scaffoldͷΑ͏ͳͷ
ཧʁʁ
ʻύοέʔδཧʼ ɾnpm https://www.npmjs.com/ NodeύοέʔδϚωʔδϟʔɻ͜Ε·Ͱհͨ͠πʔ ϧ΄΅npmܦ༝ͰΠϯετʔϧɺཧͰ͖ΔΑ͏ʹͳ ͍ͬͯΔ Node.jsΛΠϯετʔϧ͢ΔͱࣗಈͰΠϯετʔϧ͞Ε Δ
ৄࡉެࣜυΩϡϝϯτΛݟ·͠ΐ͏