recursal/MDN huggingface dataset:
CSS 生成コンテンツの使用
==============

この記事では、文書を表示するときに CSS を使用してコンテンツを追加する方法をいくつか説明します。スタイルシートを変更することで、テキストコンテンツや画像を追加することができます。

CSS の重要な利点の一つが、文書のスタイルをそのコンテンツから分離しやすくすることです。しかし、あるコンテンツを文書の一部としてではなく、スタイルシートの一部として指定することが理にかなっている場合もあります。テキストや画像の内容が文書の構造に密接に関連している場合は、スタイルシートの中で指定することができます。

**メモ:** スタイルシート内で記述されたコンテンツは、 DOM の一部にはなりません。

スタイルシートでコンテンツを指定すると、厄介な問題が発生することがあります。例えば、スタイルシートが複数の言語の文書で共有されていることがあります。スタイルシートの中で翻訳が必要なコンテンツを指定する場合は、スタイルシートのその部分を別なファイルに置き、適切な言語版の文書にリンクするようにする必要があります。

この問題は、指定するコンテンツが、あらゆる言語や文化に適用される記号や画像で構成されている場合には発生しません。

例
-

### テキストコンテンツ

CSS では、要素の前後にテキストコンテンツを挿入したり、`display: list-item;` で `<li>` などの要素の前にリスト項目のマーカー（丸印や数字など）の内容を変更することができます。これを指定するには、ルールを作り、セレクターに `::before`、`::after`、`::marker` のいずれかを追加します。宣言では、`content` プロパティを指定し、その値としてテキストコンテンツを指定します。

#### HTML


```html
A text where I need to <span class="ref">something</span>
```


#### CSS


```css
.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference ";
}
```


#### 出力

スタイルシートの文字セットは規定で UTF-8 ですが、リンク、スタイルシート自身の内部、もしくはその他の方法で指定することができます。CSS 仕様書の 4.4 CSS style sheet representation をご覧ください。

個々の文字は、バックスラッシュをエスケープ文字として使用して、エスケープ機構を使って記述することもできます。例えば、 "\265B" はチェスの黒クイーン ♛ です。詳しくは CSS 仕様書の Referring to characters not represented in a character encoding と Characters and case をご覧ください。

### 画像コンテンツ

要素の前や後ろに画像を追加するには、 `content` プロパティの値として画像ファイルの URL を記述します。

このルールは `glossary` を持つすべてのリンクの後ろに、空白とアイコンを追加します。

#### HTML


```html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
```


#### CSS


```css
a.glossary::after {
  content: " " url("glossary-icon.gif");
}
```


#### 出力結果
要素に影を追加するには
===========

このガイドでは、ページ上の任意のボックスに影を追加する方法を紹介します。

ボックスに影を追加
---------

影は、ページ上で要素を目立たせるために役立つ、一般的なデザイン機能です。CSS では、要素のボックスの影は `box-shadow` プロパティを使用して作成します（テキスト自体に影を追加したい場合は `text-shadow` が必要です）。

`box-shadow` プロパティは、いくつかの値を取ります。

* X 軸上のオフセット
* Y 軸上のオフセット
* ぼかし半径
* 拡散半径
* 色
* `inset` キーワード

下記例では、X 軸と Y 軸を 5px、ぼかしを 10px、広がりを 2px に設定しています。色として半透明の黒を使用しています。異なる値でシャドウがどのように変わるか、試してみてください。

**メモ:** この例では `inset` を使用していません。これは、シャドウが既定のドロップシャドウであり、シャドウの上にボックスがあることを意味しています。インセットシャドウは、コンテンツがページに押し込まれているかのように、ボックスの内側に現れます。

関連情報
----

* ボックスの影作成ツール
* CSS の学習: 高度な装飾効果
コミュニティスクールのホームページの組版
====================

* 前のページ
* Overview: Styling text

この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。

| 前提知識: | この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。 |
| --- | --- |
| 学習目標: | CSS テキスト装飾テクニックの理解をテストすること。 |

出発点
---

この評価を開始するには、次のことが必要です。

* 練習用の HTML ファイルと CSS ファイルと、提供されている外部リンクアイコンを入手してください。
* ローカルコンピュータにそれらのコピーを作成します。

**メモ:** あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して背景画像を指定することができます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の `<style>` 要素に自由に配置してください。

プロジェクトの概要
---------

架空のコミュニティカレッジのホームページ用の生の HTML と、ページを 2 列のレイアウトに装飾し、その他の基本的な装飾をする CSS が提供されています。 CSS ファイルの最後にあるコメントの下に CSS の追加部分を書いて、あなたが行った部分に簡単に印を付けることができるようにします。 一部のセレクタがくどくても心配しないで、この場合は見逃してください。

フォント

* まずはじめに、いくつかの自由に使えるフォントをダウンロードしてください。 これはカレッジですから、フォントはかなり真面目で、形式的で、信頼できる感じをページに与えるために選ばれるべきです — 一般的なテキスト本文のためのサイト全体の serif フォントに、見出しのための sans-serif または slab serif を組み合わせるといいかもしれません。
* 適切なサービスを使用して、これら 2 つのフォント用の bulletproof `@font-face` コードを生成してください。
* 本文フォントをページ全体に適用し、見出しフォントを見出しに適用します。

一般的なテキスト装飾

* サイト全体の `font-size` を `10px` にします。
* 見出しや他の要素タイプには、適切な相対単位を使用して定義された適切な `font-size` を与えます。
* 本文に適切な `line-height` を与えます。
* トップレベルの見出しをページの中央に配置します。
* 見出しをあまりにも押しつぶしすぎないようにし、文字が少し呼吸できるようにするために、見出しに少し `letter-spacing` を与えます。
* 必要に応じて、本文に `letter-spacing` と `word-spacing` を与えます。
* `<section>` の各見出しの後の最初の段落に、`20px` で、少し `text-indent` を与えます。

リンク

* ページの上部と下部にある水平バーの色に合わせて、リンクに訪問、フォーカス、ホバーの状態を設定します。
* デフォルトでリンクに下線が引かれますが、ホバーするかフォーカスを合わせると下線が消えるようにします。
* ページ上のすべてのリンクからデフォルトのフォーカスアウトラインを取り除きます。
* 目立つようにアクティブな状態に著しく異なるスタイルを与えますが、それでも全体的なページデザインに収まるようにします。
* 外部リンクの隣に外部リンクアイコンが挿入されるようにします。

リスト

* リストとリスト項目の間隔が、ページ全体のスタイルとうまく一致するようにしてください。 各リスト項目は段落行と同じ `line-height` を持ち、各リストの上下の段落の間隔は同じです。
* リスト項目に、ページのデザインにふさわしい素敵な行頭記号を付けてください。 カスタムの行頭記号画像を選択するか、それ以外のものを選択するかは、あなた次第です。

ナビゲーションメニュー

* ページのルックアンドフィールが適切になるようにナビゲーションメニューを装飾します。
ヒントとコツ
------

* この演習では、HTML を編集する必要はまったくありません。
* ナビゲーションメニューを必ずしもボタンのように見せる必要はありませんが、ページの横に愚かに見えないように少し高くする必要があります。 また、これを垂直ナビゲーションメニューにする必要があることも忘れないでください。
例
-

次のスクリーンショットは、完成したデザインの外観の例です。

![](/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage/example2.png)

評価
--

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

* 前のページ
* Overview: Styling text
JavaScript の第一歩
===============

最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何？」や「どのようなもの？」や「何ができる？」といったような基本的な質問に答えます。その後、変数や文字列、 数値、配列といったような言語の内容をお話しします。

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

目標に向かって取り組むために必要なすべての重要な情報を含むコースをまとめました。

**始めましょう**

前提条件
----

このモジュールを始めるには JavaScript の知識は必要ありませんが、HTML や CSS に少し慣れている必要があります。JavaScript の学習を開始する前に以下のモジュールを学習することをお勧めします。

* ウェブ入門 (JavaScript の基本 を含む)
* HTML 入門
* CSS の第一歩

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

ガイド
---

JavaScript とは

MDN の初心者向け JavaScript コースへようこそ！この最初の記事では JavaScript を高い視点から見ていき、「それは何ですか？」「それで何ができますか？」などの質問に答え、 JavaScript の目的があなたに受け入れられるものであるかを確認します。

最初のダイブ

JavaScript の理論についていくつか学びましたが、それで何ができるのでしょう？完全に実践的なチュートリアルを通して、JavaScript の基本機能の短期集中コースを提供します。 ここでは、簡単な数字当てゲームを段階的に作っていきます。

何が間違っている？ JavaScript のトラブルシューティング

前の記事で数字当てゲームを構築した時に、うまく動かなかったかもしれません。心配しないでください —この記事は、JavaScript のプログラムにエラーを見つけて修正するシンプルな方法を提供することで、こうした大変な事態からあなたを手助けすることを目的としています。

必要な情報を保存する — 変数

前の 2 つの記事を読んで、JavaScript が何であるか、あなたのために何ができるか、他のウェブテクノロジーと一緒に使う方法、そして高い視点から見た主な機能を知ったことでしょう。この記事では実際の基礎に着目し、JavaScript の最も基本的な構成要素を扱う方法を見ていきます ― それが変数です。

JavaScript での基本演算 — 数値と演算子

ここで、JavaScript における数学について論じます。指示に従ってうまく数値を操作するために、演算子やその他の機能を組み合わる方法を説明します。

テキストを扱う — JavaScript での文字列

次に、文字列に注目します ― プログラミングではテキストのことをこう呼びます。この記事では、文字列の作成、文字列の引用符のエスケープ、およびそれらの結合など、JavaScript を学習するにあたって本当に知っておくべき、文字列についてのすべての一般的な事柄を見ていきます。

便利な文字列メソッド

文字列の基本について見てきましたが、文字列の長さの取得、文字列の結合と分割、文字列内の文字の置換、その他の文字列の置換など、組込みメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。

配列

このモジュールの最後の記事では、配列を見ていきます — 単一の変数名の下に複数のデータ項目のリストを保存するのに適した方法です。ここでは、なぜこれが便利なのかを確認してから、配列の作成方法、配列に格納された項目の取り出し、追加、削除などの方法を学びます。

課題
--

以下の成績評価では、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。

バカ話ジェネレーター

この課題では、このモジュールの記事で取り上げた知識の一部を用いて、ランダムなバカ話を生成する愉快なアプリの作成に適用することを求められます。楽しんで取り組みましょう！

関連情報
----

Learn JavaScript

 短いレッスンとインタラクティブなテストを使用して、自動化された評価に基づいた、インタラクティブな環境で JavaScript を学びます。
 最初の 40 レッスンは無料で、コース全体を少額の 1 回払いで利用できます。
クライアントサイド Web API
=================

ウェブサイトやアプリケーション用にクライアント側の JavaScript を書いていると、すぐに**アプリケーションプログラミングインターフェース** (**A**pplication **P**rogramming **I**nterfaces、**API**) にでくわします。API とはブラウザーやサイトが動作している OS の様々な面を操作したり、他のウェブサイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。

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

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

**始めましょう**

前提条件
----

このモジュールをよく理解するためには、ここまでの一連の JavaScript に関するモジュール（第一歩、構成要素 と JavaScript オブジェクト）の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。

HTML と CSS に関する基礎知識も役に立つでしょう。

**メモ:** もし自分のファイルを作成できないような端末上で作業しているなら、大半のコード例を JSBin や Glitch のようなオンラインプログラム作成・実行環境で試してみることもできます。

ガイド
---

Web API の紹介

まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API が何なのか、どんな使い方があるのかも見ていきます。

文書の操作

ウェブページやアプリケーションを書くとき、最も一般的なことのひとつは、何らかの方法でウェブ文書を操作することでしょう。これは通常、ドキュメントオブジェクトモデル (DOM) を使用することで行われます。これは HTML とスタイル設定情報をコントロールするための API のセットで、 `Document` オブジェクトを多用します。この記事では、 DOM を使用する方法を詳しく見ていきます。また、他にも興味深い方法であなたの環境を変化させることができる API もいくつか紹介します。

サーバーからのデータ取得

また、現代のウェブサイトやアプリケーションでは、新しいページ全体を読み込むことなくウェブページの節を更新するために、サーバーから個々のデータ項目を取得することも非常に一般的なタスクです。この一見小さなことが、サイトのパフォーマンスや動作に大きな影響を及ぼしています。この記事では、この概念を説明し、 `XMLHttpRequest` や Fetch API など、これを可能にする技術について見ていきます。

サードパーティの API

これまで取り上げた API はブラウザーに内蔵されていますが、すべての API が内蔵されているわけではありません。 Google マップ、Twitter、Facebook、PayPal など、多くの大規模なウェブサイトやサービスが API を提供しており、開発者はそれらのデータ（例：ブログに Twitter のストリームを表示する）やサービス（例：サイトにカスタム Google マップを表示したり、 Facebook ログインを使ってユーザーにログインしてもらう）を使用することができます。この記事では、ブラウザー API とサードパーティ API の違いを見て、後者の典型的な使用方法をいくつか示します。

グラフィックの描画

ブラウザーにはグラフィックを描くためのとても強力なツールがいくつか組み込まれています。SVG (Scalable Vector Graphics) 言語から、 HTML の `<canvas>` キャンバス要素に描画するための API （キャンバス API や WebGLを参照）まで。 この記事ではキャンバス API への導入を説明し、もっと深く学習していくためのリソースをご紹介します。

動画と音声の API

HTML には文書にリッチなメディアを埋め込むための要素 — `<video>` と `<audio>` — が備わっています。それぞれに再生やシークなどの操作するための独自 API を備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。

クライアント側ストレージ

現代のブラウザーには、ウェブサイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。
JavaScript の構成要素
================

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

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

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

**始めましょう**

前提条件
----

このモジュールを始める前に、HTML や CSS の基本に慣れておくべきです。また前のモジュールの JavaScript の第一歩 も終了させておくべきです。

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

ガイド
---

コード内で決定を下す — 条件

どんなプログラミング言語でも、コードは異なる入力に応じて決定を下し、それに応じてアクションを実行する必要があります。例えば、ゲームではもしプレイヤーのライフが 0 だった場合、ゲームオーバーになります。お天気アプリでは、朝に見た場合には朝日の画像を表示し、夜に見た場合には星と月を表示します。この記事では、条件の構造が JavaScript でどのように機能するかを説明します。

ループコード

場合によっては、一度にタスクを複数回実行しなければならないことがあります。 例えば名前のリスト全体を調べる場合です。プログラミング時に、ループはこのような処理を非常にうまく実行します。ここでは JavaScript のループ構造を見ていきます。

関数 — 再利用可なコードブロック

コーディングのもう一つの重要な概念は**関数**です。 **関数**を使用すると、定義されたブロック内に単一のタスクを実行するコードを格納し、同じコードを複数回入力するのではなく、単一の短いコマンドを使用して必要となる時にコードを呼び出すことができます。この記事では、基本的な構文、関数、スコープ、引数を呼び出す方法と定義する方法など、関数の背後にある基本的な概念について説明します。

独自の関数を構築する

前の記事で扱った必須の理論の多くを用いて、この記事では実用的な体験を提供しています。ここでは、独自のカスタム関数を構築するための練習をします。 また進むにつれ、関数を扱うためのさらに便利な詳細についても説明します。

関数の返値

関数について知っておくべき必須の概念の最後は返値です。関数によっては完了後に意味のある値を返しませんが、それ以外の関数は返します。値が何であるか、コードでそれらを使用する方法、独自のカスタム関数で有用な値を返す方法を理解することが重要です。

イベントへの入門

イベントとは、プログラミング中のシステムで発生するアクションまたは事象のことで、システムによって通知され、必要に応じて何らかの方法で応答できるようにするものです。例えば、ユーザーがウェブページ上のボタンをクリックすると、情報ボックスを表示することでそのアクションに応答することができます。この最後の記事では、イベントを取り巻くいくつかの重要な概念について説明し、それらがブラウザーでどのように機能するかを見ていきます。

評価
--

以下の評価は、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。

イメージギャラリー

JavaScript の基本的な構成要素を見てきましたので、JavaScript で動く画像ギャラリーという、多くのウェブサイトで見ることができるかなり一般的なアイテムを構築することで、ループ、関数、条件文、イベントに関する知識をテストします。

関連情報
----

Learn JavaScript

ウェブ開発者を目指す人のための優れたリソース - 短いレッスンとインタラクティブなテスト、自動評価によるガイドで、インタラクティブな環境で JavaScript を学ぶことができます。最初の 40 レッスンは無料で、少額の一回払いでこのコースのすべてを利用することができます。
JavaScript オブジェクト入門
===================

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

#### フロントエンドのウェブ開発者になりたい方へ

目標に向かって取り組むために必要な情報をすべて盛り込んだコースを用意しました。

**始めましょう**

前提条件
----

このモジュールを始める前に、HTML と CSS にいくらか精通している必要があります。JavaScript を始める前に HTML 入門と CSS 入門をひととおり学習することをオススメします。

また、JavaScript オブジェクトを詳細に調べる前に、JavaScript の基本についていくらか精通している必要があります。このモジュールを試す前に、JavaScript の第一歩 と JavaScript の構成要素を通して学習してください。

**メモ:** もしあなたが作業しているコンピューター、タブレット、その他の端末で自分でファイルを作れない場合は、JSBin や Glitch といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。

ガイド
---

オブジェクトの基本

JavaScript オブジェクトについて記載している最初の記事では、基本的な JavaScript オブジェクト構文を見てみます。コースの初期段階で既に見た JavaScript の機能を再び見てみたり、すでに扱っている機能の多くは実際にオブジェクトであるという事実を繰り返し述べています。

オブジェクトプロトタイプ

プロトタイプは、JavaScript オブジェクトが互いに機能を継承するメカニズムであり、古典的なオブジェクト指向プログラミング言語の継承メカニズムとは異なる働きをします。この記事では、その違いを探り、プロトタイプチェーンの仕組みを説明し、prototype プロパティを使用して既存のコンストラクタにメソッドを追加する方法を見ていきます。

オブジェクト指向プログラミング

この記事では、「古典的」オブジェクト指向プログラミングの基本的な原則をいくつか説明し、JavaScript でのプロトタイプモデルとは異なるところを見ていきます。

JavaScript でのクラス

JavaScriptは、「古典的な」オブジェクト指向プログラムを実装したい人のためにいくつかの機能を提供しています。この記事では、これらの機能を説明します。

JSON データの操作

JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいて構造化されたデータを表現するための標準のテキストベースのフォーマットであり、ウェブサイト上でデータを表現し、送信するために一般的に使用されます (すなわち、サーバーからクライアントへデータを送信して、その結果ウェブページ上に表示することができます)。これはとても良く見るものなので、この記事では、JSON を解析してその中のデータ項目にアクセスしたり、独自の JSON を記述したりするなど、JavaScript を使用して JSON を操作するために必要なことをすべて説明します。

オブジェクト構築の練習

これまでの記事では、基本的な JavaScript オブジェクトの理論と構文の詳細をすべて見てもらい、あなたには出発できるしっかりとした基本が与えられました。この記事では実践的なエクササイズを行い、もっと楽しい色とりどりの色付きのボールを作成するカスタム JavaScript オブジェクトを作る練習をしていきます。

評価
--

バウンスボールのデモに機能を追加する

この評価では、前の記事のバウンスボールデモを出発点として使用し、新しい興味深い機能を追加する予定です。

関連情報
----

Learn JavaScript

ウェブ開発者を目指す人のための優れたリソース - 短いレッスンとインタラクティブなテスト、自動評価によるガイドで、インタラクティブな環境で JavaScript を学ぶことができます。最初の 40 レッスンは無料で、少額の 1 回払いでこのコースの全容を利用することができます。
非同期 JavaScript
==============

このモジュールでは非同期 JavaScript に触れ、なぜそれが重要なのか、そして、潜在的なブロッキング処理（例えばサーバからリソースを取得する）に効果的に対処するためにどうやって使うのかを見ていきます。

#### フロントエンドウェブ開発者を目指す方へ

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

**始めましょう**

前提条件
----

非同期 JavaScript はとても高度なトピックなので、事前に JavaScript の第一歩と JavaScript の構成要素のモジュールに取り組んでおくことをおすすめします。

**メモ:** ファイルを作成する手段のないコンピューター・タブレット・その他の端末をお使いの場合、（ほとんどの）コード例は JSBin や Glitch などのオンラインエディターでも試すことができます。

ガイド
---

非同期 JavaScript 入門

この記事では**同期**プログラミングと**非同期**プログラミングとは何か、なぜ頻繁に非同期のテクニックを使う必要があるのか、歴史的に非同期関数は JavaScript でどのように実装されてきたのか、そしてその問題点が何だったのかを見ていきます。

プロミスの使い方

ここではプロミスを紹介し、プロミスベースの API の使い方をお見せします。`async` と `await` キーワードの紹介もここで行います。

プロミスベースの API の実装

この記事では独自のプロミスベースの API を実装する方法を概説します。

ワーカー入門

ワーカーを使用すると、特定のタスクを別のスレッドで実行し、メインコードの応答性を維持することができます。この記事では、長時間実行される同期的な関数をワーカーを使用して書き直します。

学習の評価
-----

アニメーションを順番に再生する

この評価ではプロミスを使用して一連のアニメーションを特定の順序で再生してください。

関連情報
----

* Asynchronous Programming (Marijn Haverbeke 氏の非常に優れたオンライン書籍 Eloquent JavaScript より)
スキルテスト: オブジェクト指向 JavaScript
===========================

このスキルテストの目的は、JavaScript でのクラスの記事を理解できたかどうかを評価することです。

**メモ:** 下記のインタラクティブエディターで解答を試すことができますが、コードをダウンロードして、CodePen, jsFiddle, Glitch などのオンラインツールを使用して作業すると便利です。

もし行き詰まった場合は、このページの下にある「評価とさらなる支援」(#評価とさらなる支援)の節を参照して、私たちに支援を要求してください。

**メモ:** 下記の例では、コードにエラーがある場合、ページ上の結果パネルに出力されるので、答え合わせをするのに役立ちます（ダウンロードした場合には、ブラウザーの JavaScript コンソールに出力されます）。

OOJS 1
------

このタスクでは、`Shape` クラスの定義から始めましょう。このクラスには `name`, `sides`, `sideLength` の 3 つのプロパティがあります。このクラスは、正方形や正三角形のように、すべての辺の長さが同じである図形のみをモデルとしています。

次のことをやってください。

* このクラスにコンストラクターを追加しましょう。コンストラクターは `name`, `sides`, `sideLength` プロパティを引数に取り、初期化します。
* このクラスに新しいメソッド `calcPerimeter()` を追加しましょう。このメソッドは、外周の長さ（図形の外縁の長さ）を計算し、その結果をコンソールにログ出力します。
* `Shape` クラスの新しいインスタンス `square` を作成しましょう。名前に `square`、 `sides` に `4`、 `sideLength` に `5` を指定しましょう。
* このインスタンスに対して `calcPerimeter()` メソッドを呼び出して、計算結果が期待通りにブラウザーコンソールにログ出力されるかどうかを確認しましょう。
* 新しい `Shape` のインスタンスとして `triangle` を作成しましょう。名前は `triangle`、`sides` は `3`、`sideLength` は `3` とします。
* triangle.calcPerimeter()`を呼び出して、問題なく動作することを確認しましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分自身でエディターやオンラインエディターで作業する場合は、この作業の開始時点のものをダウンロードしましょう。

OOJS 2
------

次に、`Shape`を継承した `Square` クラスを作成し、正方形の面積を計算する `calcArea()` メソッドを追加しましょう。また、`Square` オブジェクトインスタンスの `name` プロパティには自動的に `square` が設定され、`sides` プロパティには自動的に `4` が設定されるようにコンストラクターを設定しましょう。したがって、コンストラクターを呼び出す際には、`sideLength` プロパティだけを提供すればよいことになります。

適切なプロパティ値を持つ `Square` クラスのインスタンス `square` を作成し、その `calcPerimeter()` と `calcArea()` メソッドを呼び出して、問題なく動作することを示しましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分自身でエディターやオンラインエディターで作業する場合は、この作業の開始時点のものをダウンロードしましょう。

評価とさらなる支援
---------

これらの例は、上記のインタラクティブエディターで練習することができます。

自分の作品を評価してほしい、行き詰っているので相談したい方は、次のようにしましょう。

1. 自分の作品を CodePen, jsFiddle や Glitch などのオンラインで共有できるエディターに入れます。
2. MDN Discourse フォーラムの Learning カテゴリーに、評価や支援を求める投稿を（英語で）書き込んでください。投稿には次のことを書いてください。
    * "Assessment wanted for OOJS 1 skill test" のような、説明的なタイトル。
    * すでに試したことの詳細と、私たちに何をしてほしいか（例: 行き詰まり、助けが必要な場合、または評価が必要な場合）。
    * 評価やヘルプが必要なサンプルへのリンクを、オンライン共有可能なエディター（上記のステップ 1 で述べたとおり）にて提供します。コードを見ることができなければ、コーディングの問題で誰かを助けることは非常に困難です。
    * 実際の課題または評価ページへのリンクにより、助けを求めている問題を見つけることができます。
スキルテスト: JSON
============

このスキルテストの目的は、JSON の操作の記事を理解できたかどうかを評価することです。

**メモ:** 下記のインタラクティブエディターで解答を試すことができますが、コードをダウンロードして、CodePen, jsFiddle, Glitch などのオンラインツールを使用して作業すると便利です。

もし行き詰まった場合は、このページの下にある「評価またはさらなる支援」(#評価またはさらなる支援)の節を参照して、私たちに支援を要求してください。

**メモ:** 下記の例では、コードにエラーがある場合、ページ上の結果パネルに出力されるので、答え合わせをするのに役立ちます（ダウンロードした場合には、ブラウザーの JavaScript コンソールに出力されます）。

JSON 1
------

この記事の唯一の課題は、JSON データにアクセスして、それをページ内で使用することに関するものです。いくつかの母猫とその子猫に関する JSON データが sample.json で提供されています。JSON は文字列としてページに読み込まれ、`displayCatInfo()` 関数の `catString` 引数で利用できるようになります。課題は、`displayCatInfo()` 関数の欠落部分を埋めて格納することです。

* 母猫 3 匹の名前をカンマで区切って `motherInfo` という変数に入れてください。
* `kittenInfo` 変数には、子猫の総数、およびオスとメスの数を格納してください。

そして、これらの変数の値が、段落の中で画面に表示されるようにします。

ヒントや質問をいくつか示します。

* JSON データは `displayCatInfo()` 関数の中でテキストとして提供されます。JSON から何かデータを取得する前に、JSON を解釈する必要があります。
* 外側のループを使用して猫をループ処理して、その名前を `motherInfo` 変数文字列に追加し、内側のループを使用してすべての子猫をループ処理して、すべての子猫/オス/メスの合計を加算し、その詳細を `kittenInfo` 変数の文字列に追加するとよいでしょう。
* 最後の母猫の名前の前に "and" を、その後にピリオドを置く必要があります。どうすれば、JSON に何匹の猫がいても、このような動作をさせることができるでしょうか。
* なぜ `para1.textContent = motherInfo;` と `para2.textContent = kittenInfo;` の行は `displayCatInfo()` 関数の中にあり、スクリプトの終わりにはないのでしょうか。これは、非同期コードと関係があります。

下記のライブコードを更新して、完成例を再現してみてください。

自分自身でエディターやオンラインエディターで作業する場合は、この作業の開始時点のものをダウンロードしましょう。

評価とさらなる支援
---------

これらの例は、上記のインタラクティブエディターで練習することができます。

自分の作品を評価してほしい、行き詰っているので相談したい方は、次のようにしましょう。

1. MDN Discourse フォーラムの Learning カテゴリーに、評価や支援を求める投稿を（英語で）書き込んでください。投稿には次のことを書いてください。
    * "Assessment wanted for JSON skill test" のような、説明的なタイトル。
    * すでに試したことの詳細と、私たちに何をしてほしいか（例: 行き詰まり、助けが必要な場合、または評価が必要な場合）。
    * コード。
    * 実際の課題または評価ページへのリンクにより、助けを求めている問題を見つけることができます。
スキルテスト: オブジェクトの基本
=================

このスキルテストの目的は、JavaScript オブジェクトの基本の理解度をテストすることです。

**メモ:** 以下のインタラクティブなエディターでソリューションを試すこともできますが、コードをダウンロードし、CodePen, jsFiddleやGlitchのようなオンラインツールを使用してタスクを実行すると役立つ場合があります。

行き詰まった場合は、助けを求めてください — このページの下部にある評価またはさらなる支援セクションを参照してください。

**メモ:** 以下の例では、コードにエラーがある場合、ページの結果パネルに出力され、答えを見つけ出すのに役立ちます（ダウンロード可能なバージョンの場合は、ブラウザーの JavaScript コンソールに）

オブジェクトの基本 1
-----------

このタスクでは、オブジェクトリテラルが与えられます。あなたのタスクは下記です。

* `catName`変数に、**角括弧記法**を用いて、`name`プロパティの値を保存する
* **ドット記法**を用いて、`greeting()`メソッドを使う
* `color`プロパティを`black`に変更する

以下のライブコードを更新して、完成した例を再現してみてください。

**メモ:** このタスクの開始点をダウンロードして、お好きなエディターまたはオンライン・エディターで作業してください。

オブジェクトの基本 2
-----------

次のタスクでは、お気に入りのバンドの 1 つを表す、自分だけのオブジェクトリテラルを作成してみましょう。必要な要素は次のとおりです。

* `name`: バンドの名前を表す文字列
* `nationality`: バンドの出身国を表す文字列
* `genre`: バンドが演奏する音楽の種類
* `members`: バンドのメンバー数を表す数字
* `formed`: バンドが結成した年を表す数字
* `split`: バンドが解散した年を表す数字、まだ活動している場合は`false`
* `albums`: そのバンドによってリリースされたアルバムを表す配列。それぞれの配列の要素は、下記の要素を含んだオブジェクトであること
    + `name`: アルバムの名前を表す文字列
    + `released`: リリースされた年を表す数字

`albums` 配列には、少なくとも 2 つのアルバムを含めること。

これが終わったら、変数`bandInfo`に、名前、国籍、活動年数、スタイル、最初のアルバムのタイトルと発売日などの少しの詳細を書き込みます。

以下のライブコードを更新して、完成した例を再現してみてください。

**メモ:** このタスクの開始点をダウンロードして、お好きなエディターまたはオンライン・エディターで作業してください。

オブジェクトの基本 3
-----------

最後に、「オブジェクトの基本」のまとめとして、タスク＃1 の`cat`オブジェクトリテラルに戻りましょう。 「`Hello, said Bertie the Cymric.`」と記録されるように、`greeting（）`メソッドを書き直してください。 ブラウザーの DevTools のコンソールにアクセスしますが、名前や品種に関係なく、同じ構造のすべての`cat`オブジェクトで機能します。

完了したら、`cat2`という独自のオブジェクトを作成します。このオブジェクトは、同じ構造、まったく同じ`greeting（）`メソッドを持ちますが、名前、品種、色が異なります。

両方の`greeting（）`メソッドを呼び出して、適切なあいさつ（greeting）がコンソールに記録されることを確認します。

コードはあまりDRYではありません（それぞれは 1 回だけ定義すること）—たとえば、同じメソッドを 2 回定義しています。 どうすればもっと DRY にすることができますか？ よくわからない場合でも、心配しないでください。これは、シリーズの今後の記事で取り上げる予定です。

以下のライブコードを更新して、完成した例を再現してみてください。

**メモ:** このタスクの開始点をダウンロードして、お好きなエディターまたはオンライン・エディターで作業してください。

まとめとヘルプ
-------

自分のコードの評価が欲しい、または行き詰まって助けを求めたい場合：

1. CodePen、jsFiddle、Glitch などのオンライン共有可能なエディターで作業をします。コードを自分で作成することも、上記のセクションでリンクされているスターティングポイントファイルを使用することもできます。
2. MDNDiscourse フォーラムの学習カテゴリで評価や支援を求める投稿を書いてください。投稿には次のものを含める必要があります。

* 「オブジェクトの基本 1 の スキルテスト を行ったので評価して欲しい」などの説明的なタイトル。
* あなたがすでに試したことの詳細、そしてあなたが私たちに何をしてほしいか、例えば行き詰まって助けが必要な場合、または評価が必要な場合。
* オンラインの共有可能なエディターで、評価したい、または支援が必要な例へのリンク（上記のステップ 1 で説明）。これは入門するのに良い習慣です—あなたが彼らのコードを見ることができないならば、コーディング問題で誰かを助けることは非常に難しいです。
* 実際のタスクまたは評価ページへのリンク。サポートが必要な質問を見つけることができます。
アニメーションを順番に再生する
===============

* 前のページ
* Overview: Asynchronous

この評価では、一連のアニメーションを順番に再生するためにページを更新します。これを行うには、プロミスの使い方の記事で学んだテクニックのいくつかを使用します。

|  |  |
| --- | --- |
| 前提条件: | 基本的なコンピューターリテラシー、JavaScript の基本、プロミスベースの API を使用する方法をそれなりに理解していること。 |
| 目標: | プロミスベースの API を使用する方法の理解度をテストするため。 |

開始点
---

https://github.com/mdn/learning-area/tree/main/javascript/asynchronous/sequencing-animations/startにあるファイルのローカルコピーを作成ししてください。 4 つのファイルが含まれています。

* alice.svg
* index.html
* main.js
* style.css

編集するファイルは、 "main.js" だけです。

ブラウザーで "index.html" を開くと、 3 つの画像が斜めに配置されているのがわかるでしょう。

![アニメーションを順番に再生する評価ページのスクリーンショット](/ja/docs/Learn/JavaScript/Asynchronous/Sequencing_animations/sequencing-animations.png)

画像は、ウェブアニメーション API を使用するのガイドから引用しています。

プロジェクト概要
--------

このページを、 3 つの画像すべてにアニメーションを適用し、 1 つずつ順番に更新していくように更新してください。つまり、最初の画像が終了したら 2 つ目の画像を、 2 つ目の画像が終了したら 3 つ目の画像をアニメーションさせるわけです。

このアニメーションは、すでに "main.js" で定義されているもので、画像を回転させ、消えるまで縮小させるだけです。

このページがどのように動作するかをもっと理解してもらうために、完成例を見てください。アニメーションは一度しか実行されないことに注意してください。もう一度実行させたい場合は、ページを再読み込みしてください。

完成までのステップ
---------

### 最初の画像をアニメーションさせる

画像のアニメーションにはウェブアニメーション API を使用しており、具体的には `element.animate()` メソッドを使用しています。

"main.js" を更新して、以下のように `alice1.animate()` の呼び出しを追加してください。


```js
const aliceTumbling = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const aliceTiming = {
  duration: 2000,
  iterations: 1,
  fill: "forwards",
};

const alice1 = document.querySelector("#alice1");
const alice2 = document.querySelector("#alice2");
const alice3 = document.querySelector("#alice3");

alice1.animate(aliceTumbling, aliceTiming);
```


ページを再読み込みすると、最初の画像が回転したり縮小したりするのがわかるはずです。

### すべての画像をアニメーションさせる

次に、`alice1` が終了したら `alice2` を、 `alice2` が終了したら `alice3` をアニメーションさせたいと思います。

`animate()` メソッドは `Animation` オブジェクトを返します。このオブジェクトには `finished` プロパティがあり、これはアニメーションの再生が完了したときに履行される `Promise` です。つまり、次のアニメーションを開始するタイミングを知るために、このプロミスを使用することができます。

この実装を行うためにいくつかの異なる方法を試し、プロミスを使用する方法を強化していただきたいと思います。

1. 最初に、動作するものを実装するのですが、コールバックを使用する際の注意点で見た「コールバック地獄」問題のプロミス版があります
2. 次に、これをプロミス連鎖として実装しましょう。アロー関数で使用できる形が異なるため、この書き方はいくつかあることに注意してください。どれが一番簡潔でしょうか？どれが一番読みやすいと感じますか？
3. 最後に `async` と `await` を使用して実装しましょう。

`element.animate()` は `Promise` を返すのではないことに注意してください。 `Promise` である `finished` プロパティを持つ `Animation` オブジェクトを返すのです。

評価またはさらなる支援
-----------

自分の作品を評価してほしい、または行き詰まりを感じていて相談したい場合は、次のようにしてください。

1. CodePen, jsFiddle, Glitchなどのオンライン共有エディターに自分の作品を入れてください。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を（英語で）書いてください。記事には以下のことを記載してください。
    * "Assessment wanted for Sequencing animations" など、わかりやすいタイトル。
    * すでに試したこと、そして私たちに何をしてほしいかについての詳細（例：行き詰まって助けが必要なとき、または評価が必要なとき）。
    * 評価したい、または助けが必要な例へのリンクを、オンライン共有エディター（上記のステップ 1 で述べたとおり）にて添付してください。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンクで、助けを求めている問題を探すことができます。
* 前のページ
* Overview: Asynchronous