気づいたらQiitaの記事が半年以上も未投稿で己のアウトプットの低さに自己嫌悪に陥りますが、残り2ヶ月初心に返りアウトプットしまくりたいと思います!!
Nuxt-edge記事を書こうと思っていたのですが、下書きに寝かせてる間にとうとう待ちに待ったメインバージョンが上がり、テンションが上がりますね!
今月はpoteto4dさんによるNuxt本が出版されましたが、なんとv2対応です!!
仕事が早過ぎて流石としか言いようが無い...。
Nuxt MeetUp#5
そんなこんなで今回の本題です。
NuxtMeetUp#5にブログ枠として参加してまいりました!!
実はMyMacの外部接続ケーブルの故障が発生し付属のトラックパッドとキーボードが一切合切動かないという悲しい出来事が起こり、非常に辛かったのですが、LTはとても素晴らしいものばかりでした。
初の勉強会ブログでドキドキです。。
Qiitaでスライド埋め込めなさそうだったのでサムネイルにして各リンクを埋め込みました。
バンドルファイルの肥大化問題解消にみるNuxt.jsの成熟化
若松良(Wakamatsu Hisashi)さん
スポンサーLT枠。今回の会場は株式会社サイバーエージェントさん。
・サービスを運用していく中で機能拡張を繰り返し肥大化してしまったバンドルファイルが、Nuxt2でどこまで解消できるのか
・Nuxt.jsを使うメリット
→ Vueが書ける、コード分割、SSR、minifyingなど。。。
・Nuxt v1のファイルサイズ問題
→ Automatic Code Splittingがボトルネックとなってしまった
→ シンプルで使いやすい部分が実は柔軟性を欠いてしまっている
・Nuxt v1.2.1~v1.4.1でビルド設定にmaxChunkSizeプロパティを設定できるように
→ 平行接続数に制約のないhttp2環境のみ有効。。。
・Nuxt v2でoptimization.splitChunk(webpack v4仕様)でコード分類を柔軟に対応できる
・Nuxt.jsはフレームワーク補完ライブラリとして成熟してきた
・Vue cli3のリリースがあり優位性は薄れてしまったものの、やはりSSRを気軽にできるのは大きい
・実装の仕組みとデフォルトの設定を理解した上で開発することでメリットをより享受できる
フロントエンド(実稼働)までひとりでできるもん
吉次洋毅(hiroki_yoshitug)さん (同世代だ。。。)
・DODA リブライディング!
→ 検索をやめて「無思考型」新サービスをPWAで開発(機械学習)
・技術スタック Nuxt.js(SSR)×PWA & Express×MySQL
・少人数構成。だからこそFEだけで開発全体をカバーできたら素敵
→ 企画のイメージを具体化させると同時に実は裏側も作れてるってのが良い。
・github: nuxt-full-stack-template
・マルチプロセス
→ PM2でNodeのクラスターモードで起動することでプロセス管理ができる
・80番ポート問題
→ WELL KNOWN PORT(1024番以下のポート)ではrootユーザーでの実行が必要
→ PM2の公式サイトを参考にauthbindを導入してpm2のエイリアスを設定することで一般ユーザでもサーバーを稼働させられる。
→ ApacheやNginxは無くてもNode単体でもサーバーは立てられる。
・クラスタ構成でのロギング
→ PM2とlog4jsを使って設定することで、PM2がよしなにロギングしてくれる。
・PM2で色々できる!!
Vue or Nuxt
石岡将明(masaakikunsan)さん
https://slides.com/masaakikunsan/vue_or_nuxt#/
ごめんなさい。
slidesのサムネイル画像のURLの調べ方がわかりませんでした。。。
どなたか教えて下さい;;
・新規や事業やリニューアルでVueを選択するのかNuxtを選択するのか
→ Nuxt使ってる? なんでNuxtを使ってるか理由言える? Vueでもいいよね?
・VueとNuxtの動向
→ npm trendsで見るとreactには及ばずとも高い盛り上がりを見せている。
→ vue cli3 & Nuxt v2登場!
→ Vue.js入門 & Nuxtビギナーズガイド 発売!
・どちらを導入すべきか。。。
→ Vue:jQueryを使わずとも気軽に導入できる、エコシステムが豊富、学習コスト低い、公式日本語ドキュメントが素敵
→ Nuxt:設定周り(webpackらへん)の知見が浅くてもなんとかなる、SSRも簡単、ルーティングの効率アップ、静的ページも作れる、制約たくさん
・Nuxtを使った方がいいケース
→ SEOを気にする時、Vue.jsに精通してる人が多い、静的ページ作成
・Nuxtを使わない方がいいケース
→ 設計や規約を自分で構成したい、Vue.js初心者が多い、TS使いたい
・ルーティングはVueでも簡単にできる
→ ktsnさんのvue-cli-plugin-auto-routing
・よく考えてVue/Nuxtでハッピーライフを!
Vueを広めるためのNuxt.jsの可能性
・組織にVue.jsを定着させる施策としてNuxtを使う
・組織にVue/Nuxtを導入・拡散する必要性とは?
→ フロントエンドが居やすい環境を構築
→ jQueryの弊害を激減
→ 組織をドライブさせるため=一緒に戦う仲間を増やす
→ 『適切な技術は適切な人を呼ぶ』(技術に対して前向きな人が集まる)
・Nuxtの特徴と組織に与えるインパクト
→ 劇的な親しみやすさと意識の共通化
(ルールが定められている部分があるので爆破されづらい)
→ 使用ユーザーの増加、開発スピードの向上
・実際にNuxtを導入してみて
→ 非同期通信をゴリゴリできる(axios強い)
→ インフラ構成を問わない(レンタルサーバーを選ばない)
・組織に新しい技術を定着させるには結構な時間と体力と諦めない気持ちがいる。(めっちゃわかる)
・Let's enjoy Nuxt.js!!
Nuxtを使っていて地味にハマった小ネタの紹介
寺嶋祐稀(Yuki Terashima)さん
・ALISでの開発知見は『Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) 』にて
・GTM(Google Tag Manager)の設定
→ Nuxtの公式ドキュメントに設定できるpluginが!
→ Nuxtのpluginsは便利!!
・Lambda上で動かす
→ 当初事例が無くて実装方法に困ってしまった
→ nuxt-on-lambda
→ 除外するファイルを指定する必要があり、デプロイパッケージを小さくするためnode_module内の不要なファイルを除外(指定)する。
・500エラーの挙動
→ layouts/error.vueでカスタマイズできるけど、SSR時してる時はファイルを読み込んでくれない。
→ app/views/error.htmlで解決できるけど、nuxt.config.jsのsrcDirのpath設定に注意。
・Nuxtは公式ドキュメントが充実してるから読めば大抵なんとかなる。
nuxt-i18nを使ったWebサイトの多言語化
odan3240さん
・UNIQYS
・i18n = internationalizationの略
→ 地域毎の言語とか、時差(話題のサマータイム対応)とか名詞の複数形とか
・Vueには専用のプラグインが!
→ Vue i18n (開発:kazuponさん)
ドキュメントも! → http://kazupon.github.io/vue-i18n/
→ 言語情報をmessagesに入れてあれば自動的に切り替わる。
・Nuxtでもi18n使いたい
→ nuxt-i18n
→ 日本語の情報が少ない!のでp-r投げようかなーと思ったらQiita記事が!
→ 『NuxtJSの国際化にはnuxt-i18nを使おう』
・nuxt-i18nの機能
→ ルーティングの自動生成
nuxt.config.jsに設定した言語の分だけ自動的にindexページやハワードページが生成される。
ルーティング自動生成の戦略の少なかったので新しい戦略を追加するPull Reruestを送ったらマージされた!!
→ 便利関数
localePath関数...現在の言語のindex.vueのコンポーネントへのpathを返してくれる
switchLocalePath関数...現在のコンポーネントに対応する別の言語へのpathを返してくれる。
→ SEO対策の機能
検索エンジンにWebページがどの言語に対応しているか教えるタグを自動生成してくれる。
でもSeo対策を有効にするとheadの中身が消える??scriptやStyleタグが消えレイアウトの大幅崩れがあって辛い。
NuxtでのJAMStackな開発とポイント
為藤アキラ(Tame)さん
・JAMStackって?
→ JavaScript, APIs, Markupの略!
→ Netlifyの創業者が提唱した用語
・静的ファイルも生成できるNuxtとJAMStackは相性が良い
→ パフォーマンス面,セキュリティ面にも強みがある
・Nuxtでサイトを公開する3パターンの手法
→ SPA / SSR / JAMStack
・JAMStackな開発
→ Nuxt + Netlify + Contentful
→ (スライドにめっっっっっっっっっちゃわかりやすく記載されているのでリンク飛んで下さい)
・(ハンズオン行きたい)
感想
ブログ枠で参加させて頂いていたのにアウトプット遅すぎですねごめんなさい><
どこまで記載していいのかわからなかったので、もし問題あれば教えてもらえると嬉しいです。
今後ブログ枠じゃなくでもスライド紹介みたいに書いて行きたいなぁと。
meetupの内容の感想としては
・まだNuxt v2に移行できていなかったのでメリット部分がわかる実務実績が見れてとても参考になった。
・Nuxt.js(SSR)×PWA & Express めっちゃやりたい。
(でもMySQLじゃなくてfirebaseを使ってかな)
・モダンな技術はモチベートの高い技術者を呼ぶのわかりみがすぎた。
・nuxt-i18前回の案件でチームメンバーが使ってたので、改めてソースコードを見せてもらおう!
・Nuxt+Netlify+Contentfulでサイト作って見たい
・技術書典にJAMStackの本があって気になったけど、やっとJAMStackの意味が理解できた。(Boothで買おっかな...。)