s平面の左側

左側なので安定してます（制御工学の話は出てきません）

【資料あり】「Laravel/Vue.js 勉強会 #4」に参加して LT もしてきた

技術

一昨日の4/25開催された Laravel/Vue.js 勉強会に参加してきた。

laravue.connpass.com

Laravel/Vue.js 勉強会は第1回に登壇枠で参加させていただいたこともある。

blog.okashoi.net

以下、参加しながら取ったメモ。

[登壇枠1] Laravel と Nuxt.js を業務で取り入れる際に得た知見

www.slideshare.net

  • 株式会社 IT プロパートナーズ
    • 戎島さん @isao_x ／森山さん @frostndays
  • プロジェクト概要
    • toC の 大規模 SNS のようなもの
    • Nuxt.js → SSRモード／SPAモードが選べる
      • ogpタグの懸念から SSR モード
  • 認証方法
    • APIでやる Laravel Passport
      • ルーティングが自動生成
    • facebook
      • laravelpassport-facebook-login
      • デフォルトエンドポイントを変更
      • トークン有効期限チェック処理を追加した
  • Nuxt.js 環境設定読み込み
    • env.js/env.example.js というファイルを作った
      • .env と同じようなことがやりたい
    • nuxt.cofig.js で env.js を require する
      • 公式ドキュメントに載っているような定数の呼び出し方が使えるように
      • require するのは ES5 を使っているため
  • axios のラッパー
    • ヘッダにデフォルトの値をセットしたいから
    • SSR のときは Laravel のサーバにはプライベートネットワークでアクセス可
    • ユーザが見ている画面からはグローバルネットワークから
  • 役に立ったツール
    • Clockwork
      • Chrome 拡張
      • ブラウザだけで debugbar のようなことが実現できる
    • sequel-pro-laravel-export
      • migration 自動生成する sequelPro 拡張
    • SQL to Laravel Builder
      • SQL → クエリビルダの記法に変換
    • Vue.js devtools
    • PHP_CodeSniffer / PSR-2
    • ES6 は airbnb のものをベースに
    • Vue.js 公式スタイルガイド

[登壇枠2] AWSで構築する Nuxt.js のインフラ構築3選

gitpitch.com

  • 株式会社SCOUTER
    • 松本さん @kotamat
  • Nuxt.js
  • Nuxtjs の良さの記事は多いけど、インフラの記事は少ない！
  • Laravel + Nuxt generate
    • 一緒のリポジトリに置く
    • travis CI で NuxtGenerte する
    • Codedeploy
    • nginx でリバースプロキシ
    • ビルド時にチェックすべきポイント
      • client/ と nuxt.config.js を追加
      • resource/assets/js とか邪魔なので消す
    • プロビジョニングのために appspec.yml を tracis.yml と同じ階層に置く
    • dev と nuxt generate でフローが違う
      • CI の際に nuxt generate してエラーのとき落とさせるようにする
  • WordPress + Nuxt SSR
    • SEO 対策必須のため SSR
    • forever
      • node のプロセス
      • プロセスが切れたタイミングで再起動してくれる
        • forever restart で再起動できるが、つまりどころが多いらしい
  • express で構築する場合
    • デフォルトの nuxt/nuxt start が使えなくなる

[登壇枠3] Element のすすめ

speakerdeck.com

  • 株式会社 FABRIC TOKYO
    • 中筋さん
  • Element の概要
  • 使用した理由
    • セレクトボックスで選択順の制御などで楽したい → Cascader が使えた
  • 実装面の考慮
    • vaue, label の組を data(state) にもたせて options props に渡す
    • マスタは API から取得

[LT枠1] VueでJSXを使うのはありなのか

speakerdeck.com

  • 株式会社 SCOUTER
    • @ryotakodaira
  • あえて JSX を使うのも場合によってはあり
    • 部分的にメソッドに切り出して関心の分離が行える
  • JSX ではデフォルトで v-model ディレクティブが使えない
    • パッケージを入れれば使える

[LT枠2] Laravel 5.6 デフォルトの例外ハンドリング処理をまとめてみた

www.slideshare.net

  • 自分の発表
  • 直近でこの辺りの設定するときに迷ったこと・調べたことをまとめた
    • バリデーションエラー時、 abort() 時の挙動についてなど
  • 設定の詳細については後で別記事にまとめようと思う

感想

その後、懇親会で多くの方とお話させていただいた。

やり取りの中で挙がったのが、この勉強会に限らずに世の中の情報のほとんどは「Laravel と Vue.js それぞれの知見」という感じで「両者ががっちり噛み合って何かをやる」というの話は少ないな、ということ。

もともと「Laravel が Vue.js を公式サポート」というのも、Laravel Mix という webpack 設定の wrapper を提供しているだけなのでやむなし、といった感じか。

そもそもアーキテクトとして「バックエンドとフロントが密に結合する」というのがあまりよろしくない気がしているので、それはそれでいいのだろう。

また、今回の勉強会では Nuxt.js が推されていた（主催の @kotamat さんが NuxtMeetup も開催していることもあって）ので触れてみようと思った。