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
jQueryよりVue.jsを使おう
Search
Takayuki
June 03, 2018
Technology
0
250
jQueryよりVue.jsを使おう
Takayuki
June 03, 2018
Tweet
Share
More Decks by Takayuki
See All by Takayuki
地方カンファレンス主催のススメ
bumptakayuki
1
93
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
290
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
360
沖縄観光、名物を一挙紹介!
bumptakayuki
2
380
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
940
flutterでイベントアプリを作ってみた
bumptakayuki
0
87
オフショア開発の辛みと学んだ事
bumptakayuki
0
300
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
130
ChatGPTに記事を書かせてみた
bumptakayuki
1
200
Other Decks in Technology
See All in Technology
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.4k
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
210
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
150
AMLD 2024 - Build Your Own GPT
donlelef
1
260
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.6k
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
270
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
こんなに簡単!AWSマルチアカウント
takuya_terada
0
110
Featured
See All Featured
The Cult of Friendly URLs
andyhume
73
5.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
GraphQLとの向き合い方2022年版
quramy
28
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Navigating Team Friction
lara
177
13k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Transcript
jQueryよりVue.jsを使おう! 鈴木孝之 2018/06/01
"HFOEB ࣗݾհ K2VFSZͷਏΈ 7VFKTͷϝϦοτ 7VFKTͷಋೖํ๏
0.ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹ ϑϦʔϥϯεΛͬͨޙʹ201711݄ʹԭೄͰىۀɻ
◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4
0.ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕ ◆ࣄۀ༰ ɾۀʹ͓͍ͯͷϑʔυϩεΛແ͘͢ ࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ
4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
0.ࣗݾհ ΪʔΫϋεͱɺओʹΤϯδχΞϓϩάϥ ϚʔΛ৬छͱ͢ΔਓɺWeb͕͖ͳਓͳͲ͕ ڞʹॅΉίϯηϓτܕγΣΞϋεͰ͢ʂ ΤϯδχΞͳͲ͕ଟ͍͜ͱ͔Βॅຽಉ࢜Ͱϓϩ άϥϛϯάΛڭ͑߹ͬͨΓ͠·͢ʂ
K2VFSZͷਏΈ
jQueryؤுΕؤுΔ΄Ͳਏ͘ͳΔ
jQueryؤுΕؤுΔ΄Ͳਏ͘ͳΔ
jQueryؤுΕؤுΔ΄Ͳਏ͘ͳΔ jQueryͰ͜ͷ෦Λऔಘ͢Δ ߹ɺΊͬͪΌɺ͍͠
jQueryؤுΕؤுΔ΄Ͳਏ͘ͳΔ $(“#parent”) .children('child-class') .children(‘child-class') .children('child-class'); Ծͷྫɿ ΊͬͪΌϝιουνΣʔϯ͠·ͬͯ͘ औಘ͠ͳ͍ͱ͍͚ͳ͍
7VFKTͷϝϦοτ
Vue.jsͱ MVCͷੜछͰ͋ΔɺGUIϥΠϒϥϦʹదͨ͠MVVMΛઃܭج൫ͱ ͯ͠ ࠾༻͠ɺߏங͞Ε͍ͯ·͢ɻ MVVMΛ࠾༻͍ͯ͠Δ͜ͱ͕ߏจͷཧղ͢͠͞ʹܨ͕͍ͬͯ· ͢ɻ MVVMΛ࠾༻ͨ͠ϑϨʔϜϫʔΫͰදࣔͦͷͷͰ͋ΔViewɺ දࣔ͢ΔσʔλٴͼσʔλΛૢ࡞͢Δखଓ͖Λͻͱ·ͱΊʹͨ͠ View Model
্͕ͷऀͰ͢ɺͦΕΒΛཧ͢Δίϯτϩʔϥ(Controller) ଘࡏ͢ΔͷͷࠇࢠͷΑ͏ͳଘࡏͰϢʔβ͔ΒӅṭ͞Ε͍ͯΔͨ ΊίʔυΛॻ͘ࡍʹҙࣝ͢Δඞཁ͋Γ·ͤΜɻ
Vue.jsͱ
શϖʔδSPAʹ͠ͳͯ͘ ɺҰ෦͚ͩͷಋೖ͕ Ͱ͖Δʂ େنͳϑϨʔϜϫʔΫͰ͋ΔAngularJSͰɺ AngularJSಠࣗͷϧʔϧʹଇͬͯWEBΞϓϦΛߏ ங͍ͯ͘͠ඞཁ͕͋Γ·͢ɻ ϧʔϧʹଇͬͯ։ൃ͢ΕɺͪΖΜAngularJS ੌ͘ߴ͍ੜ࢈ੑΛൃش͠·͢ɻ ͨͩɺ͜Ε్͕தͰଞͷϑϨʔϜϫʔΫʹΓସ ͕͑Ͱ͖ͳ͍ཧ༝ʹͳ͍ͬͯΔͷͰ͢ɻ
͔͠͠ɺVue.jsͰࣗͷΈͷΓํͰWEBΞ ϓϦΛߏங͍ͯ͘͜͠ͱ͕Ͱ͖·͢ɻɻ ʮֶशޮඇৗʹߴ͍ʯͱݴ͍ Ε·͢ɻ ߏγϯϓϧͰຊޠͷυΩϡ ϝϯτॆ࣮͍ͯ͠ΔͷͰɺֶशί ετ͍Ͱ͢ɻ HTMLɺCSSͱJavaScriptͷجૅΛ ֶश͢Ε͍࢝ΊΔ͜ͱ͕Ͱ͖ ·͢ɻ ಋೖ͕؆୯ʂ ֶशίετ͕͍ 2.ϝϦοτɾಛ γϯϓϧͰࣗ༝͕ߴ ͍ 2 ʙϝϦοτʙ 1 3
-BSBWFMͰͷ7VFKTͷಋೖํ๏
ॳظԽॲཧ
ΤϯτϦʔϙΠϯτ
ΤϯτϦʔϙΠϯτ Ξϯόαμʔ Ϟδϡʔϧ αϓϥΠϠʔ Ϟδϡʔϧ
summary-component chart-component Ϟδϡʔϧ
summary-component Ϟδϡʔϧ