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/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/2-browser-apps/03-class/index.mdx
Original file line number Diff line number Diff line change
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
2 changes: 1 addition & 1 deletion docs/3-web-servers/03-node-js/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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標準の機能を用いてデバッグを行えます。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

タイトルが間違っていたため、ついでに修正しました。cf.

title: ブラウザの開発者ツール


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/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
2 changes: 1 addition & 1 deletion docs/4-advanced/02-bundler/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ JavaScriptは、当初はWebサイトに簡易的な動きを追加させるた

### <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>が発行されてしまうため非効率的です。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

タイトルが間違っていたため、ついでに修正しました。


[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
4 changes: 2 additions & 2 deletions docs/5-team-development/01-git-workflow/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import resolvePullRequestConflictVideo from "./resolve-pull-request-conflict.mp4

## コミットが記録される仕組み

Gitの節では、Gitのコミットに一意のIDが割り当てられることを説明しました。実は、**コミットIDは、次の情報から計算可能です**。つまり、次の情報が完全に一致しているのであれば、どのような環境でコミットを行なっても同じコミットIDが割り当てられます。逆に、次の情報のうち一つでも異なるものがあれば、全く違うコミットIDが割り当てられます。
[Gitを用いたバージョン管理](/docs/web-servers/git/)では、Gitのコミットに一意のIDが割り当てられることを説明しました。実は、**コミットIDは、次の情報から計算可能です**。つまり、次の情報が完全に一致しているのであれば、どのような環境でコミットを行なっても同じコミットIDが割り当てられます。逆に、次の情報のうち一つでも異なるものがあれば、全く違うコミットIDが割り当てられます。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同様


- すべてのファイルやディレクトリの名前
- コミットの作成者の名前やメールアドレス
Expand Down Expand Up @@ -134,7 +134,7 @@ HEADが `master` ブランチを指している状態で、コミットを行っ

## リモートブランチ

GitとGitHubの節では、自分のPCに置かれたリポジトリ (ローカルリポジトリ) とGitHub上のリポジトリ (リモートリポジトリ) を接続しました。`git push origin master` コマンドを行ったときのGitの動作を確認しておきましょう。
[GitとGitHubを用いた共同開発](/docs/web-servers/github/)では、自分のPCに置かれたリポジトリ (ローカルリポジトリ) とGitHub上のリポジトリ (リモートリポジトリ) を接続しました。`git push origin master` コマンドを行ったときのGitの動作を確認しておきましょう。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同様


`git push origin master` コマンドは、ローカルリポジトリの `master` ブランチが指し示すコミットを、リモートリポジトリの `master` ブランチが指し示すコミットとして設定するためのコマンドです。次の図は、ローカルリポジトリの `master` ブランチがコミット `2ce3d099` を指している状態で、空のリモートリポジトリ `origin` に対して `git push origin master` を実行した際の様子を表しています。

Expand Down