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
260
NuxtではじめるVue.js
発表者:okawaさん
ls_pr
February 17, 2020
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
170
自作PCのすすめ
ls_pr
0
100
ツボを押さえたWFの作り方
ls_pr
0
89
Linuxのちょこっと調べ
ls_pr
0
88
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
200
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
78
ejsのすすめ
ls_pr
0
120
JSにおける正規表現
ls_pr
0
93
Vue.jsの機能を使って色々作ってみた
ls_pr
0
360
Other Decks in Programming
See All in Programming
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Software Architecture
hschwentner
6
2.1k
『品質』という言葉が嫌いな理由
korimu
0
160
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Honoとフロントエンドの 型安全性について
yodaka
4
250
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Introduction to kotlinx.rpc
arawn
0
630
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Documentation Writing (for coders)
carmenintech
67
4.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Building Applications with DynamoDB
mza
93
6.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Gamification - CAS2011
davidbonilla
80
5.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
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でも命名地獄になります。 だからといっていい加減に命名すると 後で痛い目を見るので、はやめに癖をつける。 ローマ字(日本語)を使う勇気を持つ。
ご清聴ありがとうございました。