Awesome Frontend Development
Frontend Developmentを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
外観
Webサイトの外側から見える要素です。
アーキテクチャ
フロントエンドコードの高水準な構造と、そのような構造を設計するための規律です。
- アルゴリズム: 実行する処理を自己完結した手順として定めたもの。計算、データ処理、自動推論などを行います。
- デザインパターン: アプリケーションやシステムの設計でよくある問題を解決するために利用できるベストプラクティス。
- 設計: すぐ利用でき、十分に文書化されたフロントエンド開発用の構造やフレームワーク。
- イベント駆動プログラミング: ユーザー操作、センサー出力、ほかのプログラムやスレッドからのメッセージなどのイベントで処理の流れが決まるプログラミングパラダイム。
- 関数型プログラミング: 計算を数学的関数の評価として扱い、状態変更や可変データを避けるプログラミングパラダイム。
- 関数型リアクティブプログラミング（FRP）: 関数型プログラミングの構成要素を使って非同期データフローを扱うプログラミングパラダイム。
互換性
プリンター、メール、モバイル端末、各種ブラウザーなど、異なる入出力機器やレンダリングソフトウェアで製品を動作させる能力です。
- クロスブラウザー: Webサイト、Webアプリケーション、HTML構造、クライアント側スクリプトが、必要な機能を備えた環境で動作し、機能がない環境でも適切に停止または縮退できること。
- メール: HTML形式の電子メールを作成すること。
- キーボード: Webブラウザーでキーボード入力を扱うこと。
- モバイル: スマートフォンやタブレットでの閲覧に最適化したWebサイトの開発。
- プリンター: CSSによる印刷出力の制御。
- レスポンシブWebデザイン（RWD）: 利用者と端末の要件に応じ、端末の寸法や能力に基づいてレイアウトを変化させる設計。
- Webアクセシビリティ: 障害のある人がWebを知覚・理解・操作し、Webへ参加できるようにすること。
エコシステム
重要な開発者、企業、組織、ニュースソースです。
- プロジェクトを取り巻くコミュニティ: 成功したオープンソースプロジェクトの周囲で開発者が作る、プラグイン、ライブラリ、チュートリアルなどの資料。
- ニュース: フロントエンドWeb開発に関する日刊・週刊ニュースを提供するWebサイトやニュースレター。
- 著名なコミュニティメンバー: 影響力のあるエンジニア、エバンジェリスト、アーキテクトなど。
- 組織: Web開発に関わる営利企業と非営利組織。
- ポッドキャスト: 音声、動画、デジタルラジオ、PDF、ePubなどを連続配信し、購読による自動ダウンロードやストリーミングで視聴するデジタルメディア。
言語、プロトコル、ブラウザーAPI
プログラミング言語、マークアップ言語、Web関連標準です。
- Cascading Style Sheets（CSS）: HTMLやXMLで書かれた文書の見た目を記述し、画面、紙面、音声などの媒体で要素をどう表現するか定めるスタイルシート言語。
- Document Object Model（DOM）: HTML、XML、SVG文書のプログラミングインターフェース。ツリーへアクセスし、文書構造、スタイル、内容を変更するための方法を定義します。
- HyperText Markup Language（HTML）: Webページ作成用の標準マークアップ言語。その要素がすべてのWebサイトの構成要素になります。
- Hypertext Transfer Protocol（HTTP）: 分散・協調型ハイパーメディア情報システム用のアプリケーションプロトコルで、World Wide Webのデータ通信基盤です。
- JavaScript（ECMAScript）: HTML文書へ動的な対話性を加えられる本格的な動的プログラミング言語。ECMAScript標準で定義されています。
- JavaScript Object Notation（JSON）: 人が読み書きしやすく、機械も解析・生成しやすい軽量データ交換形式。JavaScriptの一部を基礎としています。
- Scalable Vector Graphics（SVG）: 対話性とアニメーションを扱える、XMLベースの2次元ベクター画像形式。
- Service Worker: オフライン時のWebアプリケーション起動処理など、アプリケーションが持続的なバックグラウンド処理を利用できるようにする仕組み。
- テンプレート言語とエンジン: プログラムロジックと表示を独立した部分へ分離し、双方の開発、柔軟性、変更、保守を容易にするツール。
- トランスパイル言語: JavaScriptやCSSなど、ブラウザーがネイティブ対応する標準へ変換される抽象言語。
- Uniform Resource Identifier（URI）: リソースを識別する文字列。最も一般的な形式はUniform Resource Locator（URL）です。
- Web Animations API: Web上のアニメーションを駆動するJavaScript API。SVGとCSSのアニメーション機能を統合し、従来は宣言的にしか利用できなかった機能を、高性能なAPIとして開発者へ提供します。
- WebAssembly: 従来JavaScriptが担ってきた領域を補う、コンパイラーの出力先として使える低水準コード表現。
ユーザーインターフェースコンポーネント
Webサイトやアプリケーションへ組み込めるUIコンポーネントです。
- ボタン: 検索の実行や操作の確認など、イベントの発生やダイアログ操作を簡単に行うためのグラフィカルなコントロール要素。
- コード: Webサイトへの埋め込み用に設計されたコードビューアーとエディター。
- フォーム: チェックボックス、ラジオボタン、テキスト欄などを通じて利用者がデータを入力し、処理のためサーバーへ送信できるHTMLフォーム。
- ギャラリーと画像スライダー: Webサイト上で画像コレクションを洗練された形で表示する方法。
- グリッド: CSSグリッドレイアウトシステム。
- リッチテキストエディター: Webブラウザー内でリッチテキストを編集し、利用者が書式を有効なHTMLマークアップとして直接記述する手間を減らすインターフェース。
- 目次: 目次を自動生成するコンポーネント。
- UIキット: すぐ使えるコンポーネント集。
- 動画と音声: Webサイトで音声・動画ファイルを再生するコンポーネント。
ワークフロー
タスクの自動化とアセット配信です。
- 自動テスト: ソフトウェアを本番公開する前に、ツールがあらかじめ記述されたテストを実行する工程。
- ビルドツール: 手間のかかる反復作業を自動化するためのツールキットとエコシステム。
- CSSツール: CSSファイルの解析、前処理、後処理を行うツール。
- コードエディター: Webサイトのソースコード編集に特化したテキストエディター。
- ドキュメント: Web成果物に関するドキュメントの執筆、生成、公開、利用。
- プログラマー向けフォント: コードの位置をそろえ、似た文字を区別しやすくするフォント。
- はじめに: フロントエンド開発ワークフローを設定するための手順別ガイド。
- HTMLツール: HTMLソースコードの前処理・後処理ツール。
- 画像の後処理: 画像変換と最適化のためのツール。
- JavaScriptツール: JavaScriptファイルの静的解析、前処理、後処理を行うツール。
- パッケージ管理: 再利用可能なライブラリやコンポーネントのインストール、更新、設定、削除を一貫した方法で自動化するツール群。
- ソースマップ: 結合・圧縮されたファイルをビルド前の状態へ対応付ける仕組み。
- バージョン管理: ファイルやファイル集合の変更を時系列で記録し、後から特定の版を取り出せるようにするシステム。
ライセンス
この作品はCreative Commons Attribution 4.0 International Licenseの下で提供されています。
このリポジトリへのリンクを掲載してください。GitHub上のフォークでは不要です。