フロントエンド勉強会(オンライン)に参加してみた
今回はフロントエンド技術や勉強法についてのオンライン勉強会に参加してきました。えっ、こんな豪華な内容無料なん…?とがくがくするほど豪華で内容も盛りだくさんで濃厚な4時間でした。(ありがとうございました!)
私の勉強進度がまだ追いついていないトピックもあり、全ては拾い切れなかったのですが、今回自分が理解して収穫できた内容だけ今後の自分のために学んだことや感想などをまとめておこうと思います。
今回参加した勉強会はこちら↓
ちょっと長めなので目次
- メインセッション1【フロントエンド勉強ステップ】
- メインセッション2【WAI-ARIAの基本】
- メインセッション3【モダンなCSS設計/Vue.jsとReact時代におけるCSSの書き方】
- メインセッション4【VueもReactも使わないJamstack入門】
- Lightning Talk
- まとめ
メインセッション1【フロントエンド勉強ステップ】
パネラー:ともすた合同会社 / 株式会社 H2O space たにぐち まことさん
内容は、これからフロントエンドエンジニアとして力を付けていくための勉強ステップでした。私はWebデザイナーを目指していますが、実装のこともしっかり分かって、最終的には自分でもシンプルな実装くらいまではできるようになりたいと思っているのでとても参考になりました。参考文献もSTEPごとに良書をおすすめして頂いたので、迷わず進んでいけそうでした!
私にとって個人的に必要かつ優先度が他より高いと感じたのは、
- 現在勉強しているCSS設計完全ガイドを早く読み終えて実践に移る
- Visual Studio Codeともっと仲良くなる
- 今の自分のJSの知識を早くES6にアップデートしながらさらに深堀りする
- TyprScriptの概念、導入部分まで理解する
- Gitを操作する際に、コマンドラインでできる操作をもっと増やす
- パスの概念を改めて復習する
というところでした。他にもnpmやトランスパイル、ビルドツール、React、ホスティング環境やデプロイ環境についてなどまだまだたくさんSTEPはご紹介頂いたのですが、まず一旦は目の前の課題を1つずつこなしていこうということで割愛します。
こうしてリストを眺めてみると、分身して全て同時進行で進めて行きたい!!!という願望がすごいのですが、そういうわけにもいかないのでしっかり計画を立ててコツコツ積み上げていこうと思います。
現在勉強中の愛読書はこちら↓
メインセッション2【WAI-ARIAの基本】
パネラー:株式会社サイバーエージェント 桝田 草一さん
内容は、WAI-ARIAについての基本的な知識についてでした。アクセシビリティという言葉やなんとなくのイメージは知っていたものの、現在の私の勉強内容やアウトプットとしての製作時にアクセシビリティについて考える機会はほとんどなかったので、今回こうして基本的なことを分かりやすく体系的にまとめて頂いた講義内容はとても新鮮で良い出会いでした。
WAI-ARIA公式(たぶんここで合ってるはず…)↓
このセッションで学んだこと(ざっくり)
- WAI-ARIAというのはHTMLに不足しているセマンティクスを補完するための機能
- HTMLの中で不足しているセマンティクスというのは、Webアプリケーションを制作する際に必要なもの(元々文書構造を想定しているHTMLで、アプリケーション機能を搭載することが増えており、従来の文書構造のために準備された属性等だけではカバーし切れない)
- そもそもなぜHTMLのセマンティクスを補完しなければいけないのか?(補完しなくてもきちんと機能するのに)
- HTMLをきちんと記述することでアクセシビリティが向上する
- その例として、スクリーンリーダーなどの支援技術ユーザーが恩恵を受けることができる
特に最後の項目に関していくつか実装例の動画を見せて頂いて、目から鱗でした。そういった支援技術を機能させるために文書構造がきちんとしている必要があるということ、実際に機能した際の動きを目の当たりにして、なるほどたしかにアクセシビリティ大事だ…と実感することができました。
WAI-ARIAのセクションでWebアプリが増えてきて、セマンティックな属性が不足しているからそれを補う必要がある、という考え方がそもそも「なるほど、そういうこと考えるのも大切なのか…!」ってなった#wcan
— ゆうり🍁WebDesign (@yuuri_webDesign) 2020年11月14日
CSSを使えば視界的に補完することはできるけど、スクリーンリーダーなどの支援技術ユーザーにも届けるためにはHTMLで示す必要があって、でもHTMLには不足しているので補完が必要→WAI-ARIAが生まれたってことかな?なるほど…#wcan
— ゆうり🍁WebDesign (@yuuri_webDesign) 2020年11月14日
当面はまだ実装の技術やデザインを覚えることに注力していくことになると思いますが、その途中でアクセシビリティのことが頭をよぎる頻度もこれで増えると思うので、その都度勉強していこうと思います。
メインセッション3【モダンなCSS設計/Vue.jsとReact時代におけるCSSの書き方】
パネラー:株式会社ICS 海老江 優太さん
内容はこれまでのCSSの書き方についての復習(基本構造〜CSS設計/BEM・FLOCSSなど)と、Vue.jsやReactを用いて記述する新しいCSSのスタイルについてでした。ちょうど今CSS設計について勉強中ということもあってドンピシャかつタイムリーなトピックでふおおおおおとなったのですが、Vue.jsとReactの知識が足りず概要を掴むに留まってしまい残念…(勉強してすぐに追いつくぞおおお) とはいえ説明の内容やスライドでのサンプルなどがとても親しみやすい要素が多く、なんとか「おーすごい!」と実感するところまでは行けたのでありがたかったです。
学んだこと(ざっくり)
- 各フレームワークで代表的なCSS技術(Vue.jsのScoped CSS、ReactのCSS ModulesとCSS in JS)の概要
- Scoped CSSを使用する際にあたっての注意点や対策
- とはいえCSS設計の概念はこれからも必要だということ
Scoped CSS便利!ってなったけど、その中でもCSS設計による秩序も必要だし、プロジェクトの仕様や規模に応じてBEMとかFLOCSSとか組み合わせとか、柔軟に対応していく必要がある・技術の変化にあわせてCSS記述の注意点も変わっていく→常に知識をアップデートしていく必要がある🧐🧐ということね#wcan
— ゆうり🍁WebDesign (@yuuri_webDesign) 2020年11月14日
いま世の中はこうなってるのか…と自分の世界だけではまだ辿り着けなかった景色だなとこの機会のありがたみを感じつつ、実装もできるようになりたいと言ってるからには、ぺたぺたCSSで書いてちゃあいかん!!と情熱が燃え上がる一方で、様々な状況やプロジェクトに合わせてCSSに関する技術を使い分けるために、モダンな技術ばかりではなくこれまでのCSS設計もしっかりと身に付けていく必要があるなと感じました。(このセッション中はScoped CSS勉強したい!あーでもその技術がふさわしくないプロジェクトや現場のためにBEMを始めCSS設計をきちんとできるようになりたい!でも最新の世界やっぱりすごい!!!と感情が渋滞して忙しかったです)
すぐ自分にできることは何かというと、やはり基本のCSS設計をしっかり学んで身に付けて実践できるようにしていく一方で、新しい技術にふれていく機会も見出していくことだなと思いました。(えいえいおー!)
メインセッション4【VueもReactも使わないJamstack入門】
パネラー:株式会社ピクセルグリッド 中村 享介さん
内容は、Jamstackはフレームワークの機能やReactが必要だという誤解を解く!というものと、静的サイトジェネレーター「eleventy」を例にして事前のHTML生成というJamstackの特徴を説明するものでした。このセッションについてはあまりふむふむ…とついて行ける箇所がなく、分かりやすく説明してくださっている中で登場する名称すらついていけないという私の勉強進度のせいで、ほぼほぼ「なるほど…こんな技術があるのか!!!」というレベルに留まってしまったのですが、後半からご紹介いただいた「eleventy」がHTML生成でめっちゃ便利!!というところにとても興味をそそられました。こちらも記述ファイルや生成時に何が起きているのかあまり分からなかったのですが、とにかく軽くて早くてドキュメントもVue.jsなどでHTMLを書いている画面よりはシンプルで分かりやすい!!という印象でした。
eleventyに対する認識がそもそも上記であっているのかも怪しいので、また一度時間を取って公式サイトをお散歩してみようと思います。
Lightning Talk
- 武藤桂子さん
Adobe XD for Visual Studio Code試用レポート - Increments株式会社 綿貫佳祐さん
CSS in JSで変わること変わらないこと - 株式会社HAMWORKS 長谷川広武さん
jQueryコードばかりだった私が Vue.js で単一ファイルコンポーネントにチャレンジした話
上記3つのセッションは5分の中にぎゅっと濃厚な情報が詰まっていて、基本知識のレベルが追いついていない私はほとんどついて行けなかったのですが、この3セッションを聞いての感想は、
- AdobeXDのプラグインめっちゃ便利そう…
- プラグインを使う使わないに関わらず、デザイナーとしてはXDなどでアセットをきちんと作る方がエンジニアの人が開発しやすいという空気をタイムラインから感じた
- CSS in JSなど新しいCSS技術は続々出てきているけど、一方で全てそれで良いわけでもなく、使い所やバランスを考えていくことも大切(そのために知識のアップデートを止めないことはやはり大切)
- jQueryでそういう機能を実装している、ふむふむなるほど…まではなんとか理解できたものの、Vueでこうなりました!からはついて行けず…(勉強します!)
- ハムさんが5分間の中にちょこちょこシュールに挟んでいた笑いポイントがとても好みでした
まとめ
とてもとても濃厚な勉強会でした。さらにモチベーションもあがったし、自分の勉強範囲や普段の情報収集している領域ではまだ到達できなかったトピックばかりだったと思うので、これからもこういった勉強会にはどんどん参加していきたいなと思いました。やりたいことが渋滞しているのは常日頃ですが、一歩ずつ消化できるように今回の内容も早速練り込んでいきたいと思います。ありがとうございました!