test
阿部 裕太 / Yuta Abe
- 過去いた会社でWebサイトのコーディングをやってました。
- Webサービスより演出が綺麗なWebサイトに興味がある
- 最近Vue/Nuxtにはまりつつある
へ
の
へ
の
も
へ
Nuxt.js
Vueアプリケーションを作成するフレームワーク
Nuxt.js :
Vue.js :
Vue.jsは便利すぎて自由に書けてしまう。
なので、規約を設ける。
負担が減る
↓
らしい
デプロイするための3つのモードのうちの１つgenerateモードを使う。
「yarn generate」コマンドで「pages」ディレクトリを参照したルートごとに HTML ファイルを生成
この吐き出されたファイルをサーバにアップし公開する流れ。
前置きみたいなお話
- Vue / Nuxtの詳しい使い方、書き方には触れません
- 普段gulp + webpackで開発していました。ふとNuxtを試したいと思いトライ
- 最終的に「yarn generate」コマンドで吐き出された静的ファイルをサーバに上げる流れです。
環境構築に悩まなくて良くなる
1.
Webpack、gulpの設定を書くのは面倒くさい
↓
コマンド1つでプロジェクトファイルが生成される。
layouts / pages / components
2.
- pagesディレクトリにページのコンポーネントを置くと、ディレクトリ構造に従って自動的にrouterを定義してくれる。
⬆️ トップページ、projectsページとprojectの詳細ページが欲しいと想定した場合
- HTML、CSS、Javascriptをまとめて1つのファイルに書けるので、該当ファイルを探す手間が無くなった
ストアによる状態管理
3.
・vue.js
<section id="abe" v-bind:class="{active: testState}">
・jQuery
$("#abe").addClass("active");
<section id="abe">
この要素に"active"classを付与したい場合、
管理する場所を定め、変更する流れを作る。
ページやclassを切り替えたいタイミングが増えれば増えるほど管理が面倒になる・・
ちょっと困った点や要検証っぽい所
head内にGoogleTagManegerを書きたい
シングルクオートやダブルクオートの関係上サニタイズ無効する必要があった(?)
コメントアウトは静的ファイルには吐き出されない。
例えば、ソース納品の際にコメントアウトでヒントをメモしといて。みたいな場合
Nuxt.jsがよしなに色々とやってくれるので、裏で何が書かれているか見にくい。
Nuxt.jsでポートフォリオサイトを作ってみた
(まだ途中)
まとめ
- 静的サイトで使用する程度なら学習コストは高くない
- パッと制作に取りかかれる楽さ
- サービスやない一般的なWEBサイトを作る会社でもVueやNuxtを求める技術に指定してる事が増えてるので、エンジニアとしての価値を高めれそう
おわり
Copy of Nuxt.jsを静的サイトで使ってみた
By hitsujisan