Material Components for the web とは
Material Components for the web （以下、MDC-Web）は Google のエンジニアらが作成しているオープンソースライブラリです。マテリアルデザイン をサポートするだけでなく、Angular や React などの他のライブラリとも共存できるようにというかなり野心的なプロジェクトです。UI だけでなく、Component/Foundation/Adapter などという独特の JavaScript フレームワークを内包しています。
ドキュメントについて
これまで MDC-Web にだいぶお世話になったので、恩返しの意味で少しでも自分にできることをというのと、自分のためというのもあり、ドキュメントを日本語に訳しました。
MDC-Web を使う人にとっての一助となればということで、公開します。
ちなみに Branch を master に切り替えれば原文（英語）が見れます。
ガイダンス
主なコンテンツは以下の通りです。
| コンテンツ | 備考 |
|---|---|
| 概要 | ライブラリの概要です。 |
| 入門ガイド | とりあえず使ってみたい人向けのコンテンツ。アプリを作りながら基礎が学べます。 ※ 2018/03/01 に内容が大幅に更新され、「アプリを作りながら基礎を学ぶ」というより、インストールと設定の方法についての記載になりました。 |
| テーマガイド | テーマ（配色などの外観）の設定のガイド。アプリを作りながら外観の設定方法を学べます。（Sass の知識がないと厳しいかも） |
| コンポーネントの構成 | MDC-Web のフレームワークの概要やベストプラクティスなどが書かれています。MDC-Web を使って新たなコンポーネントを作る場合は必読。 |
MDC-Web を構成するパッケージ
MDC-Web は複数のパッケージで構成されてますが、コンポーネントの詳しい内容は個別のパッケージのドキュメントを読むのがよいです。
- material-components-web
- mdc-animation
- mdc-auto-init
- mdc-banner （未翻訳）
- mdc-base
- mdc-button
- mdc-card
- mdc-checkbox
- mdc-chips
- mdc-circular-progress （未翻訳）
- mdc-data-table
- mdc-densty
- mdc-dialog
- mdc-dom
- mdc-drawer （未翻訳）
- mdc-elevation
- mdc-fab
- mdc-feature-targeting （未翻訳）
- mdc-floating-label
- mdc-form-field
- mdc-icon-button
- mdc-image-list
- mdc-layout-grid
- mdc-line-ripple （未翻訳）
- mdc-linear-progress
- mdc-list
- mdc-menu-surface （未翻訳）
- mdc-menu
- mdc-notched-outline （未翻訳）
- mdc-progress-indicator
- mdc-radio
- mdc-ripple （未翻訳）
- mdc-rtl （未翻訳）
- mdc-select
- mdc-shape
- mdc-slider
- mdc-snackbar
- mdc-switch
- mdc-tab-bar
- mdc-tab-indicator
- mdc-tab-scroller
- mdc-tab
- mdc-textfield
- mdc-theme
- mdc-tooltip （未翻訳）
- mdc-top-app-bar
- mdc-touch-target
- mdc-typography
今後は未翻訳のドキュメントもすこしずつですが訳していくつもりです。
終わりに
誤訳や意味が分かりずらいことろがありましたら、コメントするなりイシューを書くなりプルリクエストなりしてください。
ただし、ドキュメントも含めてこのプロジェクトは更新頻度が高い（API が大幅に変わることも頻繁）ので、常に最新になっているとは限らない点はご了承ください。