はじめに
いつも心は虹色に！ nikkieです。
3/29開催のWEBエンジニア勉強会のイベントレポートをお送りします。
勉強会の概要
WEBエンジニア勉強会 #12｜IT勉強会ならTECH PLAY［テックプレイ］
第12回目になる、WEBエンジニア初心者でも参加できることを心がけ・気軽に発表できるWEBエンジニアのための勉強会コミュニティです。初心者の方でも、一人でも、SIerの方も、学生の方も、みなさんお気軽にご参加ください。
今回もビアバッシュ形式の勉強会です。 ピザ・飲み物・おつまみを用意する予定です。 飲み食いしながらワイワイとやりましょう！
昨年11月の10回目から2月の11回、そして今回と3回目の参加です。
前回感じたのですが、広大なWebという領域をサーバサイド、フロントエンド、インフラといろいろな切り口で聞けるのが魅力だと思っています。
また、普段サーバサイドが多い身としては、フロントエンドにキャッチアップできる機会でもあり、ありがたいです。
発表振り返り
#webエンジニア勉強会12
— nikkie (@ftnext) 2019年3月29日
ありがとうございましたー。
心理的安全性を確保する立ち上がり。
ピザコーラという鉄板をつまみながら、HTTP/2やmedia queryのpreference、JS（Nativeやhttps://t.co/gvdqMGKr91）、ブラウザ拡張の話と色々聞けましたー。
まとめのBGMはGet Wild！ pic.twitter.com/TKCH8QznyV
特に聞きたかった2つを中心に振り返ります。
WEBサイトを HTTP/2 に移行した話
実際の案件の事例を元に、HTTP/2について知ることができました。
HTTP/2 移行で期待できること
訪問者の体感的な待ち時間を減らす
- HTTP/1.xのHead of Line Block（HoLブロック）を回避
- ファイルを一つずつ順番に取得
- 前のリクエストが終わるまでの待ち時間が発生
- 開発者ツールのNetworkタブが階段状
- HTTP/2のストリーム多重化の恩恵にあずかる
- 複数リソースを並行してダウンロードできる
具体的にやったこと
- Apache httpdを最新化（HTTP/2対応バージョン）
- httpd.confのProtocolsにh2を指定（その後、apache 再起動）
- 動作確認：開発者ツール→Network→Protocol h2という表示を確認
簡単な操作で効果が出るHTTP/2対応、機会があったらやってみたいですね。
（HTTP/2はまだ30%台の普及だそうなので、今後経験する人が増えそうな印象です）
1人で開発したWEBサービスが500社に導入されるために採用した3つの技術とたった1つの考え方
「個人開発の成功事例かな」と楽しみにしていました。
フルスタック+Bizもできるというめちゃくちゃすごいエンジニアの方でした。
3つの技術
（Railsは惜しくも取り上げられませんでした。次点扱い？）
1つの考え方："正しいもの"を最速で作る
- 最速：ベンチャーは存続に関わるのでスピード感が大事（←激同）
- 正しいもの：ユーザが欲しているものを作る
他の発表について簡単に振り返ります。
スポンサーセッション：「心理的安全性」が組織をRe:Designする
チェックイン（今の自分の気持ちの共有）とペアトーク／シェアトーク（ペアで他己紹介）で、勉強会の雰囲気が和らぎました。
11回目でも取り上げられた「心理的安全性」（セーフティ！）。
2000年代初頭にドラッカーも言及していたというのは、すごいですね。
React Nativeで作るiOSアプリケーションの環境構築設計
2年くらい前に、ハマりまくりながら、Swift2系でiOSアプリ開発したのを思い出しながら聞いていました。
Clean Architectureをアレンジして採用（Layered（データの流れ）やOnionを採用）というのが興味深かったです。
Nativeは未経験なのですが、「NativeからiOSアプリを開発するのはどんな感じなんだろう」と気になるところです。
Dark Side of the Web
恐怖でまだゾクゾクしている話。
- 全員に同じようにWebサイトが見えている時代は終わった
- ユーザが閲覧環境の嗜好をOSに設定し、それをCSSで設定する
- ダークモードは、対応しなくても影響ないので、簡単な部類。ハイコントラストモードは対応しないと、ユーザにはネガポジ反転したコンテンツが見えてしまう
メディアクエリは現在も増加中とのことで、設定する手間が結構かさみそうな印象。
簡単に設定できるライブラリはニーズがありそうです。
React+TypeScript+vte.cx で在庫管理システムを作った話
事例から vte.cx｜サーバ構築ゼロでフロントエンドが主役の開発を の紹介でした。
- ビジョン：HTMLとJSの知識だけでWebサービス作れる
- 納品書のPDF作成（サーバサイドをReactで書き、SSRでPDF表示）
- 売りはKVSを使ったパフォーマンス（例：ページネーション）
- 開発向けは無料で使えるようなので、JSから始めた方は使ってみてもいいかも
悪意あるブラウザ拡張への対策方法
悪意あるブラウザ拡張への対策方法 - [2019/03/29] WEBエンジニア勉強会 #12 LT
ブラウザ拡張でできること
- ユーザが見ているページにCSS追加、JS実行（想起：Qiitaの「いいね」を「すごーい！」に変える - Qiita ）
- 通信への割り込み（例：アドブロック）
- 悪意ある拡張はやりたい放題できる
- ページの情報にとどまらず、セッション情報やPOSTボディの中身も取得できる
対策方法
- 権限の少ない拡張を選ぶ
- Chromeを使う（権限の制約が可能）
- 自作 ※悪意ある外部ライブラリに注意
拡張は何でもできてしまうので、技術で縛れず、ポリシーで縛っているという印象です。
感想
参加するたびに感じていますが、JSの存在感は大きいですね。
vte.cxの話（JSだけでWebアプリ）やNativeの話（JSでiOSアプリ開発）など、JSが登場しました。
JSが特別というよりも、何の言語から始めてもサービスが作れる状況が整いつつあるという印象です。
今回特徴的なトピックはブラウザ拡張だと思います。
500社導入されるまでの話や悪意あるブラウザ拡張の話で取り上げられました。
「こんなツールあったらな」を実現できる技術だと思うので、触ってみたくなりました。
次回は5月中旬〜下旬予定だそうで、楽しみにしています。
発表者、運営者、参加者の皆さま、どうもありがとうございました。
