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
280
NuxtではじめるVue.js
発表者:okawaさん
ls_pr
February 17, 2020
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
200
自作PCのすすめ
ls_pr
0
130
ツボを押さえたWFの作り方
ls_pr
0
120
Linuxのちょこっと調べ
ls_pr
0
120
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
230
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
120
ejsのすすめ
ls_pr
0
150
JSにおける正規表現
ls_pr
0
130
Vue.jsの機能を使って色々作ってみた
ls_pr
0
410
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
170
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
🔨 小さなビルドシステムを作る
momeemt
3
640
RDoc meets YARD
okuramasafumi
4
160
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
140
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
400
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
290
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.5k
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
300
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Embracing the Ebb and Flow
colly
87
4.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Scaling GitHub
holman
463
140k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Six Lessons from altMBA
skipperchong
28
4k
The Cult of Friendly URLs
andyhume
79
6.6k
Building Adaptive Systems
keathley
43
2.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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でも命名地獄になります。 だからといっていい加減に命名すると 後で痛い目を見るので、はやめに癖をつける。 ローマ字(日本語)を使う勇気を持つ。
ご清聴ありがとうございました。