あいつの日誌β

働きながら旅しています。

Meguro.es # 20 @ Drecom で LT してきました

勉強会

最近フロント界隈の勉強会に参加するようになったのですが、とある勉強会に来ていた人に「他にどんな勉強会に行っているんですか？」と聞いたところ Megro.es を教えてもらいましたので参加してきました。

meguroes.connpass.com

スポンサー

今回の会場は株式会社ドリコム様が提供されていました。ありがとうございます。 そして個人スポンサーもいらっしゃったそうです。ありがとうございます！

会場の雰囲気

思った以上に参加者が多く、お酒も一応飲みながら〜という事でしたが割とみなさん真面目な雰囲気(?)でした。参加者がお酒飲みたい人が少なめだったからだと思うのですが、割と厳かな雰囲気になっており、私は少し緊張しながらLTしました。小心者の登壇者の為にも、参加者の皆さまにはもっと出来上がって頂けば幸いです。

話した内容: VuePress で Blog を作る

https://okamuuu.com/talks/2019/2019-04-04.megro-es20@Drecom.html

Blog を書くのにオレオレCMSから始まり、Gatsby, Nuxt.js, VuePress と色々なツールを使っていたのですが、現時点では VuePress が一番気に入っているのでそれを使っています。なんですがテクニカルドキュメントを書くように最適化されているツールなのでそれを Blog のように振る舞うようにカスタマイズした、という話しです。

VuePress

そんな中、今度は VuePress という新しいツールが発明され、CSS がとても綺麗だったんで気に入っています。今回 Blog 化をする方法を紹介していますが実はプラグインがすでに存在します。 @vuepress/plugin-blog@next なんですが、まだ alpha 版なのでドキュメントがほとんどなく、結局ソースコードを読んだ結果自分でカスタマイズした方が良さそうだと思いました。

そのとき得た Tips を共有しようと思い登壇したのですが、大事なのは以下2点

  • module.exports が返すのは plain JavaScript object である必要があるが、オブジェクトを返すならば関数をセットでき、その場合は引数に options, ctx を受け取ることができる
  • life cycle に ready という hook 関数が存在しており、options, ctx を引き渡すことができる
module.exports = (options, ctx) => {
  // 最終的に plain object を返せば OK
  return {
    ready() {
      const { pages, themeConfig } = options
      // pages や themeConfig の設定をここで頑張る
    }
  },
  ...
}

上記の原理を覚えておくと結構カスタマイズできると思います。

LT一覧

以下各LTの内容です。内容間違えていたらごめんなさい。

Gatsbyで導入事例をバシバシ読めるSPAなLPを作った話 @kikunantoka

board gameを趣味で作成されている方のLT.PHPで動的に動いていたLPが重くてたまに落ちるので Gatsby.js + Netlify にしたお話。

React.js のような View component はデザインが関数化できて社内の複数のサービスで共通のレイアウトを担保できるのでとても良い改善な気がします。Netlify は何も考えなくても(?) deploy できるし https にするの簡単だし私も気に入っています。

automatically build のお話は私知らなかったのでとてもタメになりました。デフォルトで Every pull request gets deployed in its own context with a unique URL. となっていて、勝手にネット上に PR 時のデータが公開され、削除する為には 一度全て削除する 必要があるそうです。

それから計測した結果、Gatsby にしたことによって SEO が悪くなったことはない、という事でした。

react-redux code reading @sadnessOjisan

ライブラリのコードを読むことによって、パフォーマンスチューニングの手法が理解できるようになったというお話。redux のコードを読むのは大変なのですが star の数が大きいライブラリを読むのはとても良い勉強になるので良いと思いました。

パフォチューって言葉、私も言いたいです。ちなみに unstaed と typeless が最近登場しています。

VuePress で Blog を作る @okamuuu

私のターン

.d.ts を解析して破壊的変更を検知する @L_e_k_o

話が難しくてよく分からなかったのですがソースコードから API Document 生成することができるのだったらその処理を利用してコードの差分だけで feat, chore, fix, test, docs みたいな commit prefix を自動的に判別できるかもしれない、というお話かな？

もしかしたら fix, test, doc みたいな分類はできるかもしれないし、それだけでも使い所あるのかも、デモが未完成らしいので続編を期待

自分の結婚披露宴のために Vue.js と firebase で画像投稿サービスを作った話 skmtko

Vue.js + Firebase で画像投稿サービスを作ったそうです。結婚式でプランナーからフォトシャワー(10万円)の提案を聞いて「自分で作れそう、というか作りたい」という非常にエンジニアらしい動機でサービスを作った時の体験談。

トラブルがあって現実はそんなにあまくなかったという話も面白かったのですが、「親族が割と楽しげに自分のサービスを使ってくれた」という話しを聞いて密かに胸熱でした。

そしてリサイズ大事すよねえ。

Storybook とスナップショットテストで API開発の完成を待たないフロント開発フロー @_sisisin

API開発の完成を待たないフロント開発フロー、というのはほとんどの人が同様の状況にはならない気がするのですが...

reg-suit という component の差分を 画像 として比較するツールのようです。私は知らなかったツールですがこれはなかなか良さそうです。canvas が微妙に同じ結果にならない、といった問題はあるそうなのですが、これによって リファクタやり放題 という現場を作り上げたとか。言葉にすると簡単だけどそこそこの統率力がないと出来ないと思うので強いチームだと思いました。

ただ 画像の差分を計算するのは重たい処理だと思うのですが Local PC でもストレスなくできたりするのかな？機会があったら試してみたいです。

JavaScript + Docker の知見@odan3240

開発環境を Docker にした場合ホストPCで編集した内容を container に反映させる Tips を紹介。全部 Docker でやろうとすると結構大変らしいです。VSCode で補完させるためには node_modles の扱いを気にしないといけないし node-gyp とか不安？

Docker は便利なんだけどどこまで頑張るのが便利なんでしょうね。私も一時期は仮想環境を用意しないエンジニアはダメな意味で怠惰だ、と思っていましたが iOS のデバックの時にネットワークの設定が面倒すぎて「やっぱ仮想環境でなくてもいいかな」という風に趣旨替えしました。

個人的にはサーバーサイドの API だったり、デザイナーに作業してもらうための storybook の提供だったりは Docker があったら便利だと思いますが、フロントで Docker にするとコストがかかるんだったら頑張らなくてもいいんじゃないかと思いました。

今日得た知見

  • netlify の automatically build に注意
  • reg-suit すごい

あとそれから

こちらに公式な記事があります。過去の記事も見れるので興味のある人は参加してみてはいかがでしょうか?こちらからは以上です。

https://meguro.es/posts/meguro-es-20