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
180
自作PCのすすめ
ls_pr
0
110
ツボを押さえたWFの作り方
ls_pr
0
99
Linuxのちょこっと調べ
ls_pr
0
97
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
210
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
87
ejsのすすめ
ls_pr
0
130
JSにおける正規表現
ls_pr
0
100
Vue.jsの機能を使って色々作ってみた
ls_pr
0
380
Other Decks in Programming
See All in Programming
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
310
AHC 044 混合整数計画ソルバー解法
kiri8128
0
290
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4k
エンジニア未経験が最短で戦力になるためのTips
gokana
0
120
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
200
OUPC2024 Day 1 解説
kowerkoint
0
390
Gunma.web #55
tinykitten
0
130
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
190
「その気にさせる」エンジニアが 最強のリーダーになる理由
gimupop
3
470
Functional APIから再考するLangGraphを使う理由
os1ma
5
640
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
920
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
190
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Automating Front-end Workflow
addyosmani
1369
200k
RailsConf 2023
tenderlove
29
1k
GraphQLとの向き合い方2022年版
quramy
45
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Fireside Chat
paigeccino
37
3.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
14
1.1k
Six Lessons from altMBA
skipperchong
27
3.7k
Become a Pro
speakerdeck
PRO
27
5.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
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でも命名地獄になります。 だからといっていい加減に命名すると 後で痛い目を見るので、はやめに癖をつける。 ローマ字(日本語)を使う勇気を持つ。
ご清聴ありがとうございました。