発行
Web制作を仕事にするとは思っていなかったと話す國仲は、CSSを書き始めた頃は:（コロン）のあとの半角スペースの有無でどんな違いがあるかで悩んだことも。細かなところを調べ、おもしろそうなら突き詰めてみる、の繰り返しでキャリア形成をしてきた國仲の仕事の行方を追いました。
認知コストはただUIの見た目のみで決まるわけではありません。UIを認知するユーザーの「理解」や「文脈」も認知コストの増減に影響を与えるのです。それらをうまく味方につけるために、どのようなことに注意する必要があるでしょうか。
テストツールであるJestを併用し、PuppeteerによるE2Eテストの導入方法を紹介します。まずは、各ページを巡回して実行時エラーが発生してないかを確認するテストの方法です。
発行
2回目はある要素の子要素、子孫要素、兄弟要素の選択ができる結合子の解説をします。4種類ある結合子の特徴を押さえることで、目的の要素に適切なスタイルを付与できます。
マークアップとスタイル指定、タブの切り替え機能まで作成したタブUIに、キーボードインタラクションを実装していきます。非選択状態のタブにキーボード操作で到達する方法を考えていきましょう。
ピクセルグリッドではフロントエンド実装のプレビューサイトを構築するのにNetlifyを利用することがあります。Netlifyを利用できる人数を増やし、複数人での開発に使うノウハウの一例を紹介します。
発行
形、色などUIの見た目は人間の認知コストに大きな影響を与えます。ほんのちょっとした配慮で、認知コストの低減を図ることができるので、その考え方、ポイントを常に念頭においておきましょう。
マークアップだけを行ったタブUIに、スタイルを指定します。さらに、タブをクリックしたらタブパネルが切り替わるという、タブUIとしての機能を作成していきましょう。
非同期処理を考慮したUI操作と値の取得、それらを用いた具体的な実装例について紹介します。
発行
ウェブページでよく見かけるUIのひとつ、タブUIの実装を解説していきます。タブUIはマークアップ自体は一見難しくなさそうですが、考えるべきことは意外と多いUIです。
第1回目では、まずセレクター一般についての説明をします。次に5種類の基本セレクターについて解説します。普段の業務で使っているセレクターを今一度、基本仕様から押さえてみましょう。
ビルド機能のさらに詳細な設定を行います。環境変数や設定ファイルを用いて、よりきめ細かなビルドを行うことができます。