recursal/MDN huggingface dataset:
アクセシビリティ
========

ウェブ開発者になりたい場合、HTML, CSS, JavaScript の学習は役立ちます。しかし知識は単に技術を使うよりも前に進める必要があります — それらを責任を持って使う必要があり、その結果ウェブサイトの聴衆を増やし、またそれを使わないことに縛らないことになります。これを達成するには、一般的な成功事例 (HTML, CSS, JavaScript のトピックに示されています) を積み上げ、クロスブラウザーテストを行って、最初からアクセシビリティを考慮しておきます。このモジュールでは後者を詳しく扱います。

前提知識
----

このモジュールの大半の理解には、少なくとも HTML, CSS, JavaScript の最初の 2 モジュールを通して読むのが良いでしょうし、 たぶんもっと良いのは、関連するテクノロジートピックを進めるにつれて、関連するアクセシビリティの部分を進めるのが良いでしょう。

**メモ:** 自分のファイルを作れない コンピューター/タブレット/その他の端末で作業する場合、コードの実例の大半を JSBin や Glitch などのオンラインコーディングプログラム内で試すことができます。

ガイド
---

アクセシビリティとは？

この記事では実際アクセシビリティとは何かについてよく観察するモジュールから開始します — これには考慮が必要な人のグループや、いろいろな人がウェブとやり取りするのになぜ、どんなツールを使うのかや、アクセシビリティをウェブ開発の作業フローに取り組む方法が含まれます。

HTML: アクセシビリティの基礎

ウェブコンテンツをアクセシビリティ高くすることの多くの部分は、どんなときも正しい HTML 要素を正しい目的で使うことです。 この記事ではアクセシビリティを最大化するためにどう HTML が使われるかの詳細を見ていきます。

CSS と JavaScript のアクセシビリティ成功事例

CSS と JavaScript も、適切に使うと、アクセシビリティの高いウェブ体験を可能にする力を持っていますが、誤用されると目立ってアクセシビリティを害することもあります。この記事では、複雑なコンテンツでもなるべくアクセシビリティ高める CSS と JavaScript のいくつかの成功事例をざっと見ます。

WAI-ARIA の基本

前の記事に続いて、複雑な UI に非セマンティックな HTML や動的な JavaScript-更新コンテンツを作ることは難しいかもしれません。WAI-ARIA は、そうした問題をブラウザーと補助技術が認識できるセマンティクスを追加することで補助し、ユーザーに何が起きているのかを知らせるのに使うテクノロジーです。ここではアクセシビリティを改善する基本レベルの使用方法を示します。

アクセシブルなマルチメディア

アクセシビリティの問題を起こす可能性がある他のカテゴリは、マルチメディアです。ビデオ、オーディオ、およびイメージのコンテンツには、補助技術とユーザーが理解できるような、適切な代替テキストを付与する必要があります。どのように表示されるべきか分かるように。

モバイルアクセシビリティ

モバイル端末でのウェブへのアクセスが増えるとともに、アクセシビリティのツールが本格的に提供されている iOS や Android のような一般的なプラットフォームが普及しています。これらのプラットフォームでのあなたのウェブコンテンツのアクセシビリティを考えることが重要です。モバイル特有のアクセシビリティについて検討しましょう。

評価
--

アクセシビリティのトラブルシューティング

このモジュールの評価では、分析と修正が必要な多くのアクセシビリティの問題があるシンプルなサイトを紹介します。

関連情報
----

* Start Building Accessible Web Applications Today — Marcy Sutton によるすばらしい動画チュートリアル
* Deque University resources — コードサンプルやスクリーンリーダーリファレンスやその他の役立つリソースを含む
* WebAIM resources — ガイド、チェックリスト、ツールなどを含む
HTML フォーム
=========

このモジュールは、ウェブフォームの基本をマスターするのに役立つ一連の記事を提供しています。ウェブフォームはユーザーと対話するためのとても強力なツールです。最も一般的には、ユーザーからデータを収集したり、ユーザーがユーザーインターフェイスを操作できるようにするために使用されます。しかし、歴史的・技術的な理由から、フォームを最大限に使用する方法は必ずしも明らかではありません。以下の一覧の記事では、 HTML 構造のマークアップ、フォーム操作のスタイル、フォームデータの検証、サーバーへのデータ送信など、ウェブフォームの本質的な部分をすべて取り上げます。

#### フロントエンドのウェブ開発者になりたいですか？

これは、あなたが目標に向かって作業するために必要なすべての必須情報を含んだコースを用意しました。

**始めましょう**

前提条件
----

このモジュールを始める前に、少なくとも HTML 入門を一通り読んでおくべきです。ここでは簡単に理解できる導入ガイドが見つかり、ネイティブフォームコントロールガイドも利用できます。

しかしそれ以外のモジュールは HTML 知識よりも少し高度です — ページにフォームウィジェットを置くのは簡単ですが、高度なフォームの機能や CSS や JavaScript を使わないと実際に活用できません。このため、その他の節を見る前にまずは CSS と JavaScript を学んでおくのをお勧めします。

上記のテキストは、ウェブフォームを HTML、CSS、JavaScript エリアに混ぜずに、独立したモジュールに置くことの良い指針です — フォーム要素は HTML 要素より複雑で、最大限利用するには、関連する CSS と JavaScript テクニックを最大限活用する。

**メモ:** 自分のファイルを作ることができないコンピューター/タブレット/その他の端末で作業している場合、（大半の）コード例を JSBin や Glitch といったオンラインコーディングプログラムで試すことができます。

導入ガイド
-----

初めてのウェブフォーム

このシリーズの最初の記事では ウェブフォーム作成のほんの最初を提供し、それには簡単なフォームのデザインや、適切な HTML 要素で実装することや、CSS で簡単なスタイルづけをすることや、データがサーバーに送られる方法などが含まれます。

HTML フォームの構築方法

基本的な話と共に、ここではフォームの色々な部分に構造と意味を与えるのに使う要素を詳しく見ていきます。

どんなフォームウィジェットが利用できますか？
----------------------

ネイティブフォームウィジェット

オリジナルの HTML `<input>`タイプの詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。

HTML5 入力タイプ

ここでは `<input>` 要素を深く見ていき、HTML5 リリースにて追加された入力タイプや、さまざまな UI コントロールとデータコレクションの改良を見ます。さらには、`<output>` 要素も見ます。

その他のフォームコントロール

次には`<input>` 以外のフォームコントロールと関連するツール、例えば `<select>`、`<textarea>`、`<meter>`、`<progress>` を見ていきます。

フォームのスタイルガイド
------------

ウェブフォームをスタイリングする

この記事では基本的なスタイリング作業のために知るべき基本を含む、フォームを CSS でスタイリングするための入門を紹介します。

ウェブフォームの高度なスタイリング

ここでは、スタイルが難しい要素を扱うために必要な、さらに高度なフォームスタイリングテクニックを紹介します。

UI 擬似クラス

現在の状態に応じて制御される HTML フォームコントロールを可能とする、UI 擬似クラス の入門です。

フォームデータを検証して送信する
----------------

クライアント側のフォームデータ検証

データ送信だけで充分ではありません — ユーザーがフォームに記入したデータが、我々が処理に成功するような正しいフォーマットであり、アプリケーションが破綻しないかを確認する必要があります。またユーザーが正しくフォームを記入してアプリを使うのにイライラしないよう手助けしたいです。フォーム検証はこの目的を達成するのに役立ちます — この記事では知っておくべきことを教えます。

フォームデータの送信

この記事ではユーザーがフォームを送信するときに何が起こるのかを見ます — データがどこに行くのか、そしてそこでデータを受けたらどう扱うかなどです。また、フォームデータ送信に関連するセキュリティ上の懸念もその一部です。

高度なガイド
------

下記の記事は学習コースに必須ではないですが、上記のテクニックをマスターしてそれ以上知りたいときには、興味深く役立つものでしょう。

カスタムフォームコントロールの作成方法

場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と考慮すべき点を、実際のケーススタディと一緒に説明します。

JavaScript によるフォームの送信

この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます(FormData オブジェクトの使用もご覧ください)。


フォームコントロール用の CSS プロパティ互換性テーブル

この最後の記事では、どの CSS プロパティがフォーム要素に互換性があるのかを引くことのできるハンディリファレンスを提供します。

関連情報
----

* HTML フォーム要素リファレンス
* HTML <input> タイプリファレンス
* HTML 属性リファレンス
JavaScript
==========

JavaScript はウェブページ上に複雑なものを実装することを可能にするプログラミング言語です。ウェブページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップや 2D/3D グラフィックスのアニメーションを表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。

#### フロントエンドの Web 開発者になりたいですか？

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

学習の道筋
-----

JavaScript は HTML や CSS などの関連技術よりもきっと学ぶのが難しいでしょう。JavaScript を習得する前に、まずこれらの 2 つの技術、そしておそらく他の技術を熟知しておくことを強くおすすめします。先ず次のモジュールを実施してください :

* ウェブ入門
* HTML 入門
* CSS 入門

以前の他の言語での経験は手助けになるでしょう。

JavaScript の基本をよく理解できたら、より高度なトピックについて学ぶことができることでしょう。高度なトピックは例えば次のものです：

* JavaScript ガイドで紹介した JavaScript 詳細
* Web APIs
モジュール
-----

このトピックでは次のモジュールが含まれます。これらは推奨順です。

JavaScript の第一歩

最初の JavaScript の項目では、まず JavaScript を書く初めての実践的な体験に進む前に、「 JavaScript とは何か」、「どのように見えるか」、「何ができるのか？」などの基本的な質問に答えます。その後、変数、文字列、数値、配列などの JavaScript の主要機能について詳しく説明します。

JavaScript の構成要素

このモジュールでは、条件文、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでにみたか、どこかで目にしたことでしょうが、ここではすべて明示的に説明を行います。

JavaScript オブジェクト入門

JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。 関連する関数や変数を効率的なパッケージにカプセル化して独自のオブジェクトを作成することもできます。 JavaScript のオブジェクト指向の性質は、言語に関する知識をさらに深め、より効率的なコードを書く場合に理解するために重要です。それゆえ、このモジュールを用意しました。 ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。

非同期 JavaScript

このモジュールでは、非同期の JavaScript を見ていき、これがなぜ重要であるかや、サーバーからのリソース取得といった、ブロッキングの可能性のある操作を効率的に扱う方法を見ていきます。

クライアントサイドの Web API

ウェブサイトやアプリケーション用のクライアントサイド JavaScript を記述するときは、API を使い始める前に、サイトが実行されているブラウザーやオペレーティングシステムのさまざまな側面、または他のウェブサイトやサービスのデータを操作するためのインターフェイスといったものがあるので、すぐには進みません。このモジュールでは、API が何であるか、開発作業で頻繁に出くわす最も一般的な API を使用する方法について説明します。

よくある JavaScript の問題を解決する
------------------------

よくある JavaScript の問題を解決する では、ウェブページの作成時に、とてもよくある問題を解決するために JavaScript を使用する方法を説明するコンテンツのセクションへのリンクを提供します。

関連情報
----

MDN の JavaScript

MDN の主要な JavaScript ドキュメントの主要なエントリポイントです。ここでは、JavaScript 言語のあらゆる側面に関する広範なリファレンスドキュメント、および経験豊富な JavaScripter を対象とした高度なチュートリアルがあります。

JavaScript の学習

ウェブ開発者になりたい人向けのすばらしいリソース — JavaScript をインタラクティブな環境と、短いレッスンやインタラクティブなテスト、自動化された評価つきで学ぶことができる。最初の 40 レッスンは無料で、完全なコースは少額の支払いで利用できる。

**JavaScript Fundamentals on EXLskills**

JS でアプリケーションを構築するために必要なすべてを紹介する EXLskills オープンソースコースで、無料で JavaScript を学んでください。

Coding math

Keith Peters による、有能なプログラマーを理解するのに必要な数学の優れたビデオチュートリアルのシリーズ。
CSS
===

Cascading Style Sheets — CSS — はHTML を学んだら、まず次に勉強すべき技術です。HTML はコンテンツの構造と意味論を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。

#### フロントエンドのウェブ開発者になりたいですか？

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

学習の道のり
------

CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、HTML 入門 に取り組むことを推奨します — その後に、以下のことについて学んでください:

* CSS 入門 から始まる CSS モジュール
* より高度な HTML モジュール
* JavaScript と、動的な機能をウェブページに追加する方法

HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。なぜなら、CSS を理解すると HTML を勉強するのが更に興味深くまたもっと楽しくなり、また HTML を知ることなくして CSS を学習することはできないからです。

またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 基本的なソフトウェアをインストールする に詳しく書かれているような基本的な環境を持っており、 ファイルの扱い に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集であるウェブ入門のなかに入っています。

このトピックに取り組む前に ウェブ入門 を読むと良いでしょう。ただ、このウェブ入門のなかのCSS basicsの記事で紹介されていることの多くは、CSS 入門 でもカバーされているのでこれは必須ではありません。

モジュール
-----

このトピックは、以下のモジュールで構成されており、取り組むべき順に記載していますので、上から始めていくとよいでしょう。

CSS の第一歩

CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは、CSS のはたらきから CSS の構文、そしてそれを使って HTML をどうデザインしていくのかといった CSS をマスターするための入門編を丁寧に解説します。

CSS の構成要素

このモジュールは CSS の第一歩から派生しています。CSS にちょっと慣れて簡単な経験も積んだところで、それをもう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線についてやデバッグの方法などを見ていきます。

ここでの目的は、テキストの装飾や CSS レイアウトなどのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。

テキストの装飾

CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で最もよく使うことの一つです。ここでは、フォント、太字、イタリック、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。

CSS レイアウト

ここまでで既に CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識はカバーされているので、奥深い CSS レイアウトの世界に飛び込むことができます。さまざまな `display` の設定、flexbox のようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。

CSS でよくある問題を解決するには
------------------

CSS を使ってよくある問題を解決する には、ウェブページを作成する際よく発生する問題を CSS を使って解決する方法へのリンクがまとめられています。

最初から、HTML 要素とその背景に色を付けたり、要素の大きさや形や位置を変えたり、要素のボーダー（境界線）を定義することがもっとも多かったでしょう。 しかし CSS の基本をしっかり理解していれば、できないことはそれほど多くありません。 CSS 学習のなかで最も嬉しいことの 1 つは、一度基礎を理解してしまうと、やり方が実はまだよくわかっていなくても、できることとできないことに対して大抵はかなり良い感触が得られることです！

"CSS は奇妙です"
-----------

CSS は、ほとんどのプログラミング言語や設計ツールとは少し異なる動作をします。なぜ、それがそのように動作するのか？　次のビデオでは、CSS がそのように動作する理由と、そのように進化した理由について、Miriam Suzanne が役に立つ説明をしています。

関連情報
----

MDN での CSS

MDN での CSS ドキュメントの主な出発点です。 CSS 言語のすべての機能を詳しく説明したリファレンスドキュメントがあります。プロパティがとりうるすべての値を知りたいですか？ ここは良い場所です。
ウェブ入門
=====

*ウェブ入門*は、ウェブ開発の実用性を紹介する簡潔なシリーズです。簡単なウェブページを構築するために必要なツールをセットアップし、簡単なコードを書いたら、実際にウェブに公開します。

最初のウェブサイトの物語
------------

プロが作るようなウェブサイトを作るのはとても大変な作業です。ウェブ開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単なウェブサイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。

ガイド
---

以下の一覧の記事を通して作業することで、何もないところから、最初のウェブページをオンラインで公開できるようになります。さあ、旅を始めましょう。

基本的なソフトウェアのインストール

ウェブサイトを構築するためのツールは、実にさまざまなものからがあります。これから始める人は、コードエディター、フレームワーク、テストツールなど、さまざまな種類のツールに戸惑うかもしれません。この記事では、基本的なウェブ開発を始めるために必要なソフトウェアをインストールする方法を手順を追って紹介します。

ウェブサイトをどんな外見にするか

ウェブサイトのコードを書き始める前に、まずは計画を立てることが大切です。あなたのウェブサイトにはどんな情報を載せますか？フォントや色はどうしたいですか？ここでは、コンテンツやデザインを計画するのに役に立つ簡単な方法を紹介します。

ファイルの扱い

ウェブサイトを作るにはたくさんのファイルが必要です。テキストコンテンツ、コード、スタイルシート、メディアコンテンツなどファイルがあります。ウェブサイトを作るときは、これらのファイルをうまく配置して、ファイル同士がお互いにアクセスできることを確認する必要があります。この記事では、ウェブサイトのファイルを適切に配置する方法と、気をつけるべきことについて説明します。

HTML の基本

HyperText Markup Language (HTML、ハイパーテキストマークアップランゲージ) とは、ウェブコンテンツを構成し、その内容に意味や目的を持たせるために使用するコードのことです。例えば、私のコンテンツは段落の集合なのか、それともこの点のリストなのか？ページに挿入する画像はあるか？データ表はありますか？この記事では、HTMLに慣れるために必要な情報を提供します。

CSS の基本

Cascading Stylesheets (CSS: カスケーディング・スタイルシート) は、ウェブサイトの見た目を決めるために使うコードです。CSS を書くと、テキストの色を黒や赤にしたり、コンテンツを画面のどこに表示するかを決めたり、ページの背景に好きな色をつけたり画像を表示したりして、ウェブサイトを好きなように飾り付けることができます。この記事では、こうした飾り付けの方法について説明します。

JavaScript の基本

JavaScript は、ウェブサイトにインタラクティブな機能を追加するために使うプログラミング言語です。例えば、ゲーム、ボタンが押された時やフォームにデータが入力された時に起こること、動的なスタイルの効果、アニメーション、などなどです。この記事では、この楽しいプログラミング言語を使ってどんなことができるのか、そしてどうやって使い始めれば良いのかを紹介します。

サンプルコードの公開

ウェブサイトのコードを書き終えて、ウェブサイトに必要なファイルが用意できたら、作ったファイルをすべてオンラインにして、インターネット上の他の人からも見られるようにする必要があります。この記事では、簡単なサンプルコードを最小限の手間でオンラインに公開する方法を説明しています。

ウェブのしくみ

あなたがお気に入りのウェブサイトにアクセスする時、実は目に見えない所ではとても複雑なことが行われています。ここでは、あなたがパソコンでウェブページを開いた時に裏側でどんなことが行われているのか、その大まかなしくみを説明します。

関連情報
----

* Web Demystified: ウェブの基本を説明した素晴らしい動画のシリーズで、完全な初心者がウェブ開発できるようにするためのものです。 Jérémie Patonnier 作。
* ウェブとウェブ標準: この記事では、ウェブの役立つ背景 — どうやってできたのか、ウェブ標準技術とはなにか、どう連携させるか、「ウェブ開発者」がなぜ素晴らしいキャリアであるか、この過程を通じてどんなベストプラクティスが学習できるか — を提供します。
サーバサイド Web サイトプログラミング
=====================

***Dynamic(動的な)Web サイト*** – サーバサイドプログラミング のトピックは、動的な Web サイト (HTTP リクエストに応じてカスタマイズされた情報を届ける Web サイト) の作り方を説明する一連のモジュールです。各モジュールは、一般的なサーバサイドプログラミングへの導入となる情報を提供するほか、特に初学者に向けて、Django (Python) や Express (Node.js/JavaScript) といった基礎的なアプリケーションを構築するための Web フレームワークの使用方法について説明しています。

ほとんどの有名な Web サイトでは、必要に応じてさまざまなデータを動的に表示するために、何らかのサーバサイドの技術を使用しています。例えば Amazon の場合を考えてみましょう。非常にたくさんの商品が扱われていますね。また Facebook にも大量の投稿があります。これら全てを表示するために別々の静的なページをいくつも作っていっても、絶対に非効率です。ですのでその代わりに、こういったサイトでは静的なテンプレート (HTML, CSS, JavaScript で構築します) を表示し、テンプレートの内部で必要に応じ、表示される情報を動的に更新しています。例えば、Amazon で今見ている商品とは違う商品を見ようとするときに、この更新がおこなわれています。

現代の Web 開発においては、サーバサイド開発を学ぶことが強く推奨されています。

学習の道筋
-----

サーバサイドプログラミングを始めるのは、一般的にいってクライアントサイドの開発を始めるよりも簡単です。なぜなら動的な Web サイトはどれも非常によく似た操作 (データベースからデータを読み出してそれをページに表示し、ユーザが入力したデータをヴァリデーションしてそれをデータベースに保存し、ユーザの権限をチェックした後にユーザをログインさせる、といったようなことです) を行うからです。また、動的な Web サイトはこういった一般的な Web サーバ側での操作を簡単にしてくれる Web・フレームワークを用いて作られているからです。

プログラミング概念の基本知識 (あるいは特定のプログラミング言語の知識) は役立ちますが、必要ではありません。つまり、クライアントサイドコーディングの熟達は必要ではなく、基本知識はクライアントサイドの Web「フロントエンド」の開発者とうまく共同作業するのに役立つでしょう。

「Web の動作原理」を理解する必要があります。最初に次のトピックを読むのをお勧めします:

* Web サーバとは
* Web サイトを作成するのにどんなソフトウェアが必要か？
* Web サーバにファイルをアップロードする方法は？

基本的な理解があれば、この節のモジュールに進む準備ができているでしょう。

モジュール
-----

このトピックは次のモジュールがあります。最初のモジュールから始めるべきで、次に続くモジュールのどれかに進んで、そこで Web フレームワークを使ってとても有名な 2 つのサーバサイド言語を使う方法が示されます。

サーバサイド Web サイトプログラミングの最初の一歩

このモジュールではサーバ技術の無知な人向けに、サーバサイド Web プログラミングについての情報を提供します。それにはサーバサイドプログラミングについての基本的な質問 — "それは何なのか", "クライアントサイドプログラミングと何が違うのか", "なぜ便利なのか" — や、サーバサイド Web フレームワークの概要や、あなたのサイトに最も合うものを選ぶ方法のガイドが含まれます。最後に Web サーバセキュリティの入門セクションがあります。

Django Web フレームワーク (Python)

Django は Python で書かれた、極めて人気のある、完全な機能のあるサーバサイドフレームワークです。このモジュールではなぜ Django がこうも良い Web サーバフレームワークであるのかや、開発環境のセットアップ方法や、これを使ってよくあるタスクを行う方法を説明します。

Express Web フレームワーク (Node.js/JavaScript)

Express は JavaScript で書かれて node.js の実行環境でホストされる、人気のある Web フレームワークです。このモジュールではこのフレームワークの主な利点や、開発環境のセットアップ方法や、よくある Web 開発・デプロイのタスクを行う方法を説明します。

あわせて参照
------

フレームワークなしの Node サーバ

この記事では、フレームワークを使用せずに、Node.js だけで構築された単純な静的ファイルサーバを紹介します。
クライアントサイドウェブ開発ツールの理解
====================

 クライアントサイドツールには、なかなか難しいものもありますが、この記事シリーズでは、いくつかの一般的なクライアントサイドツールの種類について、その目的を示し、一緒に連携させることができるツール、パッケージマネージャを使ったインストール方法、
 コマンドラインでの制御を説明します。最後にツールチェーンの例を示して、生産性を高める方法を説明します。

**"クライアントサイドツールの概要"で今すぐ始めましょう**

前提条件
----

ここで紹介しているツールを使う前に、まずはコアのHTML、CSS、JavaScriptの基礎を学習することをお勧めします。

#### フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

ガイド
---

1. クライアントサイドツールの概要

この記事では、最新のウェブツールの概要、どのような種類のツールがあるのか、どこでウェブアプリ開発のライフサイクルを見つけるのか、そして個々のツールのヘルプを見つける方法について説明します。

2. コマンドライン集中コース

開発プロセスにおいて、ターミナル (または"コマンドライン") で何らかのコマンドを実行する必要があることは間違いありません。この記事では、ターミナルの紹介、ターミナルに入力する基本的なコマンド、コマンドを連鎖させる方法、独自のコマンドライン・インターフェース (CLI) ツールを追加する方法について説明します。

3. パッケージ管理の基本

この記事では、プロジェクトツールの依存関係をインストールしたり、最新の状態に保つなど、自分のプロジェクトでどのようにパッケージマネージャを使用できるかを理解するために、パッケージマネージャーについて詳しく説明していきます。

4. ツールチェーンの紹介

このシリーズの最後の数回では、サンプルケーススタディのツールチェーンを構築するプロセスを通じて、ツールに関する知識を確実なものにします。開発環境を構築し、変換ツールを導入し、実際にアプリを Netlify にデプロイするプロセスを紹介します。

5. アプリのデプロイ

シリーズの最終回では、前回の記事で構築したツールチェーンの例を使い、サンプルアプリをデプロイできるようにしていきます。コードを GitHub にプッシュし、Netlify を使ってデプロイし、簡単なテストを組み込む方法も紹介します。
クロスブラウザーテスト
===========

このモジュールでは、色々なウェブブラウザー間でウェブプロジェクトをテストすることに焦点を当てます。あなたのターゲット視聴者 (例 どのユーザー、ブラウザー、デバイスに一番関心があるのか?) の特定や、テストをどう動かすかや、主な問題としてさまざまな種類のコードと対面してそれらを緩和する方法や、テストを楽にして問題を解決するのに最も役立つツールが何かや、自動化を利用してテストをスピードアップする方法を見て行きます。

前提条件
----

ここで述べるツールを使ってみる前に、基本的な HTML、CSS、 JavaScript 言語をよく理解しておきます。

ガイド
---

はじめてのクロスブラウザーテスト

この記事ではクロスブラウザーテストの概観を提供し始めます。その過程で「ブラウザーテストとは何？」「どんな種類の問題によく出くわしますか？」「テストと、問題の特定・修正の主なアプローチは？」といった質問に答えたりします。

テスト実行戦略

次に、テスト実行について掘り下げ、ターゲット視聴者(例、どのブラウザー、デバイス、その他のセグメントでテストを確実にするのか)を特定し、ローファイテスト戦略(ある範囲のデバイスと仮装マシンにて必要ならアドホックテストを行う)、高度なテスト戦略(専用テストアプリを使った自動化)、ユーザーグループを使ったテストまで見て行きます。

よくある HTML や CSS の問題を扱う

シーンがセットされたら、HTML と CSS コードの中でよく出くわすクロスブラウザー問題と、問題を防いだり、問題発生を修正するのに使えるツールを詳しく見ていきます。これにはコードの lint や、CSS プレフィックスを手渡したり、問題を監視するブラウザーの開発ツールを使ったり、ブラウザーサポート追加に polyfill を使ったり、レスポンシブデザインの問題に取り組んだり、といった事が含まれます

よくある JavaScript の問題を扱う

今度はクロスブラウザー JavaScript の問題と、その修正方法を見て行きます。ここにはブラウザーの開発ツールを使って問題を突き止めて修正したり、問題を回避するのに pollyfill やライブラリーを使用したり、古いブラウザーの対応にモダン JavaScript の機能を掴んだり、といった事が含まれます。

よくあるアクセシビリティの問題を扱う

次にアクセシビリティに注意を向けて、良くある問題の情報、簡単なテスト実施の方法、アクセシビリティの問題を見つけるための監査/自動化ツールの利用方法を提供します。

機能検出の実装

機能検出はブラウザーがあるコードブロックをサポートしているか考えたり、サポートする/しないによって他のコードを実行したりして、いくつかのブラウザーでクラッシュ/エラー起こすことなく、常に動作の体験を提供できるようにすることです。この記事では簡単な機能検出を書く方法や、 `@supports` のようなネイティブ機能について詳しく記載します。

はじめての自動テスト (en-US)

いくつかのブラウザーと端末で、一日に何度もテストを手動実行するのはつまらないし時間をつぶします。これを効率良く扱うには、自動化ツールに詳しくなるべきです。この記事では何を入手できるかや、タスクランナーの使い方や、Sauce Labs と Browser Stack のような商用ブラウザーテスト自動化ツールの使い方の基本を見て行きます。

テスト自動化環境をセットアップする

この記事では、Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を教えます。またあなたのローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。
To Do アイテムのフィルタリング
==================

* 前のページ
* Overview: Client-side JavaScript frameworks
* 次のページ

次に、ユーザーが To Do アイテムをフィルタリングできるようにする機能を追加して、アクティブなアイテム、完了したアイテム、またはすべてのアイテムを表示できるようにしましょう。

|  |  |
| --- | --- |
| 前提条件: | 
HTML、
 CSS、
 JavaScript に精通していること、
 ターミナル/コマンドラインに関する知識があること。
  |
| 目的: | アプリにフィルタリング機能を追加します。 |

フィルタリングコード
----------

フィルタリングは、以前に `app.component.ts` に追加した `filter` プロパティに基づいて構成されています。


```ts
filter: 'all' | 'active' | 'done' = 'all';
```


filter のデフォルト値は `all` ですが、 `active` または `done` にすることもできます。

フィルター コントロールの追加
---------------

`app.component.html` で、次の HTML を **Add** ボタンの前、アイテムをリストするセクションの上に追加します。
 次のスニペットでは、HTML の既存のセクションがコメントになっているため、ボタンを配置する場所を正確に確認できます。


```html
<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
 -->

<!-- Buttons that show all, still to do, or done items on click -->
<div class="btn-wrapper">
  <button
 class="btn btn-menu"
 [class.active]="filter == 'all'"
 (click)="filter = 'all'">
    All
  </button>

  <button
 class="btn btn-menu"
 [class.active]="filter == 'active'"
 (click)="filter = 'active'">
    To Do
  </button>

  <button
 class="btn btn-menu"
 [class.active]="filter == 'done'"
 (click)="filter = 'done'">
    Done
  </button>
</div>

<!-- <h2>{{items.length}} item(s)</h2>
 <ul>... -->
```


ボタンをクリックすると `filter` 値が変更され、Angular がアクティブなボタンにスタイルを適用し、表示する `items` を決定します。

* ユーザーが **All** ボタンをクリックすると、すべてのアイテムが表示されます。
* ユーザーが **To do** ボタンをクリックすると、 `done` の値が `false` のアイテムが表示されます。
* ユーザーが **Done** ボタンをクリックすると、 `done` 値が `true` のアイテムが表示されます。

 角括弧 `[]` を使用したクラス属性バインディングは、ボタンのテキストの色を制御します。
 クラスバインディング `[class.active]` は、 `filter` の値が式と一致する場合に `active` クラスを適用します。
 たとえば、ユーザーが **Done** ボタンをクリックして `filter` 値を `done` に設定すると、クラス バインディング式 `filter == 'done'` は `true` に評価されます。
 `filter` 値が `done` の場合、Angular は `active` クラスを **Done** ボタンに適用し、テキストの色を緑色にします。
 ユーザーが他のボタンのいずれかをクリックするとすぐに、 `filter` の値は `done` ではなくなるため、緑色のテキスト色は適用されなくなります。

まとめ
---

簡単でしたね！ `app.component.ts` には既に `filter` コードがあるので、アイテムのフィルタリングをコントロールする為にテンプレートを編集するだけで済みました。 次の - そして最後の - 記事では、Angular アプリを本番環境で構築する方法を検討し、学習の旅を続けるための追加のリソースを提供します。

* 前のページ
* Overview: Client-side JavaScript frameworks
* 次のページ
Angular アプリのスタイリング
==================

* 前のページ
* Overview: Client-side JavaScript frameworks
* 次のページ

基本的なアプリケーション構造がセットアップされ、アプリケーションが表示されるようになったので、次の段階へ移って、Angular がアプリケーションのスタイリングをどのように処理するかを見てみましょう。

|  |  |
| --- | --- |
| 前提条件: | 
HTML、
 CSS、
 JavaScript に精通していること、
 ターミナル/コマンドラインに関する知識があること。
  |
| 目的: | Angular アプリのスタイルを設定する方法を学びます。 |

Angular にスタイルを追加する
------------------

Angular CLI は、次の 2 種類のスタイルファイルを生成します。

* Component styles: Angular CLI は、各コンポーネントにスタイル用の独自のファイルを提供します。
 このファイルのスタイルは、そのコンポーネントにのみ適用されます。
* `styles.css`: `src` ディレクトリーでは、コンポーネントレベルでスタイルを指定しない限り、このファイルのスタイルはアプリケーション全体に適用されます。

 CSS プリプロセッサを使用しているかどうかによって、CSS ファイルの拡張子は異なる場合があります。
 Angular は、プレーン CSS、SCSS、Sass、Less、および Stylus をサポートします。

`src/styles.css` に、次のスタイルを貼り付けます。


```css
body {
  font-family: Helvetica, Arial, sans-serif;
}

.btn-wrapper {
  /\* flexbox \*/
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.btn {
  color: #000;
  background-color: #fff;
  border: 2px solid #cecece;
  padding: 0.35rem 1rem 0.25rem 1rem;
  font-size: 1rem;
}

.btn:hover {
  background-color: #ecf2fd;
}

.btn:active {
  background-color: #d1e0fe;
}

.btn:focus {
  outline: none;
  border: black solid 2px;
}

.btn-primary {
  color: #fff;
  background-color: #000;
  width: 100%;
  padding: 0.75rem;
  font-size: 1.3rem;
  border: black solid 2px;
  margin: 1rem 0;
}

.btn-primary:hover {
  background-color: #444242;
}

.btn-primary:focus {
  color: #000;
  outline: none;
  border: #000 solid 2px;
  background-color: #d7ecff;
}

.btn-primary:active {
  background-color: #212020;
}
```


`src/styles.css` の CSS はアプリケーション全体に適用されますが、これらのスタイルがページのすべてに影響するわけではありません。
 次のステップは、特に `AppComponent` に適用されるスタイルを追加することです。

`app.component.css` に、次のスタイルを追加します。


```css
body {
  color: #4d4d4d;
  background-color: #f5f5f5;
  color: #4d4d4d;
}

.main {
  max-width: 500px;
  width: 85%;
  margin: 2rem auto;
  padding: 1rem;
  text-align: center;
  box-shadow:
    0 2px 4px 0 rgba(0, 0, 0, 0.2),
    0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 600px) {
  .main {
    width: 70%;
  }
}

label {
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
  padding-bottom: 1rem;
}

.lg-text-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid #000;
  display: block;
  box-sizing: border-box;
  font-size: 1rem;
}

.btn-wrapper {
  margin-bottom: 2rem;
}

.btn-menu {
  flex-basis: 32%;
}

.active {
  color: green;
}

ul {
  padding-inline-start: 0;
}

ul li {
  list-style: none;
}
```


最後のステップは、ブラウザーに再度アクセスして、スタイルがどのように更新されたかを確認することです。 スタイルが更新された事を確認出来ます。

まとめ
---

Angular でのスタイリングの簡単なツアーが終了したので、アプリ機能の作成に戻りましょう。 次の記事では、to-do items に適切なコンポーネントを作成し、to-do items を確認、編集、および削除できるようにします。

* 前のページ
* Overview: Client-side JavaScript frameworks
* 次のページ
Angular アプリケーションのビルドとその他のリソース
=============================

* 前のページ
* Overview: Client-side JavaScript frameworks

この Angular の最後の記事では、本番環境に対応したアプリをビルドする方法について説明し、学習の旅を続けるためその他のリソースを提供します。

|  |  |
| --- | --- |
| 前提条件: | 
HTML、
 CSS、
 JavaScript に精通していること、
 ターミナル/コマンドラインに関する知識があること。
  |
| 目的: | Angular アプリをビルドする方法を学ぶ。 |

完成したアプリケーションのビルド
----------------

 アプリケーションの開発が完了したので、Angular CLI の `build` コマンドを実行できます。
 `todo` ディレクトリで `build` コマンドを実行すると、アプリケーションは `dist/` という名前のディレクトリにコンパイル結果が出力されます。

`todo` ディレクトリで、コマンド ラインで次のコマンドを実行します。


```bash
ng build -c production
```


 CLI はアプリケーションをコンパイルし、コンパイル結果を新しい `dist` ディレクトリに出力します。
 `ng build` の `--configuration production`/`-c production` フラグは、プロダクションに不要なものを取り除きます。

アプリケーションのデプロイ
-------------

 アプリケーションをデプロイするには、 `dist/my-project-name` フォルダーを Web サーバーに追加します。
 これらのファイルは静的であるため、次のようなファイルを提供できる任意の Web サーバーでホストできます。

* Node.js
* Java
* .NET

Firebase, Google Cloud, or App Engine などのバックエンドを使用できます

その次
---

 ここまで基本的なアプリケーションを作成しましたが、Angular の学びはまだ始まったばかりです。
 以下の Angular のドキュメントを調べることで、さらに学ぶことができます。

* Tour of Heroes: サービスの使用、ナビゲーション、サーバーからのデータの取得など、Angular の機能に焦点を当てた詳細なチュートリアル。
* Angular Components ガイド: ライフサイクル、コンポーネントの相互作用、ビューのカプセル化などのトピックをカバーする一連の記事。
* Forms ガイド: Angular でのリアクティブ フォームの作成、入力の検証、動的フォームの作成について説明する記事。
まとめ
---

以上です。 Angular を楽しんでいただければ幸いです。

* 前のページ
* Overview: Client-side JavaScript frameworks