Baby steps to migratory bird

元半導体系エンジニア、今Webエンジニアの雑記

【初参加】We Are JavaScripters! @17th【初心者歓迎LT大会】に参加してきた

最近仕事でJSを触り始めた&前から気になっていた勉強会だったので参加してきました。

今回初参加だったのですが、お題目の通り経験浅めの方が発表しやすい雰囲気を保ちつつ、ベテランの方が初心者向けにかみ砕いた発表をしていたのが印象的でした。

こういう勉強会だと独学だけでは自分のアンテナに引っかからないテーマや、次に手をつけるのにハードルが高すぎないテーマが見つけられるのでありがたいです。

wajs.connpass.com

ハッシュタグはこちら

#wejs hashtag on Twitter

LTとメモ

LT0: メルカリスポンサーLT

会場スポンサーのメルカリさんのLTがあったそうなのですが、僕は遅れて行ったため聞くことができませんでした。

LT1: チームをCQRS @boiyaaさん

speakerdeck.com

このLTの途中から会場入りしました。

元々のエンジニアの職務として、

  • フロントエンド:UI作る
  • バックエンド:データ操作

という分け方をしていたが、 フロントエンドがクライアント寄りのサーバサイドを触るなど仕事の幅が拡張している。

そこらへんの定義を再考して見た方が良いよね、といった話でした。

LT2: 【ビギナー枠】フロント未経験者のReactプロダクト改善 @shikicheeさん

speakerdeck.com

Ubieが提供する病院の受付サービスについて

MBAでサービスデプロイしてから軌道に乗る手前で、 サービス拡大のためにどうプロダクトを改善していくかという内容でした。

  • 元々はブラウザ対応だったが、ブラウザ環境ならではの課題が見つかる

 (例)ボタンの押し間違えやすさなど

  • 技術的負債の解消

 - ESlint, prettierの導入

 - 業界標準をきちんと選定しつつ

 - 今後入ってくるであろうデザイナーが関わりやすいようなツールの選定

  • 得られた知見

 - Webでネイティブアプリっぽい動きをさせるのは大変。うまく行きそうだったら、すぐにPWAやアプリに置き換えよう

  • 技術の移り変わりが速いので参考記事は一年以内のものを選ぼう

LT3: new version of context in React 16.3 @sottarさん

speakerdeck.com

react v16.3 本日リリース

Reactのこと知らな過ぎてよくわからなかったのですが、 New context APIの話でした 笑

参考記事

medium.com

動画もあった

What's New in React 16.3.0 - YouTube

LT4: What is necessary for developer friendly UI? @kuwahara_jsriさん

speakerdeck.com

APIコールを利用した連鎖的UIのバッドサンプルのお話でした。

Riotのことはよくわからなかったので、ReactやVueと比較しつつ調べてみようと思います。

LT5: ForkwellスポンサーLT

できるエンジニアになるために、 社内評価と市場評価のギャップをどう埋めていくかが大事だよねというお話

  • 社内評価 > 市場評価:技術をつける=>勉強会等で発信していく
  • 社内評価 < 市場評価:コミュニケーションとって自分ができることを見える化

時間がないあなたにスカウトサービスあるよ!で締め。

LT6: 【ビギナー枠】Vuetifyで学んだVueのコンポーネントあれこれ @10tomok0さん

  • Vuetify:海外ではVueのOSSフレームワークで一番使われている

  • スライドアップされてないけど、今回の内容は技術書典4で頒布予定とのこと

  • チュートリアルややってみた系の記事だけでは実戦投入するまで至らない=>フレームワーク自体のソースを読む

  • PWA Beginners 勉強会 #3 - connpass

LT7: HyperappでMarkdownエディタを作って薄い本を書きたい @atsucoさん

speakerdeck.com

  • JS製超軽量ライブラリのHyperappでmdエディタを作ったお話

  • 開発環境はWebpack

  • Hyperappの良い点=>シンプル、JSXが使えるので見通しが良い、etc.

  • 詳しくは技術書典4で!まだ書けてないけど!

LT8: Osushiに見るフロントエンドのセキュリティ(仮)@shibe97さん

speakerdeck.com

先日のOsushi炎上=>復活までのお話でした。

めちゃくちゃつらい体験をしたはずなのに、笑いを交えつつその経験をシェアできる強さやそれを受け入れるWeb業界の文化が良いなぁと思ったり。

セキュリティの話もそうなんですが、一度炎上を経験した後の選択の仕方や復活させるまでのストーリーの作り方が参考になりました。

React本をだしたが事情により宣伝できず。。

  • 攻撃の数を減らす

Devtoolハック

  • 攻撃を防ぐ

セキュリティ系ヘッダー

 - X-frame-options

  Iframeでサイト丸ごと表示させて、攻撃側の誤クリックを誘発する

 - X-xss-protection

 - X-content-type-options

関連記事 devcentral.f5.com

  • 被害を最小限に抑える

 - そもそも取られるものをなくす

  =>可能な限り個人情報をAPIで返さない

LT9: 【ビギナー枠】継続的 npm update のために実践していること @codenote_netさん

speakerdeck.com

  • Tokyo otaku mode:スタックが全てJS

  • 毎日npm updateしてる?

 - npmローカルモジュールを活用:azuさんの記事が参考になる

 - ローカルモジュールを使えば新旧バージョンを共存させることができる

 - ライブラリ自動アップデートサービスの例:Greenkeeper.io, Dependabot

LT10: WASMとES modulesの話 @chikoskiさん

資料はアップされてないので関係ありそうなツイートをてきとうに貼る 笑

  • Web Assemblyはバイナリ製のモジュール

 C, Rust, 裏にLLVMを持っているkotolin などで作れる

  • モジュールとは?

 - 表、すなわち名前と値でできている

 - スコープもモジュールの一種とも言える

  • WASMはESと違って手動でインスタンス化しないといけない

 - Webpackで楽をする->頑張って開発中

 - ブラウザでインポートできるようにしようよ!と言い出した(少し先のお話)

次回

次回は4/24にリクルートにて

まとめ

完全に自分用勉強リストになっている。。