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
420
Other Decks in Programming
See All in Programming
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
240
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
380
為你自己學 Python - 冷知識篇
eddie
1
350
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Ruby Parser progress report 2025
yui_knk
1
420
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
140
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
410
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
旅行プランAIエージェント開発の裏側
ippo012
2
890
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
720
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
510
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Producing Creativity
orderedlist
PRO
347
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Code Reviewing Like a Champion
maltzj
525
40k
GitHub's CSS Performance
jonrohan
1032
460k
Six Lessons from altMBA
skipperchong
28
4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
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でも命名地獄になります。 だからといっていい加減に命名すると 後で痛い目を見るので、はやめに癖をつける。 ローマ字(日本語)を使う勇気を持つ。
ご清聴ありがとうございました。