Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/1-trial-session/06-variables/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ document.write(myName);
2行目では、<Term>変数</Term>`myName`が<Term>評価</Term>され、<Term>代入</Term>されていた<Term>文字列</Term><Term>値</Term>`"John Doe"`が画面に表示されます。

{/* prettier-ignore */}
<Term>変数</Term>を<Term>宣言</Term>するキーワードには、`let`以外にも`const`があります。記法自体は`let`と同様ですが、少し違いがあります。違いについては、次の節で説明します
<Term>変数</Term>を<Term>宣言</Term>するキーワードには、`let`以外にも`const`があります。記法自体は`let`と同様ですが、少し違いがあります。違いについては、次の項で説明します

```javascript title="script.js"
const myName = "John Doe";
Expand Down
2 changes: 1 addition & 1 deletion docs/1-trial-session/11-array/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ for (変数の宣言/変数名 of 配列) {

## 配列の便利な機能

JavaScriptの配列には、便利な変数や関数のようなものが定義されています。正確には[オブジェクト](/docs/trial-session/object)と[クラス](/docs/browser-apps/class)の回でそれぞれ扱う<Term>プロパティ</Term>、<Term>メソッド</Term>というものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。
JavaScriptの配列には、便利な変数や関数のようなものが定義されています。正確には[オブジェクト」の節](/docs/trial-session/object)と[クラス」の節](/docs/browser-apps/class)でそれぞれ扱う<Term>プロパティ</Term>、<Term>メソッド</Term>というものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。

### `配列.length`

Expand Down
2 changes: 1 addition & 1 deletion docs/1-trial-session/14-events/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ greetButton.onclick = clicked();

`document.write`関数を使うと、画面上にあったボタンが消えてしまいます。また、文字色や文字サイズを変えることも困難です。

`document.write`関数の代わりに、先ほどのDOMの章で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう
`document.write`関数の代わりに、先ほどの[「DOM」の節](/docs/trial-session/dom/)で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう

:::

Expand Down
2 changes: 1 addition & 1 deletion docs/1-trial-session/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ title: Webプログラミングの基礎を学ぼう

import DocCardList from "@theme/DocCardList";

この部では、HTML、CSS、JavaScriptの基礎を学び、簡単なウェブアプリケーションを作ってみます。
この章では、HTML、CSS、JavaScriptの基礎を学び、簡単なウェブアプリケーションを作ってみます。

<DocCardList />
2 changes: 1 addition & 1 deletion docs/2-browser-apps/02-reference/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: オブジェクトの参照

## 参照

[オブジェクト](/docs/trial-session/object/)で扱ったように、JavaScriptの値はオブジェクトとプリミティブに分けられます。前回は、プリミティブを「それ以上分解できない値」のように説明しました。もう少し詳しくみてみましょう。
[オブジェクト」の節](/docs/trial-session/object/)で扱ったように、JavaScriptの値はオブジェクトとプリミティブに分けられます。前回は、プリミティブを「それ以上分解できない値」のように説明しました。もう少し詳しくみてみましょう。

![オブジェクトとプリミティブ](../../1-trial-session/12-object/value-types-with-object.drawio.svg)

Expand Down
4 changes: 2 additions & 2 deletions docs/2-browser-apps/03-class/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const tanaka = {
};
```

同じ属性を持つ<Term>オブジェクト</Term>を複数生成するときに役立つのが<Term>**クラス**</Term>です。<Term>クラス</Term>では、<Term>オブジェクト</Term>の<Term>プロパティ</Term>を予め設定しておくだけでなく、下の<Term>メソッド</Term>の節で説明するように、<Term>プロパティ</Term>を引数にもつような関数も設定しておくことができます。これにより、同じコードを何度も書く必要がなくなるというメリットがあります。<Term>クラス</Term>は、同じ<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>を統一的に扱うための仕組みであり、<Term>オブジェクト</Term>の設計図と言えます。
同じ属性を持つ<Term>オブジェクト</Term>を複数生成するときに役立つのが<Term>**クラス**</Term>です。<Term>クラス</Term>では、<Term>オブジェクト</Term>の<Term>プロパティ</Term>を予め設定しておくだけでなく、下の<Term>メソッド</Term>の項で説明するように、<Term>プロパティ</Term>を引数にもつような関数も設定しておくことができます。これにより、同じコードを何度も書く必要がなくなるというメリットがあります。<Term>クラス</Term>は、同じ<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>を統一的に扱うための仕組みであり、<Term>オブジェクト</Term>の設計図と言えます。

次のコードでは、先ほど作った`tanaka`のように`name`や`age`という<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>の設計図として、<Term>クラス</Term>`Student`を定義しています。<Term>クラス</Term>では、この例の`age`<Term>プロパティ</Term>のように、デフォルトの値を設定することができます。

Expand Down Expand Up @@ -359,7 +359,7 @@ document.write(myBirthDay.getFullYear()); // 2014

![HTMLDivElementの継承関係](./html-inheritance.drawio.svg)

実は、[DOMの節](/docs/trial-session/dom/)で使用したtextContentプロパティは、このNodeクラスで定義されています。
実は、[「DOM」の節](/docs/trial-session/dom/)で使用したtextContentプロパティは、このNodeクラスで定義されています。

:::tip[`Object`クラス]

Expand Down
2 changes: 1 addition & 1 deletion docs/2-browser-apps/04-anonymous-function/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: 無名関数

## 無名関数

[イベント](/docs/trial-session/events/)の節で、関数も値の一種であることを説明しました。このため、関数は変数やプロパティに代入したり、関数の引数や戻り値になったりできます。
[イベント」の節](/docs/trial-session/events/)、関数も値の一種であることを説明しました。このため、関数は変数やプロパティに代入したり、関数の引数や戻り値になったりできます。

しかしながら、通常の記法で関数を記述することが煩わしい場合があります。イベントハンドラを登録する場合を考えてみましょう。

Expand Down
2 changes: 1 addition & 1 deletion docs/2-browser-apps/06-project/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ addButton.onclick = () => {
};
```

このとき、箇条書きの項目として新たに`li`要素を追加する必要があります。DOMの章で扱ったように、`document.createElement`関数を使うと新しい要素を作成できます。また、`Node#appendChild`メソッドを用いることで既存の要素内に子要素を追加することができます。
このとき、箇条書きの項目として新たに`li`要素を追加する必要があります。[「DOM」の節](/docs/trial-session/dom/)で扱ったように、`document.createElement`関数を使うと新しい要素を作成できます。また、`Node#appendChild`メソッドを用いることで既存の要素内に子要素を追加することができます。

```javascript
const li = document.createElement("li");
Expand Down
4 changes: 2 additions & 2 deletions docs/3-web-servers/03-node-js/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ v22.15.0

## Node.jsでHello World

まずは、新しいフォルダを作成し、Visual Studio Codeで開きます。macOSの場合は[はじめてのWeb開発](/docs/trial-session/get-started/)で作成した`projects`フォルダの中に別のフォルダを作れば問題ありませんが、Windowsの場合はWSL上にフォルダを作成します。
まずは、新しいフォルダを作成し、Visual Studio Codeで開きます。macOSの場合は[はじめてのWeb開発」の節](/docs/trial-session/get-started/)で作成した`projects`フォルダの中に別のフォルダを作れば問題ありませんが、Windowsの場合はWSL上にフォルダを作成します。

:::info[WSL上にプロジェクトフォルダを作る]

Expand All @@ -105,7 +105,7 @@ console.log("Hello World!");

## Node.jsのデバッグ

[ブラウザの開発者ツールを利用する](/docs/browser-apps/inspector/)節でJavaScriptのデバッグを行ったのと同様に、Node.jsでは、VS Code標準の機能を用いてデバッグを行えます。
[「ブラウザの開発者ツール」の節](/docs/browser-apps/inspector/)でJavaScriptのデバッグを行ったのと同様に、Node.jsでは、VS Code標準の機能を用いてデバッグを行えます。

Node.jsのデバッグを開始するには、ブレークポイント等を設定したうえで、`F5`キーを押します。初回はデバッグ構成を選択するメニューが出現するので、`Node.js`を選択しましょう。デバッグが開始されると、VS Code下部の青いバーが橙色に変化します。`console.log`は`DEBUG CONSOLE`タブに出力されるので注意しましょう。

Expand Down
2 changes: 1 addition & 1 deletion docs/3-web-servers/05-server/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import RequestResponseSlideShow from "./request-response-slide-show";

## ウェブサイトが動作する仕組み

[「Webプログラミングの基礎を学ぼう」](/docs/trial-session/)の章では、ウェブサイトを表示するためにHTMLファイルとJavaScriptファイルを作成し、ブラウザから開きました。しかし、一般的なウェブサイトを閲覧する際は、HTMLファイルやJavaScriptファイルの存在を意識することはありません。これは、Webでは、通常インターネットを介してデータをやり取りするためです。
[「Webプログラミングの基礎を学ぼう」の章](/docs/trial-session/)では、ウェブサイトを表示するためにHTMLファイルとJavaScriptファイルを作成し、ブラウザから開きました。しかし、一般的なウェブサイトを閲覧する際は、HTMLファイルやJavaScriptファイルの存在を意識することはありません。これは、Webでは、通常インターネットを介してデータをやり取りするためです。

インターネットを人間が直接利用することはできないので、何らかのコンピューターを使用しなければなりません。
このとき、
Expand Down
2 changes: 1 addition & 1 deletion docs/3-web-servers/07-fetch-api-post/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Fetch APIを用いると、サーバーからデータを取得するだけで

## HTTPリクエストとレスポンスの構造

[Expressによるサーバー構築](../server/)の節では、<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と呼び、その応答を<Term>レスポンス</Term>と呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。
[Expressによるサーバー構築」の節](/docs/web-servers/server/)では、<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と呼び、その応答を<Term>レスポンス</Term>と呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。

- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、<Term id="http-method">**メソッド**</Term>と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、<Term>**ステータスコード**</Term>と呼ばれる、リクエストの結果を示すコードが含まれます。
- **ヘッダー**: リクエストやレスポンスに関する追加情報を含む部分。名前と値のペアで構成され、リクエストやレスポンスの内容をより詳細に説明します。
Expand Down
2 changes: 1 addition & 1 deletion docs/3-web-servers/10-git-github-init/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ ssh-ed25519 AAAAC3...GW/Gp user@computer

## 確認

ここまででGitとGitHubのセットアップが完了しました。この章で行ってきたセットアップが正しくできているのかは次のようにして確認することができます
ここまででGitとGitHubのセットアップが完了しました。この節で行ってきたセットアップが正しくできているのかは次のようにして確認することができます

### Gitの初期設定の確認

Expand Down
2 changes: 1 addition & 1 deletion docs/3-web-servers/13-deploy-on-render/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import registerRenderVideo from "./register-render.mp4";

これまでは、Webアプリケーションを開発するにあたり、開発用の端末をサーバーとして利用してきました。しかし、開発したアプリケーションを実際のユーザーが使用できるようにするためには、インターネットに公開されたサーバーが必要です。サーバーの公開に際しては、通常複雑な設定や管理が必要になりますが、**PaaS** (Platform as a Service) と呼ばれるようなサービスを用いることで、その手間を大幅に簡略化することができます。

[Render](https://render.com/)は、近年サービスを開始したPaaSで、GitHubなどと連携し、Webアプリケーションを簡単に公開できるサービスです。[データベースの節](../database)の演習問題で作成したアプリケーションをデプロイし、Renderを用いてNode.jsやPostgreSQLを用いたアプリケーションを<Term>デプロイ</Term>する方法を学びましょう。
[Render](https://render.com/)は、近年サービスを開始したPaaSで、GitHubなどと連携し、Webアプリケーションを簡単に公開できるサービスです。[「データベース」の節](/docs/web-servers/database/)の演習問題で作成したアプリケーションをデプロイし、Renderを用いてNode.jsやPostgreSQLを用いたアプリケーションを<Term>デプロイ</Term>する方法を学びましょう。

## Renderへの登録

Expand Down
4 changes: 2 additions & 2 deletions docs/4-advanced/02-bundler/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ JavaScriptは、当初はWebサイトに簡易的な動きを追加させるた

ひとつは、**最新の機能を使用するため**です。JavaScriptの言語仕様は、[Ecma International](https://www.ecma-international.org/)の[TC39](https://tc39.es/)によって作成されていますが、新しく策定された仕様は、まだブラウザなどによって実装されていない場合があります。[Babel](https://babeljs.io/)は、そういった最新の言語仕様に沿って書かれたプログラムを変換し、古い仕様の範囲内で解釈できるプログラムに変換するための、最も有名な<Term>トランスパイラ</Term>です。

もうひとつは、**別の言語で書かれたプログラムをJavaScriptに変換するため**です。次の章で扱うTypeScriptは、トランスパイラを用いてJavaScriptに変換されます。
もうひとつは、**別の言語で書かれたプログラムをJavaScriptに変換するため**です。次の節で扱うTypeScriptは、トランスパイラを用いてJavaScriptに変換されます。

### <Term>モジュールバンドラ</Term>

通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためには`script`タグを並べれば良いですが、[HTTPサーバー](/docs/web-servers/server/)の節で学んだように、`script`タグの数だけ<Term>HTTPリクエスト</Term>が発行されてしまうため非効率的です。
通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためには`script`タグを並べれば良いですが、[「Expressによるサーバー構築」の節](/docs/web-servers/server/)で学んだように、`script`タグの数だけ<Term>HTTPリクエスト</Term>が発行されてしまうため非効率的です。

[webpack](https://webpack.js.org)のような<Term>**モジュールバンドラ**</Term>を用いることで、複数のJavaScriptファイルを統合できます。

Expand Down
2 changes: 1 addition & 1 deletion docs/4-advanced/04-react/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -746,7 +746,7 @@ export default function App() {

:::tip[Reactとイミュータビリティ]

[オブジェクトの参照](/docs/browser-apps/reference/)節で扱ったように、JavaScriptオブジェクトは参照として扱われます。Reactでは、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの`addTodo`関数と`removeTodo`関数は、次のように書き換えることはできません。これは、この方法ではReactが状態が変化したことを検知できないからです。
[オブジェクトの参照」の節](/docs/browser-apps/reference/)で扱ったように、JavaScriptオブジェクトは参照として扱われます。Reactでは、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの`addTodo`関数と`removeTodo`関数は、次のように書き換えることはできません。これは、この方法ではReactが状態が変化したことを検知できないからです。

```tsx
const addTodo = () => {
Expand Down
2 changes: 1 addition & 1 deletion docs/4-advanced/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ title: 現代のアプリを支える技術を学ぼう(発展)

import DocCardList from "@theme/DocCardList";

これまでのカリキュラムで、ウェブアプリケーションが動作する基本的な仕組みを学んできました。この部では、複雑化する現代のアプリケーションを構築するためによく用いられる技術について学びます。
これまでのカリキュラムで、ウェブアプリケーションが動作する基本的な仕組みを学んできました。この章では、複雑化する現代のアプリケーションを構築するためによく用いられる技術について学びます。

<DocCardList />
Loading