diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx index 6ab73f3dd..44f7b11f6 100644 --- a/docs/1-trial-session/06-variables/index.mdx +++ b/docs/1-trial-session/06-variables/index.mdx @@ -22,7 +22,7 @@ document.write(myName); 2行目では、変数`myName`が評価され、代入されていた文字列値`"John Doe"`が画面に表示されます。 {/* prettier-ignore */} -変数を宣言するキーワードには、`let`以外にも`const`があります。記法自体は`let`と同様ですが、少し違いがあります。違いについては、次の節で説明します。 +変数を宣言するキーワードには、`let`以外にも`const`があります。記法自体は`let`と同様ですが、少し違いがあります。違いについては、次の項で説明します。 ```javascript title="script.js" const myName = "John Doe"; diff --git a/docs/1-trial-session/11-array/index.mdx b/docs/1-trial-session/11-array/index.mdx index e6dd24f84..29594e193 100644 --- a/docs/1-trial-session/11-array/index.mdx +++ b/docs/1-trial-session/11-array/index.mdx @@ -76,7 +76,7 @@ for (変数の宣言/変数名 of 配列) { ## 配列の便利な機能 -JavaScriptの配列には、便利な変数や関数のようなものが定義されています。正確には[オブジェクト](/docs/trial-session/object)と[クラス](/docs/browser-apps/class)の回でそれぞれ扱うプロパティ、メソッドというものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。 +JavaScriptの配列には、便利な変数や関数のようなものが定義されています。正確には[「オブジェクト」の節](/docs/trial-session/object)と[「クラス」の節](/docs/browser-apps/class)でそれぞれ扱うプロパティ、メソッドというものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。 ### `配列.length` diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx index 4bebcc7ef..74d6bacaf 100644 --- a/docs/1-trial-session/14-events/index.mdx +++ b/docs/1-trial-session/14-events/index.mdx @@ -84,7 +84,7 @@ greetButton.onclick = clicked(); `document.write`関数を使うと、画面上にあったボタンが消えてしまいます。また、文字色や文字サイズを変えることも困難です。 -`document.write`関数の代わりに、先ほどのDOMの章で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう。 +`document.write`関数の代わりに、先ほどの[「DOM」の節](/docs/trial-session/dom/)で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう。 ::: diff --git a/docs/1-trial-session/index.mdx b/docs/1-trial-session/index.mdx index 1b67b8978..ec9454ba0 100644 --- a/docs/1-trial-session/index.mdx +++ b/docs/1-trial-session/index.mdx @@ -4,6 +4,6 @@ title: Webプログラミングの基礎を学ぼう import DocCardList from "@theme/DocCardList"; -この部では、HTML、CSS、JavaScriptの基礎を学び、簡単なウェブアプリケーションを作ってみます。 +この章では、HTML、CSS、JavaScriptの基礎を学び、簡単なウェブアプリケーションを作ってみます。 diff --git a/docs/2-browser-apps/02-reference/index.mdx b/docs/2-browser-apps/02-reference/index.mdx index 326d0e521..f64c67044 100644 --- a/docs/2-browser-apps/02-reference/index.mdx +++ b/docs/2-browser-apps/02-reference/index.mdx @@ -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) diff --git a/docs/2-browser-apps/03-class/index.mdx b/docs/2-browser-apps/03-class/index.mdx index 3bd7a3dcc..281fdd23a 100644 --- a/docs/2-browser-apps/03-class/index.mdx +++ b/docs/2-browser-apps/03-class/index.mdx @@ -13,7 +13,7 @@ const tanaka = { }; ``` -同じ属性を持つオブジェクトを複数生成するときに役立つのが**クラス**です。クラスでは、オブジェクトのプロパティを予め設定しておくだけでなく、下のメソッドの節で説明するように、プロパティを引数にもつような関数も設定しておくことができます。これにより、同じコードを何度も書く必要がなくなるというメリットがあります。クラスは、同じプロパティを持つオブジェクトを統一的に扱うための仕組みであり、オブジェクトの設計図と言えます。 +同じ属性を持つオブジェクトを複数生成するときに役立つのが**クラス**です。クラスでは、オブジェクトのプロパティを予め設定しておくだけでなく、下のメソッドの項で説明するように、プロパティを引数にもつような関数も設定しておくことができます。これにより、同じコードを何度も書く必要がなくなるというメリットがあります。クラスは、同じプロパティを持つオブジェクトを統一的に扱うための仕組みであり、オブジェクトの設計図と言えます。 次のコードでは、先ほど作った`tanaka`のように`name`や`age`というプロパティを持つオブジェクトの設計図として、クラス`Student`を定義しています。クラスでは、この例の`age`プロパティのように、デフォルトの値を設定することができます。 @@ -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`クラス] diff --git a/docs/2-browser-apps/04-anonymous-function/index.mdx b/docs/2-browser-apps/04-anonymous-function/index.mdx index 20681615b..436ddd500 100644 --- a/docs/2-browser-apps/04-anonymous-function/index.mdx +++ b/docs/2-browser-apps/04-anonymous-function/index.mdx @@ -4,7 +4,7 @@ title: 無名関数 ## 無名関数 -[イベント](/docs/trial-session/events/)の節で、関数も値の一種であることを説明しました。このため、関数は変数やプロパティに代入したり、関数の引数や戻り値になったりできます。 +[「イベント」の節](/docs/trial-session/events/)で、関数も値の一種であることを説明しました。このため、関数は変数やプロパティに代入したり、関数の引数や戻り値になったりできます。 しかしながら、通常の記法で関数を記述することが煩わしい場合があります。イベントハンドラを登録する場合を考えてみましょう。 diff --git a/docs/2-browser-apps/06-project/index.mdx b/docs/2-browser-apps/06-project/index.mdx index f4d1d901c..1e0df9a99 100644 --- a/docs/2-browser-apps/06-project/index.mdx +++ b/docs/2-browser-apps/06-project/index.mdx @@ -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"); diff --git a/docs/3-web-servers/03-node-js/index.mdx b/docs/3-web-servers/03-node-js/index.mdx index ec3196f42..9e3383184 100644 --- a/docs/3-web-servers/03-node-js/index.mdx +++ b/docs/3-web-servers/03-node-js/index.mdx @@ -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上にプロジェクトフォルダを作る] @@ -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`タブに出力されるので注意しましょう。 diff --git a/docs/3-web-servers/05-server/index.mdx b/docs/3-web-servers/05-server/index.mdx index 969b22180..6d7e7b1d8 100644 --- a/docs/3-web-servers/05-server/index.mdx +++ b/docs/3-web-servers/05-server/index.mdx @@ -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では、通常インターネットを介してデータをやり取りするためです。 インターネットを人間が直接利用することはできないので、何らかのコンピューターを使用しなければなりません。 このとき、 diff --git a/docs/3-web-servers/07-fetch-api-post/index.mdx b/docs/3-web-servers/07-fetch-api-post/index.mdx index d7c8cce02..32874c36b 100644 --- a/docs/3-web-servers/07-fetch-api-post/index.mdx +++ b/docs/3-web-servers/07-fetch-api-post/index.mdx @@ -10,7 +10,7 @@ Fetch APIを用いると、サーバーからデータを取得するだけで ## HTTPリクエストとレスポンスの構造 -[Expressによるサーバー構築](../server/)の節では、クライアントからサーバーへの要求をリクエストと呼び、その応答をレスポンスと呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。 +[「Expressによるサーバー構築」の節](/docs/web-servers/server/)では、クライアントからサーバーへの要求をリクエストと呼び、その応答をレスポンスと呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。 - **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、**メソッド**と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、**ステータスコード**と呼ばれる、リクエストの結果を示すコードが含まれます。 - **ヘッダー**: リクエストやレスポンスに関する追加情報を含む部分。名前と値のペアで構成され、リクエストやレスポンスの内容をより詳細に説明します。 diff --git a/docs/3-web-servers/10-git-github-init/index.mdx b/docs/3-web-servers/10-git-github-init/index.mdx index 79ab9f8de..4abeebe81 100644 --- a/docs/3-web-servers/10-git-github-init/index.mdx +++ b/docs/3-web-servers/10-git-github-init/index.mdx @@ -149,7 +149,7 @@ ssh-ed25519 AAAAC3...GW/Gp user@computer ## 確認 -ここまででGitとGitHubのセットアップが完了しました。この章で行ってきたセットアップが正しくできているのかは次のようにして確認することができます。 +ここまででGitとGitHubのセットアップが完了しました。この節で行ってきたセットアップが正しくできているのかは次のようにして確認することができます。 ### Gitの初期設定の確認 diff --git a/docs/3-web-servers/13-deploy-on-render/index.mdx b/docs/3-web-servers/13-deploy-on-render/index.mdx index 361a3ffea..b1b19b216 100644 --- a/docs/3-web-servers/13-deploy-on-render/index.mdx +++ b/docs/3-web-servers/13-deploy-on-render/index.mdx @@ -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を用いたアプリケーションをデプロイする方法を学びましょう。 +[Render](https://render.com/)は、近年サービスを開始したPaaSで、GitHubなどと連携し、Webアプリケーションを簡単に公開できるサービスです。[「データベース」の節](/docs/web-servers/database/)の演習問題で作成したアプリケーションをデプロイし、Renderを用いてNode.jsやPostgreSQLを用いたアプリケーションをデプロイする方法を学びましょう。 ## Renderへの登録 diff --git a/docs/4-advanced/02-bundler/index.mdx b/docs/4-advanced/02-bundler/index.mdx index 3644df12f..5b20b709c 100644 --- a/docs/4-advanced/02-bundler/index.mdx +++ b/docs/4-advanced/02-bundler/index.mdx @@ -20,11 +20,11 @@ JavaScriptは、当初はWebサイトに簡易的な動きを追加させるた ひとつは、**最新の機能を使用するため**です。JavaScriptの言語仕様は、[Ecma International](https://www.ecma-international.org/)の[TC39](https://tc39.es/)によって作成されていますが、新しく策定された仕様は、まだブラウザなどによって実装されていない場合があります。[Babel](https://babeljs.io/)は、そういった最新の言語仕様に沿って書かれたプログラムを変換し、古い仕様の範囲内で解釈できるプログラムに変換するための、最も有名なトランスパイラです。 -もうひとつは、**別の言語で書かれたプログラムをJavaScriptに変換するため**です。次の章で扱うTypeScriptは、トランスパイラを用いてJavaScriptに変換されます。 +もうひとつは、**別の言語で書かれたプログラムをJavaScriptに変換するため**です。次の節で扱うTypeScriptは、トランスパイラを用いてJavaScriptに変換されます。 ### モジュールバンドラ -通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためには`script`タグを並べれば良いですが、[HTTPサーバー](/docs/web-servers/server/)の節で学んだように、`script`タグの数だけHTTPリクエストが発行されてしまうため非効率的です。 +通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためには`script`タグを並べれば良いですが、[「Expressによるサーバー構築」の節](/docs/web-servers/server/)で学んだように、`script`タグの数だけHTTPリクエストが発行されてしまうため非効率的です。 [webpack](https://webpack.js.org)のような**モジュールバンドラ**を用いることで、複数のJavaScriptファイルを統合できます。 diff --git a/docs/4-advanced/04-react/index.mdx b/docs/4-advanced/04-react/index.mdx index 22775c416..b6b9cc39e 100644 --- a/docs/4-advanced/04-react/index.mdx +++ b/docs/4-advanced/04-react/index.mdx @@ -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 = () => { diff --git a/docs/4-advanced/index.mdx b/docs/4-advanced/index.mdx index 5240453c6..80fb22d5f 100644 --- a/docs/4-advanced/index.mdx +++ b/docs/4-advanced/index.mdx @@ -4,6 +4,6 @@ title: 現代のアプリを支える技術を学ぼう（発展） import DocCardList from "@theme/DocCardList"; -これまでのカリキュラムで、ウェブアプリケーションが動作する基本的な仕組みを学んできました。この部では、複雑化する現代のアプリケーションを構築するためによく用いられる技術について学びます。 +これまでのカリキュラムで、ウェブアプリケーションが動作する基本的な仕組みを学んできました。この章では、複雑化する現代のアプリケーションを構築するためによく用いられる技術について学びます。 diff --git a/docs/5-team-development/01-git-workflow/index.mdx b/docs/5-team-development/01-git-workflow/index.mdx index ab5df0057..50dd6d008 100644 --- a/docs/5-team-development/01-git-workflow/index.mdx +++ b/docs/5-team-development/01-git-workflow/index.mdx @@ -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が割り当てられます。 - すべてのファイルやディレクトリの名前 - コミットの作成者の名前やメールアドレス @@ -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の動作を確認しておきましょう。 `git push origin master` コマンドは、ローカルリポジトリの `master` ブランチが指し示すコミットを、リモートリポジトリの `master` ブランチが指し示すコミットとして設定するためのコマンドです。次の図は、ローカルリポジトリの `master` ブランチがコミット `2ce3d099` を指している状態で、空のリモートリポジトリ `origin` に対して `git push origin master` を実行した際の様子を表しています。 diff --git a/docs/index.mdx b/docs/index.mdx index 230049a6b..a8a41367d 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -5,7 +5,7 @@ sidebar_position: 0 ## ut.code(); Learnへようこそ！ -ut.code(); Learnは、大きく4つの部に分かれています。また、これらを学習した方に向けた参考資料もあります。 +ut.code(); Learnは、大きく4つの章に分かれています。また、これらを学習した方に向けた参考資料もあります。 ## 学習教材