12月6日(木)にNuxtMeetUp#6に今回もブログ枠として参加してまいりました！！
はい今回も大幅な遅れブログで本当に申し訳ありません.........。
個人ブログの設立が間に合わなかったので今回もQiitaにて投稿させて頂きます。
スライドはサムネイル化してリンクを埋め込んであります。クリックで皆様のスライドページへ飛べるのでチェックしてみてくださいね。
(slidesでのサムネイル化だとどうしても上下の余白入っちゃうんですが、いい方法無いですかね....)
NuxtとTSと私 in Nuxtmeetup#6
スポンサーLT枠。今回の会場は株式会社SMSさん。
iwataさん
質問タイム！
・Nuxt.js使ってる人 6~7割ぐらい
・typescriptやってる人 2割ぐらい
・『HTML5 Conference 2018』の言語アンケートではTypeScriptが1番人気 (2番目はbabel)
・スライド内容全部やると時間がないから多数決！(TypeScript vs SSR)
→ TypeScript勝利！！！
・Module ts-lodaerの設定はリンク参照
・nuxt.jsのexampleだと動かない(.vueでlang=tsが使えない。古いから？)
・ts-loader遅い問題
→ fork-ts-cheack-webpack-plugin 別プロセスで実行してくれるので早い
・build遅い問題
→ build.cache=true で早くなるけど cacheでたまにエラーがでる
・Nuxt用の型定義
→ releaseバージョンにはないが最近nuxt:devにmergeされたのでその内提供されるかも...
でも今は自前で用意！！！
nuxt.d.tsにて declaer moduleでいい感じに設定
・middlewareのtest
→ Pickを使って定義
redirectをmockを使う
localVueを使わないとエラーになってしまう箇所がある
サンプルコードや今回は発表されていないSSRについてなど、とてもボリューミーな内容がスライドに記載されていたので、是非一読してもらいたいスライドでした。
Nuxt用の型定義の部分は私もつまづいたことがあり、頷きながら話を聞いていました...。早く公式実装されないかな。。。。
Nuxt.jsでSPA_Webアプリを初期構築した話
鈴木孝之さん
・Nuxt歴は２ヶ月
・Nuxt×Laravelでアプリ開発
・JWT(シェット)で認証
・middlewareでログインチェック実装
・Laravelではトークンを発行し、ユーザーの情報を返す
→ localStregeにチェックがあるか判定
・mixinでスピナーを発動。 起動・終了を指定
(mixin... 再利用可能な機能を持たせる)
・テンプレートを使用
・まとめ:Nuxtを使うとJWE認証が簡単にかける
環境構築の話とか、JWT・Laravelの実装の流れ、mixinでのサンプルコードなど、読み応えのあるスライドです！
私もmixinの機能はよく使います。
(vuex入れないでって言われた案件ではかなり大活躍してます。)
初心者エンジニアがSPAサイトを作ってみた
r_sato1201さん (SCOUTER)
・Nuxt.jsは2ヶ月前に触った
・好きなライブのブログを作成してみた
→ Nuxt.js × Contentful × Netlify
Contentful... Headless CMS
従来のCMSはフロントエンドとバックエンドが一体化しているものが多いけど、Contentfulはバックエンドのみ!
・CMSではSEOを意識しないといけない。
→ 今回は小規模のサイトなのでSSRではなくSSGをする。
・NuxtとContentfulのつなぎ込みは簡単
・初心者でも簡単にモダンなSPAサイトを作れる
・アウトプットをすることで理解が深まる
・情報は溢れているけど、ちゃんとドキュメントを読み込んで自分で理解しないとエンジニアとしての自分を認められない
・とにかく実際に手を動かす
お恥ずかしながらSSGってなんだ？？
ってなっていたのですが、最近流行りのJAM Stackのことっぽい？？
Static Site Generator(SSG)ですかね。間違えてたらごめんなさい。
Nuxt.js × Contentful × Netrifyの組み合わせは私も最近ハマっているので年末年始の連休使って自分だけのブログ作りたい！！と考えていたので参考にさせて頂こうと思います。
実際作ってみると本当に感動するほど簡単なので皆さんも是非このスライド参考に作ってみましょ！
Nuxt Apollo Client
takanoripさん
資料の共有がありませんでした。
Youtubeのライブ配信にありますのでそちらで...。
・Web fontのアドカレをほとんど一人で書いてるので見て...または書いて...(Qiitaじゃなかった...)
・資料を家に忘れてきた...(my PCを忘れたらしい)
・Apollo Client...graphQLをクライアントサイドで使いやすくするもの
・Nuxtで使う為のmoduleが存在する
→ apollo-module
→ vueにはvue-apolloというmoduleがある
・ゼロコンフィグが使い物にならない
→ 個別に設定ファイルを作成
・apollo-linkを繋いで使用する(サーバーサイドでいうミドルウェアみたいなもの)
・設定指針
→ ページコンポーネントに閉じ込めたい
・Apollo Clientはメモリ上にキャッシュをもつのでVuexに持たせると二重管理になる
→ でもApolloのキャッシュは便利なので使いたい(十分に活用するためにもvuexと切り離す)
graphQLの知見がないためかちょっとピンと来なかった部分が多かったです...
いつか触る機会があれば是非とも使ってみたいmoduleなので心に刻んでおこうと思いました。
Nuxtで写真ギャラリーを作った話+a
ライダーさん (LIG)
・Node.jsのevent-streemの事件にLIGの人は関係無いよ！
・アプリケーションを作ったきっかけはエンジニアとしての「顔」が欲しかった!(わかる)
・flickr API
・EXIFの情報を取得したい
・serverMiddleware便利
→ 環境変数が使い回せる
→ client/ pagesやassetsを入れる
・startは常にfanctionを返しましょう
→ サーバーサイドで不要な共有状態を避けるため
・LIVE release(昨日間違えてリリースしちゃったのでバージョンアップ)
→ DEMO = git push heroku master
→ (本番ではエラーが返ってきてしまったが、帰宅後成功したらしいです)
・作成したギャラリーサイト
LIVE DEMOってなぜか本番での失敗率高いですよね。。。。でも本番前後だと何も問題なかったり。不思議。
「なになに(ツール)を作った人」というエンジニアとしての顔を作りたいという動機はとても大切だなと思いました。
ポートフォリオにもなりますし、認知もしてもらえやすい。でもなかなか自分が作ったものを世間に出すって勇気とか必要ですよね。あまり難しく考えすぎないでとにかくやってみる！をモットーに作成していきたいです。
RoomClip の Nuxt.js 移行の話
岡田 佳祐さん
・RoomClip (サイト)
→ 暮らし・ライフスタイルのSNSメディア
・WEBサイトに求めること
→ 使いやすいUI・閲覧ユーザーの集客
・コンポーネント思考でSSRできて簡単に実装したい
→ Nuxt.js!!!
・リニューアル後は全体的に速度が向上
・LazyLoad → Googleが公式の実装方法を公開
・社外アクセスだと広告がありパフォーマンス減少...
→ 一休さんの記事良さげ『サードパーティJavaScriptの最適化』
・インフラに詳しくなった(SSR時はnodeサーバが必要のため)
・様々な人の知見によってプロダクト品質をあげることができた
私の現在の案件でもパフォーマンス改善は課題ですね...。
すでに規模の大きいコンテンツなので途中でNuxt.jsを導入するのがしんどいと感じているので参考にさせて頂きたいと感じました。
破壊しやすいNuxtプロジェクトの作り方
masaakikunsanさん
懇親会中でのLPです！
ピザ食べながら聞いていたのでリアルタイムメモはとってなかったのですが、分かりみが深く、印象に残るものも多かったです。(サクサク読めるのでぜひスライド読んで下さい)
破壊されること前提で作るってのは結構目から鱗な部分がありました。
普段プライベートで実装しているものは時間をかけ過ぎているので短実装×効率化は当分の目標ですね...
最後に
アウトプットって大事ですよね。
イベント運営者様におかれましては、此度も大幅に遅れてのブログ更新で申し訳ありません...。
アウトプットするぞ！！ってやる気と共に今後計画性も身に付けたいと思います...；；
Nuxtに関してはそれぞれのツールの組み合わせが今後の開発構築の参考になりました。
どのスライドも実装コードや手順などを細かく記載してくれているので参考になんども拝見したいなと思います。
Let's Nuxt.js!!!