始めに

私はフロントエンドよりバックエンドが好きだ。ビジネスロジックを組むのが面白くて好きというポジティブな理由もあるが、それよりも画面上のUIやUXに興味がなく、やる気がしないという側面が強い。
しかし、画面側が全くできないのはWebアプリケーション開発に携わっているエンジニアとして流石に恥ずかしいと思った。そこで、現代のWebアプリケーションに使用されている技術の棚卸を行い、最低限体裁のあるアプリケーションを作成できるようにしようと考えた

調査

全世界で使用されているサイトが参考になると思い、Youtubeのホーム画面を各パーツごとに分解し、調査した
1つ1つ注意深く見るために簡易的な画面定義書を作成し、部品ごとの動きや機能を記録した

業務の画面定義のように部品ごとに番号を振り、各部品の特徴を記録
サムネやアイコンは何かに触れると思ったので割愛

この他にいくつかのサイトを確認し、使用されている技術を確認した

最低限必要な技術

いくつかのサイトを調査した中で必要だと感じた技術

1. 共通のレイアウト

この調査の際にいくつかのサイトを閲覧した際に、ページによってレイアウトが異なるサイトがあった。そのサイトでは他ページを探したり、ページ内のコンテンツを確認することに少しストレスを感じた。同サイト内で共通のレイアウトを使用することで、このような負担の軽減に繋がるため必要だと感じた。

2. ヘッダー

今回確認したどのサイトでも使用されていたため必須と判断

3. サイドバー

今回確認したどのサイトでも使用されていたため必須と判断

4. フッター

YoutubeやTwitterなどのWebアプリケーションでは確認できなかったが、企業のHPでは使用されていた

5. カーソルの位置の表示

文字や画像上のマウスカーソルがある際に、その部品の色や表示が変化すること。
今回確認したどのサイトでも使用されていたため必須と判断

6. レスポンシブなデザイン

閲覧者が使用している端末の画面幅に応じて適切な表示に切り替える機能。
使用しやすいと感じたサイトには使用されていたため必要と判断

必須ではないが優れていると感じた技術

1. SVG

Webアプリケーション上のアイコンはimgやcss(bootstrap)と思っていたため、svgだと気付いたときは非常に感動した。Qiitaのアイコンもsvg。どうやって作っているのか非常に気になっている
imgと異なり描画する際にサーバから画像を取得する必要がないことが利点だと考えている

2. ロード前フォーマット

サーバからデータを取得し画面に表示するまでの間に表示する灰色の仮置きされた部品。形や大きさから何が表示されるかや、現在ロード中であることが一目で把握できることに優れていると感じた。

あとがき

普段使用しているサイトを注意深く確認したところ、新しい発見があり面白かった
複数のサイトを閲覧したことで私の中で最低限の基準を作ることができた。まずはこの基準に達するためにフロントエンドの学習を進めようと思う