I want to be "I can develop frontend a little"

とあるエンドエンジニアの勉強会や技術系の個人的メモ集。

トップ > 勉強会 > 2019/07/10【シューマイ】Tech Lead Engineerから最新技術を学べ！Vue.js編の勉強会に参加してきました！

2019/07/10【シューマイ】Tech Lead Engineerから最新技術を学べ！Vue.js編の勉強会に参加してきました！

勉強会 Vue.js

2019/07/10（水）に【シューマイ】Tech Lead Engineerから最新技術を学べ！Vue.js編に参加しました。
そのときのメモです。

Vue.jsのslotを活用した汎用的コンポーネント設計について

‌株式会社プラムザの鳩 洋子氏

speakerdeck.com

ざっくり内容

Slotを使う動機

Slotことはじめ

  • Slotは？
    • コンテンツ配信受け口として使用
    • コンテンツ部分にはHTMLやコンポーネントも挿入可能
      • slotコンテンツと呼ぶ
      • 親のデータもOK
    • フォールバックコンテンツ
      • デフォルトのコンテンツを設定可能
    • Named Slot
      • 複数箇所にSlotを使うことも可能
    • スコープ付きslot

Slot活用例

  • モーダル
  • タスクリスト
    • UIパーツ
    • 挙動が同じだけれども見た目がかなり違う
    • 中身を変えればOK

UIフレームワーク

  • UIフレームワークは、slotとscorped slotに基づいて作られている
  • 理解していると使いやすいかも
  • 例：Vuetify

Slotの注意点

  • Vue.js2.6.0以降から新しいシンタックスになる
  • Vue.jsの公式ドキュメントを見ていこう

質疑応答

  • モブプロ会は奪い合い
  • Vue.jsのslotのキャッチアップは大変ですか？
    • 今日のスライドで使えるはず！

ひとこと感想

slot面白そう！

Vue/Vuexを限りなくReact/Redux風に書く話

‌外資系IT企業の高野 拓貴氏

docs.google.com

ざっくり内容

趣味

typescriptFSA

  • 洗練されている
  • FSA（Flux Standard Action）
    • Reduxが参照している非公式なコーディング規約（＝半公式？）
    • Actionとして用いるオブジェクトの型を設定
  • type-script-fsaのactionCreator.async()が便利！
    • 非同期の関数がはじまったとき、失敗したとき、成功したときを機械的に簡単に設定できる
  • 要点
    • ローディング状態とエラー状態をいい感じにしてくれる
    • Vue.jsで書くとややこしめ

createAsyncAction

  • Reduxと同じように書ける
    • 読み込むimportが減らせる

まとめ

  • FSAはアクションとして用いるオブジェクト型の非公式な規約
  • typescript-fsaのactionCreator.async()が非同期アクションのローディング状態とエラーリングを管理がとても便利
  • 同じ書き味でVuexでも単純な関数で書ける
  • 高階層関数 createAsyncAction が便利

質疑応答

  • 気になっている技術は？
    • GRPC
  • Vue.js/React.jsのかきわけは？
    • 趣味はVue.js、仕事はReact.js
      • 安全に書けるのがReact.jsのため、書きやすくて楽なのはVue.jsのため

        ひとこと感想

        よなよな資料を作られたそうですが、充実した内容でした。

　Vue.js書けるAtomic Desine -コンポーネント分割の指針-

‌GMOインターネット株式会社の成瀬 允宣氏

speakerdeck.com

Vue.jsとAtomicDesignの関係

  • 新規プロジェクトの立ち上げ
    • Vue.js入れたい
      • それに対してJQuey入れてもいいですか？という言葉
      • 困った
  • 何故Vue.jsを使いたい？
  • 人を動かすためのステップ
    • やってみせ、言って聞かせて、させてみせ、褒めてやらねば、人は動かじ
      • ひとつのページを分析
        • ページを担当分けしてみんなでやってもらう
      • データは親が責任持って変えないといけない
        • 子がデータを変更して、親に渡してはいけない
      • 褒めるタイミングはレビュー
        • 指摘するだけがレビューじゃない！
        • 慣れる前は細かい単位で

          まとめ

  • Atomic Designあるべきじゃなくていいよ
  • 実践に道筋を立てることが大切

質疑応答

  • Atom≠HTMLの最小単位という認識ですが、外すことはありますか？
    • 同義になることがおおいけど、そうでないときもあります
  • ボタンの中にアイコンが入る場合は？
    • iconButtonにする
  • Vue.jsでVuexかpagesでしたらどっち？
    • vuexはメインじゃない
    • 親にデータを渡して子は独立
    • ログインとかは使う
    • Vuexを使うとコンポーネント同士が対話できてしまう
    • 使わない方が良さそう
  • テストどの単位でやったほうがいいですか？
    • 画面はテストをしようとちゃいけない
    • テストをしないといけないViewは作るのはおかしい
    • やるとしたらコンポーネント単位
  • クイックイベントどこでハンドリングする？
    • Organismsより上
    • pagesがおすすめ
  • axiosなどの非同期処理はpagesのみですか？
    • ラップしてエラーや成功のコールバックだけ書くようにする
    • promiseは人のマインドセットによる

ひとこと感想

技術をチームに反映させるには自分が動かないと、ですね！

懇親会

シューマイの勉強会ではシューマイが懇親会に出てくるという噂を聞いていましたが、本当でした…！
技術力不足を感じたので、がんばりたいと思います！

f:id:matsumana07384:20190716220750j:plain