まぁ、つまらないものですが

エンジニニャーの気ままな技術ブログ、日々のログを残してゆきます。

Nuxt meetup #6に行ってきました

勉強会・イベント 雑記

NuxtMeetup＃6の自分用メモです。 会場での走り書きしたものなので雑ですが参考になれば。 最後にちょっとこ感想書いてます

司会 株式会社スカウターのまさあきくんさん
(Podcastで見たことある人だ)

次回開催は未定!
会場提供してくれる場所募集中!
(GRiDどうですか?という話をしてきました)

Nuxt とTSと私

SMS株式会社 @iwata 氏 資料: https://twitter.com/onigra_/status/1070621538712342528

唐突な質問タイム!

Nuxtを使ってる人は → 6割 TypeScriptを使っている人は? → 2割

dsyn…
TypeScriptやってみたいひとー → 3割

SSRやってみたい人ー → 合わせると4割ぐらい?

TypeScriptの話

ts-loaderの設定

コミュニティのTypeScriptテンプレートを参照しよう
nuxt.jsのexampleにあるが、動かない

Ts-loaderが遅い設定

checker-webpack-pluginを使おう
別プロセスで見るようになるよ
awsome-type-script-loaderもあるけど.vueには非対応

buildが遅い問題

cacheのオプションをTrueにしよう
たまにChashでエラーになるのでこまめに消そう

Nuxt用の型定義

現在のreleaseはない最近nuxt:devにmergeされたのでそのうち提供されるはず

Nuxt.jsでSPA Webアプリを構築した話

鈴木孝之 氏
レイヤーで起業して会社を運営中
Nuxt歴2ヶ月ぐらい

NuxtとLarabelの設計

自社アプリだったので技術選定は自由だった
Docker+Nuxt+laravelni

JWT認証を使った。

axiosにtoken設定を食わせて毎回使ってAPIと通信している。

Laravelでやっていること

laraveｌにもJWTようのライブラリがある

工夫した点

mixinでページ遷移時にspinnerを発動させる

独自のスピナーを使いたい
あのローディングのやつ

mixinとは?
コンポーネントにオプションを付けることができ、より再利用性を高めるためのもの

呼び出したいところで呼び出してあげる

Nuxt.jsの管理画面テンプレートが便利

まとめ

JWT認証は簡単

初心者エンジニアがSPAサイトを作ってみた

ぼくのりかい

「Nuxt.jsっていうプログラミング言語が今はやってるらしい」
色んな人に詰められた…

そんな中、SAPサイト(バンドWebPage)を作った

要件定義→ラフ→構成など実際の手順を踏んだ

誰でも更新できるようcontentfulを使った
→ HeadlessCMS → SEO対策のためにSSRかSSGがひつようだが今回はSSGをやりたくて採用した

流れ

プロジェクト作成 ↓ Layoutを作る ↓ コンポーネントを作る

Contentful

space ←→ ContentModel ←→ Entry

spaceID apikeyを取得してcontentfulのプラグインにセット
あとは各コンポーネントから呼び出してあげる

Nuxt + Contentful + Netlifyは誰でもできるくらい簡単!

学んだこと

  • アウトプットは大切
  • 公式ドキュメントを読もう
  • とにかく手を動かす

Nuxzt.js with Apollo Cliant

  • Takanori Oki
  • @takanorip
  • font love
  • FOLIO.inc
  • FrontEnd Engineer

NuxtでGraphqlを使うためのapollo cliantを使う話。
あ、資料は家に忘れたので即席で作り直してます

ApolloCliant公式にNuxtで使うためのライブラリが用意されている。

  • Vue.js用のものをNuxt向けにラップされている
  • ゼロコンフィグでイケルで!
    • のように見えるが全然そんなことはない
  • apollo linkをつなぎ合わせて処理を書いていく
  • Http linkで接続先を決めた後トークンを食べさせて最後にapollolinkにすべて食べさせれば設定終わり
  • クエリの定義ファイルを事前に用意する。
  • 指定した情報以外は帰ってこない
  • apollo boostはレールから外れると使いづらいのでやめておこう

設計指針

ただApolloClinentはページコンポーネントに閉じ込めるほうが良い。 ApolloClientはメモリ上にキャッシュを持つのでVuexに乗っけると2重管理になる

その他ローカルでしか使わないStateはVuexで管理して良い
コンポーネントとストア思考なのでページに閉じ込めていくのはいいと思う

ApolloClientとNuxt.jsの可能性
ReaactのApolloClientは公式チックだが、Nuxtのは非公式、まだ整備が足らないところも多いいが今後整備されていくはずなので使いやすくなるはず。

写真ギャラリーを作る

資料: https://speakerdeck.com/mtmtkzm/mtmtkzm-nuxt-meetup6

  • Rider 氏
  • 株式会社LIG
  • フロントエンドエンジニア

ビットコインのあれ

  • event-stream
  • flatmap-stream

株式会社LIGの北川氏は実際にいるけど違う人。もちろんLIGは関係ありません。

Nuxtのタイポとか直したらコントリビューターになった!

写真ギャラリーを作った話

  • カメラのEXIF情報が見れるようなやつ

同期

  • 技術の勉強
  • Engineerとして
  • カメラの情報をクリックなしでみたい

やったこと

  • SSR

  • 写真照射のルーティング

  • Flickerで人気写真を持ってくる

  • serverMiddlewareが便利!

    • NuxtにAPIを生せる
    • stateはfunctionを返しましょう
      • 不要な共有状態が起きる

  • ドキュメントにHerokuへのアップロードするドキュメントがある

  • けどまだ2.1はReleaseしてない…
    • ここでLive Release!
    • あ、エラーが

RoomClipの事例

  • 岡田

  • RoomClip

  • バックグラウンドはCodeigniterだったが最近Railsに以降

    • これを気にNuxt

  • コンポーネント志向にしたい

  • SSRにしたい
  • 簡単に開発したい

Web ←→ Nuxt Express ←→Rails

リニューアルまえはSEO点数が24点が64点まで向上!
SEOとパフォーマンスは高得点
インタラクティブになるまで遅い
LazyLoadをやりたい
→ Googleが実装方法を公開! → 4ポイント上昇 JSの実行速度が遅い

Vue,js 続。大規模アプリ開発
社外からみたら35点位だった

一休からサードパーティの最適化についてのきじが上がっている
PCからだと90点打してる!

  • モダンなフロント開発ができた
  • インフラに詳しくなった
    • Nodeサーバー周り
  • 社員募集中!

破壊しやすいNuxtプロジェクトの作り方

資料: https://slides.com/masaakikunsan/delete_nuxt

なぜ破壊しやすいほうがいいの

  • 仕様変更やデザイン修正などに高速に対応できる必要がある
  • その度その度の修正ではそのうち追いつかなくなる
  • 気軽に破壊して作り直す環境を構築することによって高速で開発する

破壊しやすいプロジェクトのために

  • ディレクトリ構造をしっかりする
    • 基本的にはNuxtの構造で作り切る
  • カラーは一つのファイルに纏めて呼び出す
    • SCSSでやっている
    • カラー修正に柔軟に対応できる
  • コンポーネントは最小単位で行う
    • Atomicデザインだと進むに連れて修正が大変になるので行わない
  • 実装をすすめて重複があったらMinxin化する
    • 無理に再利用性を高めない

  • 同じスタイルは一つのSCSSにまとめる

  • Twailwind cssおすすめ

  • 「運用フェーズになったらちゃんとしような」

個人的な感想

  • 参加者に結構な割合で触って数ヶ月という人が大くまだまだ浸透していく段階なんだなと言うのを感じました。
    • それでも2ヶ月でLTとかやっててすごい!自分ももっと外に出していきたい
  • 現場で使われ初めているようで各社の知見が出てきてる感じで嬉しい。
    • 勉強になります
  • 開発スピードを爆速にしていきたい人生だった

あ、写真取るの忘れてた!

相互リンク

  • 技術ブログ：ヤモト.tvp
    • 友人氏の技術ブログ 数学ガチ勢がエンジニアになっていく奮闘記