Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 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/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 />
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
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標準の機能を用いてデバッグを行えます。

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>が発行されてしまうため非効率的です。
Copy link
Copy Markdown
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
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 />
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
Copy Markdown
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
Copy Markdown
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
2 changes: 1 addition & 1 deletion docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_position: 0

## ut.code(); Learnへようこそ!

ut.code(); Learnは、大きく4つの部に分かれています。また、これらを学習した方に向けた参考資料もあります。
ut.code(); Learnは、大きく4つの章に分かれています。また、これらを学習した方に向けた参考資料もあります。

## 学習教材

Expand Down