recursal/MDN huggingface dataset:
あなたのスキルをテストしよう: 数学
==================

このスキルテストの目的は、JavaScript での基本演算 — 数値と演算子 の記事を理解しているかどうかを評価することです。

**メモ:** 下記のインタラクティブエディターのソリューションで試してみることができますが、コードをダウンロードし、CodePen、jsFiddle、Glitch などのオンラインツールを利用すると、タスクに取り組むのに役立つかもしれません。

行き詰まったなら、私たちに助けを求めてください。 — このページの下部の Assessment or further help セクションを参照

**メモ:** 下記の作成では、あなたのコードにエラーがあれば、このページの結果パネル（または、ダウンロード可能なバージョンでは、ブラウザーの JavaScript コンソール）に出力され、答えにたどり着くための助けとなります。

数学 1
----

基本演算子の知識をテストすることから始めましょう。4 つの数値を作成し、最初の 2 つを加算してください。そして 3 番目から 4 番目を減算してください。そうして出来た 2 つの 2 次結果を乗算して、48 になるようにしてください。最後に、この値が偶数であることを証明するテストを記述することも必要ですね。

では、完成イメージを再構築するために、下記のライブコードを更新してみましょう。次の手順に従ってください:

1. 数値の変数を 4 つ作成してください。変数にわかりやすい名前を付けてください。
2. 最初の 2 つの変数を加算し、その結果を別の変数に格納してください。
3. 3 番目の変数から 4 番目の変数を減算し、その結果を別の変数に格納してください。
4. 上記 2 つの工程の結果を乗算し、`finalResult` という変数に格納してください。その結果は 48 になるはずです。もしならなければ、初期の設定数値を調整する必要があります。
5. 最後に、`finalResult` が偶数であるかどうかをチェックする計算式を記述してください。結果を `evenOddResult` という変数に格納してください。

**メモ:** このタスクのための準備済みファイルをダウンロード して、自身のエディターまたはオンラインエディターで動かせるようにしてください。

数学 2
----

2 番目のタスクでは、すでに結果が変数 `result` と `result2` に格納されている 2 つの計算式が提供されています。しかし、これらの結果は私たちが求めているものではありません。望む結果にするために、2 つの計算式を変更する必要がでてきます。

私たちは何を求めている？ 2 つの結果を乗算し、その結果を小数第 2 位までにフォーマットすると、最終結果は 10.42 になるようにしたいのです。

この完成イメージを再構築するために、下記のライブコードを更新してみましょう。次の手順に従ってください:

1. `result` と `result2` を乗算し、結果を `result` に代入し戻す計算式を記述してください。これは、代入演算子の略記形を使いましょう。
2. その結果を小数第 2 位までにフォーマットし、そして `finalResult` という変数に格納する 1 行コードを記述してください。
3. `typeof` を使用して `finalResult` のデータ型をチェックしてください。実際には `string` 型であることがわかるでしょう！それを `number` 型に変換し、結果を `finalNumber` という変数に格納する 1 行コードを記述してください。
4. `finalNumber` の値は `10.42` にならなければいけません。戻って、この最終結果が得られるように最初に与えられていた計算式を更新してください。数値や演算子は更新しないでくださいね。

**メモ:** このタスクのための準備済みファイルをダウンロード して、自身のエディターまたはオンラインエディターで動かせるようにしてください。

数学 3
----

この記事の最後のタスクでは、いくつかのテストを記述していきましょう。各々がステートメントと 2 つの変数で構成されてる、3 つのグループが与えられています。各グループについて、与えられているステートメントを証明または反証するテストを記述してください。これらのテスト結果を、各々 `weightComparison`、`heightComparison`、そして `pwdMatch` という変数に格納してください。

**メモ:** このタスクのための準備済みファイルをダウンロード して、自身のエディターまたはオンラインエディターで動かせるようにしてください。

評価またはさらなる助け
-----------

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

あなたの制作物を評価してもらいたい、または行き詰まって助けを求めたい場合:

1. あなたの制作物を、CodePen、jsFiddle、または Glitch のような共有可能なオンラインエディターに置いてください。いちから自身でコードを記述することもできますし、上記のセクションでリンク付けされている準備済みファイルを利用するのもよいでしょう。
2. MDN Discourse forum Learning category で、評価を希望したり、助けを求めるポストを投稿してください。ポストには以下を含みましょう:
    * "Assessment wanted for Math 1 skill test" のような説明的なタイトル
    * あなたがこれまで試したことの詳細、そしてあなたが私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
    * 評価してほしかったり、助けが必要な作成物へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい実践方法でしょう — コードが見れない状態で、コーディング問題を抱えている人を助けることはとても難しいですよね。
    * 実際のタスクまたは評価ページのリンク。そうすれば、あなたがどの質問に助けが必要かがわかります。
スキルテスト: 配列
==========

このスキルテストの目的は、配列 の記事を理解しているかどうかを評価することです。

**メモ:** 下記のインタラクティブエディターで回答を試すことができますが、コードをダウンロードし、 CodePen、 jsFiddle、 Glitch などのオンラインツールを利用すると、タスクに取り組むのに役立つかもしれません。

行き詰まったなら、私たちに助けを求めてください。 — このページの下部の 評価またはさらなる支援 の節を参照

**メモ:** 下記の作成では、あなたのコードにエラーがあれば、このページの結果パネル（または、ダウンロード可能なバージョンでは、ブラウザーの JavaScript コンソール）に出力され、答えにたどり着くための助けとなります。

配列 1
----

まずは配列の基礎から始めましょう。このタスクでは、 3 つの要素を含む配列を作成し、 `myArray` という変数に格納します。要素は何でも構いません。好きな食べ物やバンドにしてはいかがでしょうか？

次に、単純な括弧の記法による代入で、最初の 2 つの要素を変更してください。そのあと、配列の先頭に新しい要素を追加します。

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

このタスクのための準備済みファイルをダウンロード して、自分のエディターまたはオンラインエディターで動かせるようにしましょう。

配列 2
----

さて、別のタスクに移りましょう。ここでは、取り組むべき文字列が与えられています。すべきことは次の通りです。

1. 文字列を配列に変換してください。その過程で、 `+` という文字を取り除きます。結果を `myArray` という変数に格納します。
2. 配列の要素数を、 `arrayLength` という変数に格納します。
3. 配列の末尾の要素を、 `lastItem` という変数に格納します。

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

このタスクのための準備済みファイルをダウンロード して、自分のエディターまたはオンラインエディターで動かせるようにしましょう。

配列 3
----

このタスクでは、我々が用意した配列を出発点として、やや逆行する作業を行います。具体的には、

1. 配列の末尾の要素を削除します。
2. 配列の末尾に新たに 2 つの名前を追加します。
3. 配列の各要素を調べて、要素のインデックス番号を丸括弧で囲み、名前の後ろに追記します。例: `Ryu (0)`。 なお、このやり方は配列の記事では教えていませんので、自分で調べる必要があるでしょう。
4. 最後に、配列の各要素を "`-`" で区切って 1 つの文字列に結合し、 `myString` という変数に格納します。

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

このタスクのための準備済みファイルをダウンロード して、自分のエディターまたはオンラインエディターで動かせるようにしましょう。

配列 4
----

このタスクでは、出発点として鳥の名前を列挙した配列が与えられています。

* `"Eagles"` 要素のインデックスを特定し、そのインデックスを用いて `"Eagles"` 要素を削除してください。
* この配列から、名前が"E"で始まる鳥だけを含む `eBirds` という名前の新しい配列を作成してください。ちなみに、 `startsWith()` は文字列が特定の文字で始まるかどうかを調べるのにとても役立ちます。

`"Emus,Egrets"` が表示されたら成功です。

このタスクのための準備済みファイルをダウンロード して、自分のエディターまたはオンラインエディターで動かせるようにしましょう。

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

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

作品を評価してもらいたい、または行き詰まって助けを求めたい場合は次のようにしてください。

1. 作品を、CodePen, jsFiddle, または Glitch. のような共有可能なオンラインエディターに置いてください。いちから自身でコードを記述することもできますし、上記のセクションでリンク付けされている準備済みファイルを利用するのもよいでしょう。
2. MDN Discourse forum Learning category で評価を希望したり、助けを求める投稿をしてください。（英語）投稿には以下のことを書きましょう。
    * "Assessment wanted for Variables 1 skill test"のような説明的なタイトル
    * これまで試したことの詳細、そして私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
    * 評価してほしかったり、助けが必要な作品へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい手法です。 — コードが見えない状態で、コーディングの問題を抱えている人を助けることはとても難しいことです。
    * 実際のタスクまたは評価ページのリンク。そうすれば、どの質問に助けが必要かがわかります。
ハイパーリンクとは？
==========

この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。

|  |  |
| --- | --- |
| 前提条件: | まずインターネットはどのように動くのかを理解し、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いについてよく理解している必要があります。 |
| 目標: | ウェブ上のリンクとその重要性について学びます。 |

概要
--

ハイパーリンクは通常リンクと呼ばれ、ウェブの背後にある基本概念です。リンクとは何かを説明するために、ウェブアーキテクチャの基本に戻る必要があります。

ウェブの発明者でもあるティム・バーナーズ・リーは、 1989 年にウェブを支える 3 つの柱について語りました。

1. URL、ウェブ文書を追跡するアドレスシステム
2. HTTP、URL が与えられたときに文書を見つけるための転送プロトコル
3. HTML、埋め込み**ハイパーリンク**を可能にする文書形式

3 つの柱からわかるように、ウェブ上のすべてのものは文書とそのアクセス方法を中心に展開されています。ウェブの当初の目的は、テキスト文書に簡単にアクセスし、読み込み、そしてナビゲートする方法を提供することでした。それ以来、ウェブは画像、ビデオ、およびバイナリーデータへのアクセスを提供するように進化しましたが、これらの改善によって 3 つの柱が変わることはほとんどありませんでした。

ウェブが登場する前は、文書にアクセスして別の文書に移動することはとても困難でした。人が読めるので、 URL はすでに物事を簡単にしますが、文書にアクセスする都度長い URL を入力するのは困難です。これがハイパーリンクがすべてに革命をもたらしたところです。リンクは任意のテキスト文字列を URL と関連付けることができるため、ユーザーはリンクを起動することで対象の文書にすぐにアクセスできます。

下線が引かれ、青いテキストで囲まれていることで、リンクは周囲のテキストから目立っています。リンクをタップまたはクリックしてアクティブにするか、キーボードを使用している場合は、リンクがフォーカスされるまで Tab キーを押して Enter キーまたはスペースバーを押します。

![Example of a basic display and effect of a link in a web page](/ja/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-1.png)

リンクは、ウェブをとても便利で成功させた画期的なものです。この記事の残りの部分では、さまざまな種類のリンクと、それらが現代のウェブデザインにとって重要であることについて説明します。

より深く掘り下げる
---------

すでに述べたように、リンクは URL に関連付けられたテキスト文字列です。リンクを使用すると、ある文書から別の文書に簡単に移動できます。とは言っても、考慮すべきいくつかのニュアンスがあります。

### リンクの種類

内部リンク

両方ともあなたのウェブサイトに属している 2 つのウェブページ間のリンクは、内部リンクと呼ばれます。内部リンクがなければ、ウェブサイトのようなものはありません（もちろん、 1 ページのウェブサイトでもない限りはですが）。

外部リンク

あなたのウェブページから他の誰かのウェブページへのリンク。ウェブはウェブページのネットワークであるため、外部リンクがなければウェブはありません。あなたのウェブページを通して利用可能なコンテンツ以外の情報を提供するには外部リンクを使用してください。

被リンク

他の人のウェブページからあなたのサイトへのリンク。外部リンクの反対です。誰かがあなたのサイトにリンクしたときにあなたはリンクバックする必要はないことに注意してください。

ウェブサイトを構築するときは、内部リンクに集中してください。これらのリンクを使用すると、サイトが使用可能になります。リンク数が多すぎることと少なすぎることの間でバランスの取れたものを見つけてください。別の記事でウェブサイトナビゲーションの設計について説明しますが、原則として、新しいウェブページを追加するときは必ず、他のページの少なくとも 1 つがその新しいページにリンクしていることを確認してください。一方、サイトに 10 ページを超えるページがある場合は、他のすべてのページからすべてのページにリンクするのは非生産的です。

始めて間もないうちは、それほど外部と入ってくるリンクについて心配する必要はありません。しかし検索エンジンにサイトを見つけさせたいならそれらは非常に重要です（詳細については下記を参照してください）。

### アンカー

ほとんどのリンクは 2 つのウェブページを結び付けています。**アンカー**は 1 つの文書の 2 つのセクションを一緒に結びます。 アンカーを指すリンクをたどると、ブラウザーは新しい文書を読み込むするのではなく、現在の文書の別の部分にジャンプします。ただし、他のリンクと同じ方法でアンカーを作成して使用します。

![Example of a basic display and effect of an anchor in a web page](/ja/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-2.png)

### リンクと検索エンジン

リンクはユーザーにとっても検索エンジンにとっても重要です。検索エンジンは、ウェブページをクロールするたびに、そのウェブページで利用可能なリンクをたどってウェブサイトにインデックスを付けます。検索エンジンは、リンクをたどってウェブサイトのさまざまなページを見つけるだけでなく、リンクの表示テキストを使用して、どの検索クエリーが対象のウェブページにアクセスするのに適しているかを判断します。

リンクは、検索エンジンがサイトにどれだけ早くリンクするかに影響します。問題は、検索エンジンのアクティビティを測定するのが難しいということです。企業は当然、自分のサイトが検索結果の上位にランクされることを望んでいます。検索エンジンがサイトのランクをどのように決定するかについては、次のことがわかっています。

* リンクの**表示テキスト**は、どの検索クエリーが特定の URL を検索するかに影響します。ウェブページの**被リンク**が多いほど、検索結果のランクは高くなります。
* **外部リンク**は、元のウェブページと遷移先のウェブページの両方の検索ランキングに影響を与えますが、その程度は不明です。

SEO （検索エンジン最適化）は、検索結果でウェブサイトを上位にランク付けする方法の研究です。ウェブサイトのリンクの使用を改善することは、有益な SEO テクニックのうちの一つです。

次のステップ
------

それでは、いくつかウェブページにリンクを設定しましょう。

* すべてのリンクが URL を指しているので、より理論的な背景を得るには、URL とその構造について学びます。
* もう少し実用的なものが欲しいですか？ HTML 入門モジュールの記事「ハイパーリンクの作成」で、リンクの実装方法について詳しく説明しています。
アクセシビリティを推進する HTML の機能とは？
=========================

以下のコンテンツは、さまざまな障害を持つ人々にとってウェブページのアクセシビリティをより高めるために使用できる HTML の特定の機能について説明しています。

タブ移動
----

ポインティングデバイスを使用しない、または使用できないユーザーは、リンク間を `Tab` で移動できます。ですから、リンクは論理的なタブ移動の順序になっている必要があります。 `tabindex` 属性を使用すると、この順序を定義することができます。 HTML が線形である場合（そうあるべきなのですが）、論理的なタブ移動の順序は自動的に正しい位置に配置されるはずです。


```html
<ul>
  <li><a href="here.html" tabindex="1">Here</a></li>
  <li><a href="there.html" tabindex="3">There</a></li>
  <li><a href="anywhere.html" tabindex="2">Anywhere</a></li>
</ul>
```


この例では（これは純粋にデモンストレーションとして使用されています - こうはしないでください）、タブは "Here" から "Anywhere" 、"There" の順にジャンプします。

リンクタイトル
-------

自己説明的でないリンクがある場合や、リンク先をより詳細に説明をすることで好ましいことがある場合、`title`属性を使用してリンクに情報を追加することができます。


```html
<p>
  I'm really bad at writing link text.
  <a
 href="inept.html"
 title="Why I'm rubbish at writing link text: An explanation and an apology."
 >Click here</a
 >
  to find out more.
</p>
```

アクセスキー
------

**アクセスキー**を使用すると、**キーボードショートカット**をリンクに割り当てることができ、ナビゲーションが簡単になります。通常、ユーザーが `Alt` キーまたは `Ctrl` キーを押しながらアクセスキーを押すとフォーカスが移動します。正確なキーの組み合わせはプラットフォームによって変わります。


```html
<a href="somepage.html" accesskey="s">Some page</a>
```

スキップリンク
-------

タブ移動を補助するために、ユーザーがあなたのウェブページの大きな塊を飛び越えることを可能にするリンクを提供することができます。たとえば、ユーザーが多すぎるナビゲーションリンクを飛び越えて、すべてのリンクを巡回するのではなくページのメインコンテンツを読むことができるようにしたい場合があります。


```html
<header>
  <h1>The Heading</h1>
  <a href="#content">コンテンツまでスキップ</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>
```
アクセシビリティとは？
===========

この記事はウェブアクセシビリティの背景にある基本的な概念を紹介します。

|  |  |
| --- | --- |
| 前提条件: | None. |
| 目標: | アクセシビリティとは何か、なぜそれが重要なのかを学びます。 |

概要
--

身体的または技術的な制約のために、もしかしたら訪問者は、期待通りにウェブサイトを体験することができないかもしれません。この記事では、アクセシビリティの一般的な原則と、いくつかのルールについて説明します。

アクティブラーニング
----------

*利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。*

より深く掘り下げる
---------

### アクセシビリティ: 一般的な原則

アクセシビリティというと、まずネガティブな制限を連想するかもしれません。この建物はアクセシビリティを確保しなければならないので、ドアの幅やトイレの大きさ、エレベーターの配置など、これらの規則に従わなければならないのです。

それは、アクセシビリティを考える上で、狭量な考え方です。アクセシビリティは、人々に力を与え、より多くのお客様にサービスを提供するための素晴らしい方法だと考えてください。ブラジルの人たちは、あなたの英語のウェブサイトを見て何ができるでしょうか。スマートフォンを持っている人たちが、大きなデスクトップモニターと無制限の帯域幅のために設計された重くて雑然としたウェブサイトを閲覧できるでしょうか。彼らはどこか別の場所に行くでしょう。一般的に、**私たちは、すべてのターゲット顧客の視点から製品について考え、それに応じて適応しなければならない**と言われています。従って、アクセシビリティなのです。

### ウェブアクセシビリティ

ウェブ特有の文脈では、アクセシビリティとは、障害、場所、技術的な制約、その他の状況にかかわらず、誰もがコンテンツから恩恵を受けることができることを意味します。

動画について考えてみましょう。

聴覚障碍

聴覚障碍者は動画からどのような恩恵を受けるのでしょうか？字幕を提供するか、あるいはそれより良いことは、全文を書き起こす必要があります。

また、人それぞれのニーズに合わせて、音量を調整できるようにしましょう。

視覚障碍

この場合も、ユーザーが動画を再生しなくても参照できるテキスト形式の写本と、音声解説（動画の中で何が起こっているかを説明する画面外の音声）を提供しましょう。

中断機能

ユーザーは動画の中の人物を理解するのに苦労することがあります。字幕を読んだり、情報を処理したりするために、動画を一時停止できるようにしましょう。

キーボードの能力

ユーザーが引っかかることなく、動画へのタブイン/アウト、再生、一時停止を行えるようにします。

#### ウェブアクセシビリティの基本

基本的なウェブアクセシビリティのために必要なものは、以下の通りです。

* 視覚に障碍をお持ちのユーザーや回線速度の遅いユーザーのために、意味を伝えるために画像が必要な場合は、代替用のテキストを入れるようにしましょう。
* すべてのユーザーがグラフィカルインターフェイス（メニューの展開など）をキーボードのみ（例えばタブキーとリターンキー）で操作できるようにしましょう。
* コンテンツの言語を明示的に指定する属性を提供し、画面の内側からテキストを正しく読み取ることができるようにしましょう。
* ユーザーがキーボードだけで、引っかからずにこのページ上のすべてのウィジェットに移動できるようにしましょう。（少なくともタブインとタブアウトはできるようにしてください。）

そして、それはほんの始まりに過ぎません。

### アクセシビリティのチャンピオンたち

1999 年以降、 W3C は Web Accessibility Initiative (WAI) という作業グループを運営しており、ガイドラインやサポート資料、国際的なリソースを通じてアクセシビリティを推進しています。

より詳しく
-----

以下を参照して下さい。

* アクセシビリティの関するウィキペディアの記事
* WAI (W3C のウェブアクセシビリティイニシアティブ)
次のステップ
------

アクセシビリティは、ウェブサイトのデザインと技術的な構造の両方に影響を与える可能性があります。

* 私たちはデザインの観点から、すべてのタイプのユーザーのためのデザインについて学ぶことを提案します。
* もし、技術的な側面の興味を持っているなら、ウェブページにおける埋め込み画像の方法を勉強することができます。
Google App Engine を使ってウェブサイトを公開するには？
====================================

Google App Engine は、Google のインフラストラクチャ上でアプリケーションを構築して実行できる強力なプラットフォームです。ゼロから多階層のウェブ アプリケーションを構築する場合でも、静的なウェブサイトをホストする場合でも、必要なアプリケーションを構築することができます。ここでは、 Google App Engine でウェブサイトをホスティングするためのステップバイステップガイドを紹介します。

Google Cloud Platform プロジェクトの作成
-------------------------------

Google のツールを自分のサイトやアプリに使用するには、Google Cloud Platform で新しいプロジェクトを作成する必要があります。そのためには、Google のアカウントを保有している必要があります。

1. Google Cloud Platform Console の App Engine dashboard に移動し、 *Create* ボタンを押します。
2. プロジェクトを作成したことがない場合は、メールによる更新情報を受け取るかどうかを選択し、利用規約に同意すれば、次に進むことができるはずです。
3. プロジェクト名を入力し、プロジェクト ID を編集してメモしておきます。このチュートリアルでは、以下の値を使用します。
    * プロジェクト名: *GAE Sample Site*
    * プロジェクト ID: *gaesamplesite*
4. *Create* ボタンをクリックして、プロジェクトを作成します。
アプリケーションの作成
-----------

Cloud Platform のプロジェクトには、それぞれ 1 つの App Engine アプリケーションを入れることができます。プロジェクトにアプリを用意しましょう。

1. 公開するには、サンプルアプリが必要です。使用するものがない場合は、このサンプルアプリをダウンロードし、展開してください。
2. サンプルアプリケーションの構造を見てみましょう。`website` フォルダーにはウェブサイトのコンテンツがあり、`app.yaml` はアプリケーションの設定ファイルです。
    * ウェブサイトのコンテンツは `website` フォルダーの中に入れなければならず、そのランディングページは `index.html` と名付けなければなりませんが、それ以外はどのような形でも構いません。
    * `app.yaml` ファイルは、静的ファイルへの URL の割り当て方法を App Engine に指示するための設定ファイルです。編集する必要はありません。
アプリケーションの公開
-----------

プロジェクトを作成し、サンプルアプリのファイルをまとめて返されましたので、アプリを公開しましょう。

1. Google Cloud Shell を起動します。
2. `sample-app` フォルダーをコードエディターの左ペインにドラッグ＆ドロップします。
3. コマンドラインで以下を実行し、プロジェクトを選択します。

```bash
gcloud config set project gaesamplesite
```

4. 続いて、以下のコマンドを実行して、アプリのディレクトリーに移動してください。

```bash
cd sample-app
```

5. これでアプリケーションの展開、つまり App Engine にアプリをアップロードする準備が整いました。

```bash
gcloud app deploy
```

6. アプリケーションを設置するリージョンを選ぶには、数字を入力 してください。
7. `Y`を入力して確定してください。
8. ブラウザーで *your-project-id*.appspot.com に移動し、オンライン上のウェブサイトを確認します。例: プロジェクト ID *gaesamplesite* の場合、 *gaesamplesite*.appspot.com に移動します。
関連情報
----

詳しくは、 Google App Engine Documentation を参照してください。
Express ウェブフレームワーク (Node.js/JavaScript)
=======================================

Express は、JavaScript で書かれ、Node.js 実行環境内でホストされている、人気の指図しないウェブフレームワークです。このモジュールでは、このフレームワークの主な利点、開発環境の設定方法、一般的なウェブ開発と配置作業の実行方法について説明します。

前提条件
----

このモジュールを始める前に、サーバーサイドのウェブプログラミングとウェブフレームワークが何かを理解する必要があります。理想的なのはサーバーサイドのウェブサイトプログラミングの第一歩モジュールのトピックを読むことです。プログラミングの概念と JavaScript の一般的な知識があることを強くお勧めしますが、中核となる概念を理解するために不可欠ではありません。

**メモ:** このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。JavaScript、JavaScript ガイド、JavaScript の基本、JavaScript(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための追加の API を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。

このガイドは Node.js と Express を使った作業についての情報を提供します。インターネットや本には他にもたくさんの優れたリソースがあります。これらのうち一部は How do I get started with Node.js (StackOverflow) と What are the best resources for learning Node.js? (Quora) からリンクされています。

ガイド
---

Express/Node の入門

この最初の Express 記事では、"Node とは何ですか？"、"Express とは何ですか？" という質問に答えます。Express ウェブフレームワークが特別になった理由の概要を説明します。主な機能の概要を説明し、Express アプリケーションの主な構成要素をいくつか紹介します (ただし、現時点ではテスト用の開発環境はまだありません)。

Node (Express) 開発環境の設定

Express の目的がわかったので、Windows、Linux (Ubuntu)、および macOS 上で Node/Express 開発環境を設定およびテストする方法を説明します。この記事は、オペレーティングシステム共通の、Express アプリの開発を始めるために必要なものを提供します。

Express チュートリアル: 地域図書館のウェブサイト

私たちの実用的なチュートリアルシリーズの最初の記事はあなたが何を学ぶかについて説明して、それを通して研究し、そしてその後の記事で進化するであろう "地域図書館" の例のウェブサイトの概要を提供します。

Express チュートリアル Part 2: スケルトンウェブサイトの作成

この記事ではどのようにして "スケルトン"ウェブサイトプロジェクトを作成し、その後サイト固有のルート、テンプレート/ビュー、およびデータベースを追加するかを説明します。

Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)

この記事では、Node/Express 用のデータベースについて簡単に紹介します。続いて、Mongoose を使用して「地域図書館」ウェブサイトへのデータベースアクセスを提供する方法を説明します。オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法のいくつかについても簡単に説明します。

Express チュートリアル Part 4: ルートとコントローラー (en-US)

このチュートリアルでは、「地域図書館」ウェブサイトで最終的に必要なすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成したら、次の記事で実際のハンドラ関数を使って拡張できるように、ルート処理コードのためのモジュール構造を作ります。Express を使用してモジュラールートを作成する方法についても、非常によく理解できるでしょう。

Express チュートリアル Part 5: ライブラリデータの表示

これで、「地域図書館」のウェブサイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したりテンプレートを使用したりする実際的な経験を積むことになります。

Express チュートリアル Part 6: フォームの操作

このチュートリアルでは Pug を使用して Express で HTML フォームを操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。

Express チュートリアル Part 7: プロダクションへのデプロイ (en-US)

これで素晴らしい「地域図書館」ウェブサイトを作成したので、それを公共のウェブサーバーにインストールして、図書館のスタッフとメンバーがインターネットを介してアクセスできるようにします。この記事では、ウェブサイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。

チュートリアルを追加する
------------

既存のチュートリアル記事は以上となります。あなたがそれを拡張したいならば、カバーする他の興味深いトピックは以下の通りです。

* セッションの使用
* ユーザー認証
* ユーザーの認可と権限
* Express ウェブアプリケーションをテストする
* Express ウェブアプリケーションのウェブセキュリティ

そしてもちろん、評価作業を行うのは素晴らしいことです。
サーバサイドの Web サイトプログラミングの第一歩
==========================

このモジュールでは、サーバーサイドプログラミングに関するいくつかの基本的な質問、"これは何？"、"クライアントサイドプログラミングとどう違うの？"、"なぜ便利なの？" について答えます。次に、最も人気のあるサーバーサイドの ウェブフレームワークの概要と、最初のサイトを作成するための最適なフレームワークの選択方法に関するガイダンスを提供します。最後に、ウェブサーバーのセキュリティに関する高度な入門記事を提供します。

前提条件
----

このモジュールを開始する前に、サーバーサイドのウェブサイトプログラミングやその他のプログラミングの知識は必要ありません。

しかしながら、"ウェブがどのように動作するか" を理解する必要があります。まず以下のトピックスを読むことをお勧めします:

* ウェブサーバーとは
* ウェブサイトをビルドするために必要なソフトウェアは？
* ウェブサーバーにファイルをアップロードするには？

基本的な事を理解できれば、このセクションを読み進む準備が整います。

ガイド
---

サーバーサイドの概要

MDN のサーバーサイドプログラミング入門コースにようこそ！この最初の記事では、「それはどんなもの？」、「クライアントサイドプログラミングとはどう違う？」、「なぜ便利なの？」 という質問に答えながら、ハイレベルな視点からサーバーサイドプログラミングを見ていきます。この記事を読めば、サーバーサイドコーディングを行うことで、 ウェブサイトにどんな機能を加えることができるか、理解できるようになります。

クライアント-サーバーの概要

サーバーサイドプログラミングの目的と潜在的な利点を知ったので、サーバーがブラウザーから "動的リクエスト" を受け取ったときに起こることを詳細に検討します。ほとんどのウェブサイトのサーバーサイドコードは同様の方法でリクエストとレスポンスを処理するので、これは自身のコードの大部分を書くときに何が必要かを理解するのに役立ちます

サーバーサイドウェブフレームワーク

前の記事では、ウェブクライアントとサーバー間の通信、HTTP リクエストとレスポンスの性質、およびウェブブラウザーからのリクエストにレスポンスするためにサーバーサイドウェブアプリケーションが実行する必要があることについて説明しました。この知識をもとに、ウェブフレームワークがどのようにこれらのタスクを単純化できるかを探り、最初のサーバーサイドウェブアプリケーションのためのフレームワークをどのように選択するかを考えてみましょう。

ウェブサイトのセキュリティ

ウェブサイトのセキュリティでは、ウェブサイトのデザインと使用方法のあらゆる面で警戒が必要です。この入門記事ではウェブサイトのセキュリティの第一人者にはなりませんが、脅威がどこから発生するのか、そして最も一般的な攻撃に対して Web アプリケーションを強化するために何ができるのかを理解するのに役立ちます。

課題
--

コードをまだ説明していないため、この "概要" モジュールでは課題はありません。サーバーサイドプログラミングを使用して提供できる機能の種類が何かをよく理解していることを期待しています。また、初めてのウェブサイトを作成するために使用するサーバーサイドの ウェブフレームワークについて決断していることを望みます。
Express チュートリアル: 地域図書館の Web サイト
===============================

* 前のページ
* Overview: Express Nodejs
* 次のページ

実用的なチュートリアルシリーズの最初の記事では、これから学ぶことについて説明します。そして、私たちがこれから取り組んでいき、その後の記事で進化していく「地域図書館」のサンプルウェブサイトの概要を説明します。

| 前提条件: | Express のイントロダクションを読んでください。以下の記事では、Node 開発環境を設定する必要もあります。 |
| --- | --- |
| 目標: | このチュートリアルで使用されているサンプルアプリケーションを紹介し、どのトピックがカバーされるのかを読者が理解できるようにします。 |

概要
--

MDN "Local Library" Express (Node) チュートリアルへようこそ。このチュートリアルでは、地域図書館の目録を管理するために使用される可能性があるウェブサイトを開発します。

この一連のチュートリアル記事では、次のことを行います。

* Express Application Generator ツールを使用して、スケルトンウェブサイトとアプリケーションを作成します。
* Node ウェブサーバーを起動および停止します。
* データベースを使用してアプリケーションのデータを保存します。
* さまざまな情報を要求するためのルートを作成し、ブラウザーに表示するデータを HTML としてレンダリングするためのテンプレート ("ビュー" )を作成します
* フォームを操作します。
* アプリケーションを運用環境にデプロイします。

あなたはすでにこれらのトピックのいくつかについて学び、他のものについても簡単に触れました。チュートリアルシリーズの最後までに、簡単な Express アプリケーションを自分で開発するのに十分な知識があるはずです。

LocalLibrary ウェブサイト
-------------------

*LocalLibrary* は、この一連のチュートリアルの過程で作成および進化するウェブサイトの名前です。ご想像のとおり、この ウェブサイトの目的は利用できる書籍を閲覧したり自分のアカウントを管理したりできる、地元の小さな図書館用のオンライン目録を提供することです。

この例は慎重に選択されています。必要なだけ詳細を表示することも、ほとんどすべての Express 機能を見せるために使用することもできるためです。さらに重要なことに、それはどんなウェブサイトでも必要とする機能性への*ガイド付きの*道筋を提供することができます：

* 最初のいくつかのチュートリアル記事では、図書館のメンバーがどの本が利用できるかを調べるために使用できる簡単な*ブラウズ専用*ライブラリを定義します。これにより、ほぼすべての ウェブサイトに共通の操作、つまりデータベースからのコンテンツの読み取りと表示を探ることができます。
* 先へ進むにつれて、図書館の例は自然に拡張され、より高度な ウェブサイト機能を実演します。たとえば、新しい本を作成できるようにライブラリを拡張し、これを使用してフォームの使用方法を示し、ユーザ認証をサポートすることができます。

これは非常に拡張可能な例ですが、***Local**Library* と呼ばれる理由があります。私たちは Express をすぐに使い始めるための最小限の情報を示すことを望んでいます。その結果、私たちは本に関する情報、本のコピー、作者、その他の重要な情報を保存します。ただし、図書館が貸し出す可能性のある他のアイテムに関する情報を保存したり、複数の図書館サイトやその他の "大きな図書館" 機能をサポートするために必要なインフラストラクチャを提供することはしません。

私は立ち往生しています、どこでソースを入手できますか？
---------------------------

チュートリアルを進めていくうちに、適切なコードスニペットを各ポイントにコピーして貼り付けることができます。また、他のコードも (ある程度の手引きを付けて) 自身で拡張することを望んでいます。

すべてのコードスニペットをコピーして貼り付けるのではなく、それらを入力してみてください。次回同様のコードを書くときに、コードに慣れ親しんでいることになるので、長期的に役に立ちます。

あなたが立ち往生したならば、Github のここで ウェブサイトの完全に開発されたバージョンを見つけることができます。

**メモ:** この文書でテストされた Node、Express、および他のモジュールの特定のバージョンは、プロジェクト package.json にリストされています。

まとめ
---

*LocalLIbrary* ウェブサイトと、これから学ぶことについて少し知りました。今度は私たちの例を含むスケルトンプロジェクトの作成を開始します。

* 前のページ
* Overview: Express Nodejs
* 次のページ
Express チュートリアル Part 5: ライブラリデータの表示
===================================

* 前のページ  (en-US)
* Overview: Express Nodejs
* 次のページ

これで地域図書館の Web サイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したり、テンプレートを使用したりする際の実際的な経験を積むことになります。

| 前提条件: | 以前のチュートリアルのトピック (Express チュートリアル Part 4: ルートとコントローラ (en-US)を含む) を完了してください。 |
| --- | --- |
| 目標: | async モジュールと Pug テンプレート言語の使い方、そしてコントローラ関数の URL からデータを取得する方法を理解すること。 |

概要
--

前回のチュートリアル記事では、データベースとやり取りするために使用できる Mongoose モデルを定義し、いくつかの初期ライブラリレコードを作成しました。その後、LocalLibrary Web サイトに必要なすべてのルートを作成しました (en-US)が、"ダミーコントローラ" 関数 (ページにアクセスすると "未実装" のメッセージを返すだけのスケルトンコントローラ関数) を使用しました。

次のステップは、私たちの図書館情報を表示するページに適切な実装をすることです (後の記事で情報を作成、更新、または削除するフォームを特徴とする実装ページを見ます)。これには、モデルを使用してレコードを取得するためのコントローラ機能の更新、およびこの情報をユーザに表示するためのテンプレートの定義が含まれます。

はじめに、コントローラ関数で非同期操作を管理する方法と Pug を使用してテンプレートを作成する方法を説明する概要/入門トピックを提供します。それから、主要な "読み取り専用" ページのそれぞれに、それらが使用する特別な機能や新しい機能についての簡単な説明を付けて実装を提供します。

この記事が終わるときには、ルート、非同期関数、ビュー、およびモデルが実際にどのように機能するのかについてのエンドツーエンドの理解が十分にあるはずです。

ライブラリデータチュートリアルサブ記事の表示
----------------------

次のサブ記事では、必要な Web サイトページを表示するために必要なさまざまな機能を追加するプロセスについて説明します。次のものに進む前に、順番にこれらのそれぞれを読み、作業する必要があります。

1. async を使用した非同期フロー制御
2. テンプレートプライマー (en-US)
3. LocalLibrary 基本テンプレート
4. ホームページ (en-US)
5. ブックリストページ (en-US)
6. ブックインスタンスリストページ (en-US)
7. moment を使用した日付のフォーマット (en-US)
8. 著者リストページとジャンルリストページのチャレンジ (en-US)
9. ジャンル詳細ページ (en-US)
10. 本の詳細ページ (en-US)
11. 著者詳細ページ
12. ブックインスタンス詳細ページとチャレンジ (en-US)
まとめ
---

これで、サイトのすべての "読み取り専用" ページを作成しました。各モデルのインスタンスの数を表示するホームページ、および書籍、書籍のインスタンス、作家、ジャンルのリストと詳細ページです。その過程でコントローラ、非同期操作を使用したときのフロー制御の管理、Pug を使用したビューの作成、モデルを使用したデータベースの照会、ビューからテンプレートへの情報の受け渡し方法などについて多くの基礎知識を得て、そしてテンプレートを作成および拡張しました。チャレンジを完了した人たちはまた、moment を使った日付処理について少し学んだことでしょう。

次回の記事では、サイトに格納されているデータの変更を開始するための HTML フォームとフォーム処理コードを作成して、私たちの知識に基づいて構築します。

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

* Async module (Async ドキュメント)
* Using Template engines with Express (Express ドキュメント)
* Pug (Pug ドキュメント)
* Moment (Moment ドキュメント)
* 前のページ  (en-US)
* Overview: Express Nodejs
* 次のページ