画像

こんにちは。アイレットデザイン事業部のマークアップ/フロントエンドエンジニアの工藤です。アイレットデザイン事業部ではINSIDE UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。今回はいつもと趣向を変えてフロントエンド開発に役立つリソースとツールを紹介します。

オンラインリソース

web開発の基本

HTMLにはW3CのHTML（HTML5）とWHATWGのLiving Standard HTMLがあります。
W3C(World Wide Web Consortium)はWorld Wide Webで使用される各種技術の標準化を推進するために設立された団体です。
一方、WHATWGはApple、Google、Microsoft、Mozillaが参加するHTML関連技術の標準仕様を策定するため団体です。

2つの団体による2つの仕様が並び立っているため混乱してしまいますが、2017年にMicrosoftがWHATWGに参加し主要ブラウザ開発企業がすべて参加した状態になったことから、2021年現在のweb開発として考えるとWHATWGのLiving Standard HTMLの仕様を優先してOKです。
しかしCSS3は今もW3Cが管理しており、ややこしいことには変わりないですね…

web開発技術応用編

HTML, CSS, JavaScriptその他フロントエンドのWeb技術に関する新仕様の解説やネタ的なものまで下記のサイトをよく参考にしています。

アクセシビリティ

アクセシビリティに配慮したコーディングもいざちゃんとやろうとすると難しいですよね。「こんな感じのコーディングで大丈夫かな？」という疑問はAmeba Accessibility Guidelinesを見れば大体解決します。WAIC（ウェブアクセシビリティ基盤委員会）の公式ドキュメントと具体的な実装の照らし合わせにはfreeeアクセシビリティー・ガイドラインがとても便利です。

英語・翻訳

web開発のドキュメントは英語のみで日本語化されていないものも多いため、翻訳できるようにしておくと良い。あとコミットメッセージやクラス名を気の利いた英語にしたくないですか？

フォント・アイコン・イラスト・写真のリソース

フォント・アイコン・イラスト・写真に関しては無料でも素晴らしいクオリティーのものを手に入れることができるようになってきました。ただこうしたリソースを使うときには無料であっても著作権上の注意が必要です。国際的な著作権に関する取り決めであるベルヌ条約、国内法である著作権法と知的財産基本法、さらにそれらに当てはまらないクリエイティブコモンズライセンスなどさまざまな著作権のルールがあります。意図せず著作権違反をしてしまわないよう各サービスの著作権規約をよく読んでリソースを適切に運用しましょう。下記は全て無料のリソースです。

  • Google Fonts: 2021年、日本語フォントが大幅に拡充
  • Adobe Fonts: Adobe CCに加入しているならオススメできるフォントツール。PhotoshopなどAdobeデザインツールと連携してさまざまなフォントを利用可能
  • flaticon.com: 任意のアイコンをVectorまたはpng形式でDLできる
  • DrawKit: ポップで現代的なイラストセットが無料でDL可能
  • Unsplash: 無料で使えるストックフォトサービス。圧倒的な質と点数

エディタ: VS Codeとその拡張ツール

かつてSublime Text、Atom、Brackets、Dreamweaverなど各々がしのぎを削るエディタ戦国時代がありましたが、2021年現在ではその動作安定性と拡張機能の豊富さからMicrosoftのVisual Studio Code（以下VS Code）が人気です。
参考: Visual Studio Codeはなぜ大きなシェアを獲得することが出来たのでしょうか？ – QUORA

VS Codeは拡張機能が充実していますが、その中で実際に私が使ってとくに便利だなと感じているものを紹介いたします。

  • Japanese Language Pack for Visual Studio Code: VS Codeを日本語化します。まずはこれを入れよう
  • Prettier: コードフォーマッターのデファクトスタンダード。主要な言語をフォーマットしてくれる
  • Stylelint: CSS/Sass専用のコードフォーマッター。自分用のカスタムが簡単
  • Trailing Spaces: 肉眼では確認しにくい余計なスペースを赤く色をつけて発見しやすくする
  • テキスト校正くん: Textlintをベースにした日本語文章校正ツール。このブログを書く際にもお世話になっています

Chrome拡張ツール

Google Chromeと連携して開発やデザインを便利にしてくれるツール群です。

デザイン系

  • Perfect Pixel: 下書きとなるデザインカンプを背景に重ねながらコーディングできる
  • Dimensions: オブジェクトとオブジェクトの距離をピクセル単位で計測できる
  • レスポンシブチェック！ : 同じ画面をスマホ、タブレットなど異なるデバイスサイズで同時表示

アクセシビリティ系

  • Colorblindly: さまざまなタイプの色覚障害をシミュレーションできる
  • Alix: 現在のページのアクセシビリティエラー箇所をCSSで色つけしてくれる
  • Axe Accessibility: アクセシビリティ監査項目を網羅できる
  • HTML5 Outliner: HTML5のアウトラインを表示してくれる。h1→h2→h3の関係性などが簡単にチェックできる

ブラウザ確認系

  • Awesome Screenshot: スクリーンショットが撮れる。動画も撮れる。
  • Browserstack: Chrome上からさまざまなブラウザをエミュレートできる。IEの古いバージョンも網羅してて便利
  • Quick QR: 現在のページのQRコードを生成する。スマホ実機でのブラウザチェック時に便利

Chrome dev Tools拡張

Chrome dev Tools（開発ツール）と連携して開発を便利にしてくれるツール群です。

  • Lighthouse: 監査ツールのデファクトスタンダード。パフォーマンス計測におけるコアウェブバイタルは重要概念
  • webhint: Microsoft製監査ツール。Lighthouseに似た使い方ができ、フロントエンドのセキュリティ対策も検証できる。
  • Axe Web Tools: 上で紹介したAxe Accessibilityと同じもの。細かいアクセシビリティ監査ができる。

macOSアプリ

開発系

  • Cyberduck: FTPツール。アイコンのインパクトが強い
  • HOSTS: サーバー切り替えツール
  • SourceTree – GUIで操作するGitツール

デザインツール

  • Photoshop: 説明不要の画像ツール。2020から追加された「被写体を選択」機能が便利
  • Illustrator: 説明不要のVector画像ツール
  • Zeplin: デザインカンプ共有ツール
  • Figma: プロトタイピングツール

その他

ハードウェア

画像

ここまでフロントエンド開発に役立つツールということでさまざまなソフトウェアを紹介しましたが、ハードウェアもそれ以上に大事です。Covid-19の影響により自宅でリモートワークする機会が増えた今こそ自宅開発環境の見直しチャンス。合わない椅子や足元で絡まったケーブルやすぐ固まるCPU…などはモチベーションと効率の低下につながるので投資すべきところは投資していきたいですね。

ハードウェアチェックリスト

  • デスク
  • チェア
  • 本棚
  • PC端末
  • モニター
  • マウス
  • キーボード
  • スマホ
  • 電源周り
  • スマホバッテリー
  • ケーブル
  • 空調設備
  • 照明設備
  • 観葉植物
  • 空気清浄機
  • 飲料（コーヒーなど）
  • 適度に体を動かすためのグッズ（例: ダンベル、バランスボール）

以上、フロントエンド開発にあると便利なツールとリソース紹介でした！
次回のINSIDE UI/UXをお楽しみに