NuxtMeetUp#7
https://gyazo.com/8bbb551b7f2e38a8c1ef843782690a90
https://www.youtube.com/watch?v=dqobTRjSnNo
はじめに
back check
スポンサーLT
技術系の記事はぜひnoteで
強制ドッグフーディング
圧倒的に早い
コンテスト募集一覧ページを今週Nuxt版で正式公開
ゲーマーの情報交換や交流を楽しむコミュニティサービス
パフォーマンス改善面は良好
レガシーブラウザへの配慮
全体流入の2%
レンタルPC、漫画喫茶などでゲームする人もいる
どこまでの対応が必要？
辛かったこと
Nuxtが1系→2系の移行期だった
ドキュメントがまだ1系だった
build時のプラグイン周りが結構変わっていた
反省点
最新のドキュメントを意識する
リリースノートを見る
どんなプラグインが走っているのか知っておく
build時にどんなプラグインが使われているのか
postcss-preset-env
対象ブラウザの範囲を設定する場合
code:package.json
"browserlist": [
"last 2 versions",
"ie 11"
]
code:nuxt.config.js
build: {
postcss: {
plugins: {
'post-css-preset-env' : {
autoprefixer: { grid: true }
}
}
}
}
機能拡張する際はどうすれば良いか
@babel/preset-env
新しい機能をレガシーブラウザで動くように変換
configのheadに追記するだけ
code:nuxt.config.js
head: {
script: [
{
}
]
}
Nuxtの仕様変更に消耗しない
Nuxtを中心とした開発エコシステムによる個人開発のすすめ
金井淳
悩み
フロントエンド開発設計で苦戦
サーバーサイド・インフラ構築知識がない
将来ネイティブアプリ展開もしていきたい
イントロダクション
個人開発に挑戦したいと考える人の足がかりになればいい
受託中心なので、個人開発でスキルアップをはかりたい
料理が趣味なのでその分野で楽しく開発に望みたい
個人開発プロダクト
small dish
β版（アクセス制限）
料理初心者、ひとり暮らし、ミニマリスト向け
コンテンツ
料理の献立、アイデア、ショッピング
開発トピックス解説
使用技術一覧
献立
アイデア
ショッピング
分類
ユーザーお気に入り
いいね
コメント
ビュー
機能
ソーシャルログイン
お気に入り
いいね
カウント数の増減あり
コメント
参考になったアクションあり
ログイン済みのユーザーのみ
SNSシェア
お問い合わせ
詳細画面の画像、テキスト、配列、関連付けなどのフィールドを用意
Summary
スピーディー開発
Google App EngineにてSSR実現できるので クライアントとサーバーサイドは再利用可能なAPIによる通信なのでネイティブにも活かせる
まとめ
フリーランス
2.4リリース
プルリクエストが100クローズしている（1/28現在）
リリースプランをアップデートする
メジャーアップデートは半年に1回
マイナーバージョンアップは4週間に１回のペース
nuxt-edge
24時間に1回リリースバッチが回っている最新版
最近追加された機能（リベースの可能性あり）
Universal fetch対応
ビルトインにnode-fetch, fetch polyfill
nuxt.configにPromise がはいってる
.nuxtignoreサポート
nuxtにスキャンされたくないファイルを指定
気軽に動作確認できるようになった
nuxt-tsが使えるように（テスト機能）
ts, tsxがサポートされるように
ts-loaderが設定されるように
該当フォルダに置いておくと自動的にコンパイルしてくれる
useForkTsChecker
型定義が邪魔せず高速ビルド
Nuxt公式のContext Typeが提供
Pages API Typeもサポート
WIP
Vue.js 2.6
nuxt-edgeでは既にVue 2.6を使っている
追加された機能がnuxt-edgeにマージされていってるらしい
Vueに倣った
新規機能についてはここで話し合われている
Nuxt UIやCLIでのモジュール管理ができるように？
Re:ゼロからはじめるNuxt生活〜Nuxt.jsでWebサイトをリニューアルしている話 リニューアルの経緯
問題点
データ取得にDBに直接接続している
SEOが貧弱
小学生に煽られる
Nuxt採用は初ではない
とある企画用に構築することになった
トライアル的に作った
開発を進めていたところ企画がポシャった
そういう意味で「Re:ゼロ」からはじめる
スキルセット
xKxAxKx
サーバサイド
サーバサイドとの開発と兼務
エンジニアY
フロントエンド
Vueコミュニティメンバー
選定基準
教育コストが低い
Webアプリケーションとして拡張しやすい
ネイティブアプリと同等のことをするかも
状態管理が重要になるのでそのデータフローが用意されていてほしい
構成（予定）
typescript-templateはつかわない
更新が止まっている
型定義やtsconfigが不十分
導入が楽
create-nuxt-app
現時点で相性がよくない
型any地獄
特にactionの可読性が著しく悪くなった
全面的な導入は今回は見送り
将来的には対応したい
モジュール処理を細分化
TS移行時に少しずつ対応するため
componentのvue内部はTSに移行できそう
Vuexの内部に関してstateを定義していきたい にゃんこスタジオに3年在籍
Sardineの仕事
きっかけ
管理画面に使用したかったが頓挫
興味本位でブログに触ってみた
構成
AdminとBlogがそれぞれNuxt使用
サーバーサイド強くなくてもよい
規約面がしっかりしている、ルーティング周り、豊富なドキュメント
去年秋にブログ開設してから急いでいた
FBがほしかった
コメント機能
管理の仕方
Componentで管理
全体で共有する必要がなかったから
影響範囲もそれほど大きくなかったから
近いうちにそれぞれの記事に紐付けるようにして閲覧できるようにしたい
テーブル設計はミニマム・シンプルに
タイトルと詳細は必須、アドレスは必須ではない
カテゴリは必須、ただし記事内では入力不要
裏で送信日時もコレクションに入れるように設定
クライアント側でバリデーションチェック
セキュリティルールは最低限の実装のみ
isAuth() { return request.auth != null; }
適時readとwrireを切り分ける
ソースコード
技術構成
Nuxtで爆速開発
採用理由
UIフレームワークにこだわったときの変更はしんどい
class名考えるのがしんどい
classを見て何をしているかがわかりやすいのがいい
セットアップ
Use a custom UI frameworkのときにTailwindを選択するだけ
tailwind.jsに変数設定がある
使い方
基本的にTailwindに任せる
汎用的に使えない自作でつくるとよい
jsonに詳細ページの内容をassets配下に置いてyarn generateで静的出力
https://gyazo.com/7f72f737347613bc7e5f968841bffd31