Wiz Engineer 技術共有会　2月第1週

弊社では週に一度、1時間の技術共有会を行なっています。
内容としては、最近のTechなニュースや、気になること、仕事の役に立ちそうな情報をざっくばらんに共有しています。

React.ComponentPropsのお話

Elementが持つPropsを全て受け入れるようにする

• inputにおけるnameやtypeなどElementが持つPropsを後から追加する必要がない

• Propsが冗長になってたりする人はこういった書き方を検討してもいいかも

参考記事：React.ComponentPropsを使ったコンポーネントの Props 設計

問い合わせ率が３年で半分になった

オペレーションコストが整理された。
例）お問い合わせページまでの導線が複雑→それまでのページで解決を促す→現場の負担軽減
エンジニアがコードを書くのが仕事であるが手段、現場の活動から課題を特定して改善できるといい。

今後も問い合わせすることなくサービスを不便なく使えるよう、アプリ/FAQで解決できる環境をつくっていきます。問い合わせ率を今よりさらに半分にします！

https://thirayu.net/blog/toiawase-hanbun

UIを組むときに何も考えないずにやりたいことを叶えられるUIを作りたいですね。

参考記事：問い合わせ率が3年間で半分になった

Theatre.jsについての所感教えて

アニメーションのjsライブラリ
ブラウザのエディタ上で編集したアニメーションをコード化するもの？

• スター数は現在8.7k

• まだバージョン1だから開発に取り入れるのは時期尚早？

• 似たようなものでいうとAFで作ったものをJsonで読み込んで使うものもありますね！

• 製作コストは高そうなんで、アニメーションを追加するだけで単価は跳ね上がるんですかね？

• デザイナーがこの辺り触っていくんですかね？

  • 触ってくれるとフロントとしては助かりますね笑

  • なんとなくなデザイナーのアニメーションを説明としてのツールとなるかも？

VS code拡張機能 Live Serverが便利！

スマホの実機確認どうしてます？

テスト環境にあげてスマホでアクセスしてました…etc

Live Serverを使うと非常に楽になりますよ！
確認手順はこちらの記事がわかりやすいかったです。

それもいいけどngrok見せたろか

下記でインストール

brew install ngrok/ngrok/ngrok

ngrok http localhost 0000

このコマンド一発でURLが生成される
httpsも使えるし非常に便利！

• 自分のローカルでの開発状況を一旦確認してもらうことにも非常に有効

• 時間制限はなし

• 立ち上げるたびにURLは変更される

VScodeの基本キーボードショートカット

⌘+P

• 特定のファイルにアクセスしやすい

• ファイル末尾に:Nを入力するとN行目に移動できる。