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
NuxtではじめるVue.js
Search
ls_pr
February 17, 2020
Programming
0
270
NuxtではじめるVue.js
発表者:okawaさん
ls_pr
February 17, 2020
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
190
自作PCのすすめ
ls_pr
0
120
ツボを押さえたWFの作り方
ls_pr
0
110
Linuxのちょこっと調べ
ls_pr
0
120
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
220
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
100
ejsのすすめ
ls_pr
0
140
JSにおける正規表現
ls_pr
0
120
Vue.jsの機能を使って色々作ってみた
ls_pr
0
400
Other Decks in Programming
See All in Programming
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
Create a website using Spatial Web
akkeylab
0
300
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
Claude Codeの使い方
ttnyt8701
1
130
WindowInsetsだってテストしたい
ryunen344
1
190
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
140
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
290
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Select API from Kotlin Coroutine
jmatsu
1
190
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Experiences People Love
moore
142
24k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Site-Speed That Sticks
csswizardry
10
660
Building Applications with DynamoDB
mza
95
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Transcript
NuxtではじめるVue.js あとVue使う上での注意点など 2020年1月29日 ゆるっとVue.js「明日から使えるVue.jsの話」
どちらさまですか? 大川 智之 所属: 株式会社スノウロビン 今はフロントエンドエンジニアです。 雑多にやってます。 遍歴: ASP、Perl ->
Java, .Net, PHP -> Swift -> Kotlin -> JavaScript あまり人前で喋る事はしませんが、 今回はコネでここに立っています。 Vue.js布教の際にNuxtが役に立ったぞという話。 こないだ弊社ホームページもNuxtになりました!
Nuxtとは モダンな web アプリケーションを作成する Vue.js に基づいた プログレッシブフレームワークです。 Vue.js 公式ライブラリ(vue、vue-router や
vuex)および強力な開 発ツール(webpack、Babel や PostCSS)に基づいています。 Nuxt の目標は、優れた開発者エクスペリエンスを念頭に置き、Web 開発を強力かつ高性能にすることです。 Nuxtの目的は開発者体験向上とのことで、 それだけにすごく開発しやすいです。
フロントエンドの壁 - 開発環境の構築がしんどい - 選択肢が多すぎて迷う - Webpackのググラビリティの低さよ
Nuxtなら… npx create-nuxt-app [projectName] これだけでほぼ終わりです。
create-nuxt-app プロジェクト名やら基本情報をいろいろ聞かれたあと、 パッケージマネージャーを聞かれます。 特にこだわりがなければ Npm を選択しましょう。
create-nuxt-app
create-nuxt-app ここは ESLint Prettier を選択します。 マジでおかんかと思うぐらいうるさいと感じますが、 基本的な書き方を教えてくれます。 どうしても鬱陶しいルールは除外できますので、 基本的にはLintを使いつつ除外するルールを固める方法で実装しましょう。
create-nuxt-app SSRはNuxtの仕様が多いので習熟時ではSPAで作ります。
create-nuxt-app 以上で終了です。 あとは画面の通りコマンドを実行すれば開発用サーバが立ち上がります。
あとはpages配下を編集していくだけ
追加で入れるもの Pug、Sass、Stylusなどのプリプロセッサは追加。 基本的には好みですが… 特にPugは超絶オススメです。 個人的にすごくVue.jsとマッチしてる気がします。
AntDesignも超絶オススメ Viewではなくアプリケーションに集中でます。 UIライブラリなら他のでも良いです。 でもオススメ。使いやすいです。
ここまでのまとめ - 環境を作るのがとにかく楽 - Pugはいいぞ - AntDesignもいいぞ
vue-cliでいいんじゃ… - 静的書き出しができる - PWA化もできる - SSRもできる - 拡張・方向転換が容易 -
なのでとりあえずNuxtで作っとけ精神
Vue.jsを教える際に重視したこと - なぜVue.jsを使うのか - Vue.jsが優れている点 - Vue.jsで積極的に使うべきもの - Vue.jsで消極的に使うべきもの -
コンポーネント化について - がんばって名前をつける
なぜVue.jsを使うのか - カプセル化 ここでのカプセル化は 「他コンポーネントに依存しないコンポーネント」 という意味で使います。 この目的を忘れてはならない。(戒め)
Vue.jsが優れている点 - とにかく手軽にカプセル化できる 個人的な見解ですが、大規模なものはReactを 採用した方が良いケースもあると思います。 v2ではTypeScriptの恩恵が少ないと感じています。 使うことはできるのですが、なんか違うなー、と 個人的には思っています。 v3に期待。 みんな違ってみんな良いのでVueが向いてないなと
思ったら別のものを採用する方が良いです。 もちろんjQueryも現役です。恥ずかしくない。
Vue.jsで積極的に使うべきもの - コンポーネント化 - computed - watch - transition -
リアクティブディレクティブ # Nuxtで積極的に使うもの - PageComponent - Plugin
Vue.jsで消極的に使うべきもの - mixin - v-ref - v-el # 使うけど最小限にすべきもの -
data - methods
Vue.jsを使う際に気をつけるべきこと ほとんどのロジックはJavaScriptで記載する。 その際にVueComponentに関わりのないものはモ ジュール化する。 VueComponentにロジックは記載しない。 先に挙げた data, methods にはVueComponentが依 存するもののみを記載し、最小限にする。したい。
コンポーネント化 Atomic DesignはVueでも相性が良いです。 Molecules, Organismsなどは propsによって表示だしわけをしがちですが 別物として扱ったほうが良いケースもあります。 Template, Atomsの取り扱いには困りますが… (前回採用したときはAtomはCSSにしました)
コンポーネント? コンポーネントはモジュールを使う中心。 Vueの主な役割は描画とイベントハンドリング。 Nuxtの主な役割はコンパイルとルーティング、ストアです。 処理はすべてモジュール化してそれを使います。 良く使うのは - アニメーションライブラリを抽象化したモジュール - axios(簡単なものはNuxtでも用意してくれているが抽象化し
てPlugin化する) - 日付関係やデータ変換 これだけでもすごく楽になります。 NuxtやVueに依存しないように作れば使いまわしもできますし ね。 とくにaxiosはNuxtが用意してくれたものを使わないことも多々 あります。
がんばって名前をつける コンポーネント、モジュール、関数と とにかく名前をつけることが増えます。 名付けに迷った場合はだいたい処理単位を見誤って いるので考え直す。 CSSのクラスなどもそうですが、 JavaScriptでも命名地獄になります。 だからといっていい加減に命名すると 後で痛い目を見るので、はやめに癖をつける。 ローマ字(日本語)を使う勇気を持つ。
ご清聴ありがとうございました。