WCAN 2020 Frontend Special 参加メモ
今日はWCAN 2020 Frontend Specialに参加。私！フロントエンドの！人なんです！と叫びつつ、交通整理ばっかやってる今日この頃・・・セミナー通いも動画＆デザイン寄りになりがちな中、久しぶりのフロントエンド回です。
フロントエンドエンジニアのロードマップと学習法
ともすた合同会社 / 株式会社 H2O space たにぐち まことさん
SETP01：HTML/CSS/SCSS
・HTML/CSSはないがしろにされがち
・フロントエンドやデザインの教材では「知っている」ことが前提
・「正しく」使えるようになることが大事
・SCSS／CSS設計も再確認を
→ 仕様／規約をきちんと把握すること
→ 思い込みや誤解は危険
→ 入門書だけではなくドキュメントで確認する
STEP02：キーボード/タッチタイピング
・タイピングが早く正確だと開発や学習がスムーズ
・どんな仕事でも役に立つ
STEP03：エディター
・便利な機能を使えているか
・自分に合った設定にできているか
・拡張機能を使いこなせているか
STEP04：ES6/TypeScript
・ES6
→ その構文はEC6以降か
→ クラス定義やオブジェクト指向は使えているか
・TypeScript
→ Microsoftが開発
→ Javascriptのスーパーセット
→ 「型」の概念を取り入れた
STEP06：Git/GitHub
・コマンドでも使えるか
・コンフリクトが起きたときに解消できるか
・効果的なブランチ運用ができるか
STEP07：コマンドライン
・「黒い画面」を怖がらない
・「パス」の概念理解ができているか
・コマンドの方が10倍速い作業もある
STEP08：Node.js/npm
・Node Package Manager
・JavaScript（Node.js）のパッケージ
・多くのツールがnpmで提供されている
STEP09：トランスパイル＆ビルド
・トランスパイラー：TypeScript Compiler／Babelなど
→ EC6以降の書式を非対応ブラウザ用の古いJSに買い換えてくれる
・ビルドツール：Node.js/gulpなど
→ SCSSのコンパイル、JSのトランスパイル、画像の最適化など
STEP10：デバッガー（Chrome DevTools）
・JavaScriptを書き間違えた時の調査
・CSSが正しく適用されない時の調査
・デバイス幅が変わった時の表示の検査
STEP11：フレームワーク
・React
・Next.js
・Vue.js
勉強法
・書籍＋〇〇
→ 安価に自分のペースで進められる
・公式ドキュメントを読む
→ 進化が早い分野なので書籍では追いつかない場合がある
→ 間違いが少なく最新の情報が入手できる
→ 英語、怖くない！怖がらない！
マークアップを進化させるWAI-ARIAの基本
株式会社サイバーエージェント 桝田 草一さん
WAI-ARIA（ウェイアリア）とは何か
Web Accessibility Initiative - Accessible Rich Internet Applications
ウェブのアクセシビリティを高めるための技術仕様
WAI-ARIAはなぜ必要か
ウェブがアプリケーション化し、意味も振る舞いも既存のHTMLでは表現できなくなってきたが、HTMLを新たに定義追加するには時間がかかる
→ ex）タブUI／開閉／current／離れた要素感の関係性
WAI-ARIAによってアプリケーション化するウェブにおいてホスト言語（HTMLなど）に不足しているセマンティクスを属性で補完する
→ ただし、HTMLにあるセマンティクスはHTMLで実装するべき
WAI-ARIAは何ができるのか
セマンティクスの補完
・役割：role
・状態：aria-*
・プロパティ：aria-*
WAI-ARIAが保管していたセマンティクスをホスト言語が取り込んでいくことで相互進化していく
→ WAI-ARIAとホスト言語と共に進化するが進化の速度は異なる
WAI-ARIAをどう使うか
・HTMLでは背セマンティクスが足りない時
→ Live region（ライブリージョン）：自動更新される値/バリデーションエラーなどの変化を伝える
→ aria-expanded：要素の開閉を表す
→ aria-label：SVGアイコンなどに名前をつける
WAI-ARIAのデバッグ
・ブラウザの開発者ツール
→ DOMの目視
→ ブラウザが計算したAccessibility Objectが見られる
・スタイルと密結合させる
・テストツールを利用する
・スクリーンリーダーを使う
WAI-ARIAをどう学ぶか
・仕様を読む：HTMLとWAI-ARIA
・WAI公式文書を参照する
モダンなCSS設計 - Vue.js/React時代のCSSの書き方とこれから -
株式会社ICS 海老江 優太さん
今までのCSSとCSS設計
・サイト全体に適用されるグローバルなもの
→ CSS設計が重要
→ 詳細度での上書き＆!important地獄に・・・
→ BEM/FLOCSS
・CSS設計は技術ではなく、実装者間の「約束事」
→ 理解と順守がされないと破綻してしまう
これからのCSS
→ コンポーネント単位でのCSSスコープが可能に
・vue.js：ScpedCSS
メリット
→ vue.jsを利用していればライブラリの追加などせずに利用可能。元のクラスの記述が残るのでCSSデバッグがしやすい
デメリット
→ グローバルCSSの影響を受ける。Vueコンポーネント特有の仕様把握が必要
・React：CSS Modules
メリット
→ 命名被りなどの光量が不要。コンパイル時にCSS名がわかるのでスクレイピング対策になる
デメリット
→ CSSデバッグに工夫が必要
・React：CSS in JS
メリット
→ 通常のCSSでは行えない条件付きスタイリングなどが必要
デメリット
→ JSにCSSを書くので、エディタ補完が効かない場合がある。Reactコンポーネント化が必須なので、相応の知識がないと編集ができない
これからのCSS設計はどうあるべきか？
・スコープが絞れるようになってもCSS設計が必要
・CSS in JSの場合でもコンポーネント設計が必要
→ 命名による粒度管理は不要になり、CSS設計の責任範囲は狭くなった
よいCSSとは？
・予測可能性
スタイルを変更した時の影響範囲が正しく予測できる
・再利用性
既存コンポーネントを別の箇所で利用する場合に書き直しや上書きが不要
・保守性
追加や更新、再配置する際に既存コードのリファクタリングが不要
・拡張性
プロジェクトの拡張／開発者の増加があっても管理が簡単にできる
VueもReactも使わないJamstack入門
株式会社ピクセルグリッド 中村 享介さん
Jamstackとは？
高速なWebサイトやアプリを作る方法
・データを埋め込んだ静的HTMLを事前に生成しておく
・CDNで配信する
→ HTMLがすでにある＆CDN配信できるから表示が高速
事前にサイト生成するとは？
・Jamstackでは静的なサイトが必要
・静的サイトジェネレーター
Gatsby：React + GraphQLが必要な場合が多い
Next.js/NuxtJS：静的ファイルも作れるがJamstack用ではない
11y：jsフレームワークが決まっておらず超シンプル
参考
参考書籍
■これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん
https://www.amazon.co.jp/dp/B06XT19H2D/
■Web制作者のためのSassの教科書 改訂2版
https://www.amazon.co.jp/dp/B075LCKFLL/
■CSS設計完全ガイド ~詳細解説+実践的モジュール集
https://www.amazon.co.jp/dp/429711173X/
■徹底解説Visual Studio Code
https://www.amazon.co.jp/dp/4863542887/
■改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
https://www.amazon.co.jp/dp/477418411X/
■サルでもわかるGit入門
https://www.amazon.co.jp/dp/4295004839/
■これから学ぶmacOSターミナル
https://www.amazon.co.jp/dp/B01NBK3TCY/
■Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門
https://www.amazon.co.jp/dp/4863542402/
この記事が気に入ったらサポートをしてみませんか？