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
成長するアプリケーションとJSフレームワーク
Search
Edward Fox
April 19, 2016
Technology
0
310
成長するアプリケーションとJSフレームワーク
20160419
Meguro.es #3
Edward Fox
April 19, 2016
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
590
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
69
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
510
Repro basketball club
edwardkenfox
0
210
Introduction to UX Optimizer
edwardkenfox
0
82
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
260
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
110
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
350
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1k
Other Decks in Technology
See All in Technology
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
540
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
270
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Taming you application's environments
salaboy
0
200
複雑なState管理からの脱却
sansantech
PRO
1
160
TypeScript、上達の瞬間
sadnessojisan
47
14k
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
220
"とにかくやってみる"で始めるAWS Security Hub
maimyyym
2
100
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
2
360
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Unsuck your backbone
ammeep
668
57k
Ruby is Unlike a Banana
tanoku
97
11k
Scaling GitHub
holman
458
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Music & Morning Musume
bryan
46
6.2k
How STYLIGHT went responsive
nonsquared
95
5.2k
Optimizing for Happiness
mojombo
376
70k
Transcript
͢ΔΞϓϦέʔγϣϯͱ JSϑϨʔϜϫʔΫ EDWARD FOX @MEGURO.ES 2016/04/19
EDWARD FOX - DEVELOPER @ REPRO INC. - ROR, JAVASCRIPT,
AWS - UI/UX, TEAM DEVELOPMENT
REPRO.IO - ϞόΠϧΞϓϦ͚ੳˍ ϚʔέςΟϯάπʔϧ
None
ࠓ͢͜ͱ - ΞϓϦέʔγϣϯ͕ɾ֦େ͠ ͍ͯ͘தͰ͍͔ʹJSͷϑϨʔϜ ϫʔΫΛબͼҭ͖͔ͯͯͨ
ࠓ͞ͳ͍͜ͱ - VUE.JSͷػೳɾར༻ํ๏
ελʔτΞοϓ = εϐʔυ + ΫΦϦςΟ = ٕज़બ͕େࣄ
- AWS? AZURE? GCP? - RUBY? PHP? GO? - REACT?
ANGULAR? RIOT? - ETC…
ॳظREPRO 1 - JQUERY - BACKBONE - RAILS-ASSETS !
ॳظREPRO 2 - ͍͔ͭ͘ͷػೳ͕ಠཱͯ͠ଘࡏ - ΞϓϦέʔγϣϯͷنখ͍͞
࣍ୈʹ૿͑Δ - ػೳͷ֦ॆ - ސ٬ͷཁ => ࠶ར༻Ͱ͖Δίϯϙʔωϯτͱ ͦΕΛࢧ͑ΔϑϨʔϜϫʔΫ͕ ඞཁ
VUE.JSΛબ 1 - ܰྔํόΠϯσΟϯά - ֶशίετ => ͦͷ࣌ ཉ͍͠ͷ͕ἧ͍ͬͯͨ
VUE.JSΛબ 2 - ͢ͰʹίϯϙʔωϯτతͳܗͰ ·Ε͍ͯͨHTML/CSS͋ͬͨ ͷͰɺલ໘ϦϓϨΠεͱ͍͏ΑΓ ͪΐͬ͜ͱͣͭΓ͔ͨͬͨ
None
None
None
ΞϓϦέʔγϣϯ͕ ֦େ͢ΔதͰग़͖ͯͨ ՝
՝1 JSͰѻ͏DOM ΦϒδΣΫτͷ ࠃࡍԽରԠ
ඇಉظʹσʔλऔ͖ͬͯͯදࣔ ͢Δͷ͍͍͚ͲɺϢʔβʔͷ ݴޠʹ߹Θͤͯදࣔ͠ͳ͖Ό ͍͚ͳ͍
՝2 ෳࡶԽ͖ͯͨ͠UI ϑΥʔϜʹ͓͚Δ όϦσʔγϣϯ
ػೳ͕૿͑Δͱɺવ ೖྗϑΥʔϜෳࡶʹͳΔɻ UXΛଛͳΘͳ͍ͨΊʹదͳ ϝοηʔδΛಈతʹද͍ࣔͨ͠
VUE.JSಋೖ࣌ʹ ΄ͱΜͲݟͯͳ͔ͬͨ VUEϓϥάΠϯ
JS͕ѻ͏DOM ΦϒδΣΫτͷ ࠃࡍԽରԠ => VUE-I18N
ෳࡶԽ͖ͯͨ͠UI ϑΥʔϜʹ͓͚Δ όϦσʔγϣϯ => VUE-VALIDATOR (WIP)
ΊͬͪΌศར " "
None
None
None
࠷ॳ͔ΒϑϧελοΫͳϑϨʔϜ ϫʔΫΛ࠾༻͢Δͷ͍͍͚Ͳɺ खܰʹ͍࢝ΊΒΕɺͦͷޙͷ ඞཁʹԠͯ͡ϓϥάΠϯΛ ೖΕΒΕΔVUE.JS ελʔτΞοϓʹΦεεϝ✌
݁ - ඞཁͳٕज़ɾϑϨʔϜϫʔΫΛ ඞཁͳλΠϛϯάͰऔΓೖΕΔ - ઌΛݟਾ͑͗ͨ͢બΛ͢Δͱɺ ͔ͤͱͳͬͯ͠·͏
WE’RE HIRING! ❤