File tree Expand file tree Collapse file tree 11 files changed +12
-12
lines changed
1-trial-session/14-events
5-team-development/01-git-workflow Expand file tree Collapse file tree 11 files changed +12
-12
lines changed Original file line number Diff line number Diff line change @@ -84,7 +84,7 @@ greetButton.onclick = clicked();
8484
8585` document.write ` 関数を使うと、画面上にあったボタンが消えてしまいます。また、文字色や文字サイズを変えることも困難です。
8686
87- ` document.write ` 関数の代わりに、先ほどのDOMの節で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう 。
87+ ` document.write ` 関数の代わりに、先ほど [ DOM ] ( /docs/trial-session/dom/ ) で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう 。
8888
8989:::
9090
Original file line number Diff line number Diff line change @@ -359,7 +359,7 @@ document.write(myBirthDay.getFullYear()); // 2014
359359
360360![ HTMLDivElementの継承関係] ( ./html-inheritance.drawio.svg )
361361
362- 実は、[ DOMの節 ] ( /docs/trial-session/dom/ ) で使用したtextContentプロパティは、このNodeクラスで定義されています。
362+ 実は、[ DOM ] ( /docs/trial-session/dom/ ) で使用したtextContentプロパティは、このNodeクラスで定義されています。
363363
364364:::tip[ ` Object ` クラス]
365365
Original file line number Diff line number Diff line change @@ -4,7 +4,7 @@ title: 無名関数
44
55## 無名関数
66
7- [ イベント] ( /docs/trial-session/events/ ) の節で 、関数も値の一種であることを説明しました。このため、関数は変数やプロパティに代入したり、関数の引数や戻り値になったりできます。
7+ [ イベント] ( /docs/trial-session/events/ ) で 、関数も値の一種であることを説明しました。このため、関数は変数やプロパティに代入したり、関数の引数や戻り値になったりできます。
88
99しかしながら、通常の記法で関数を記述することが煩わしい場合があります。イベントハンドラを登録する場合を考えてみましょう。
1010
Original file line number Diff line number Diff line change @@ -58,7 +58,7 @@ addButton.onclick = () => {
5858};
5959```
6060
61- このとき、箇条書きの項目として新たに` li ` 要素を追加する必要があります。DOMの節で扱ったように 、` document.createElement ` 関数を使うと新しい要素を作成できます。また、` Node#appendChild ` メソッドを用いることで既存の要素内に子要素を追加することができます。
61+ このとき、箇条書きの項目として新たに` li ` 要素を追加する必要があります。[ DOM ] ( /docs/trial-session/dom/ ) で扱ったように 、` document.createElement ` 関数を使うと新しい要素を作成できます。また、` Node#appendChild ` メソッドを用いることで既存の要素内に子要素を追加することができます。
6262
6363``` javascript
6464const li = document .createElement (" li" );
Original file line number Diff line number Diff line change @@ -105,7 +105,7 @@ console.log("Hello World!");
105105
106106## Node.jsのデバッグ
107107
108- [ ブラウザの開発者ツールを利用する] ( /docs/browser-apps/inspector/ ) 節でJavaScriptのデバッグを行ったのと同様に 、Node.jsでは、VS Code標準の機能を用いてデバッグを行えます。
108+ [ ブラウザの開発者ツールを利用する] ( /docs/browser-apps/inspector/ ) でJavaScriptのデバッグを行ったのと同様に 、Node.jsでは、VS Code標準の機能を用いてデバッグを行えます。
109109
110110Node.jsのデバッグを開始するには、ブレークポイント等を設定したうえで、` F5 ` キーを押します。初回はデバッグ構成を選択するメニューが出現するので、` Node.js ` を選択しましょう。デバッグが開始されると、VS Code下部の青いバーが橙色に変化します。` console.log ` は` DEBUG CONSOLE ` タブに出力されるので注意しましょう。
111111
Original file line number Diff line number Diff line change @@ -8,7 +8,7 @@ import RequestResponseSlideShow from "./request-response-slide-show";
88
99## ウェブサイトが動作する仕組み
1010
11- [ 「 Webプログラミングの基礎を学ぼう」 ] ( /docs/trial-session/ ) の章では 、ウェブサイトを表示するためにHTMLファイルとJavaScriptファイルを作成し、ブラウザから開きました。しかし、一般的なウェブサイトを閲覧する際は、HTMLファイルやJavaScriptファイルの存在を意識することはありません。これは、Webでは、通常インターネットを介してデータをやり取りするためです。
11+ [ Webプログラミングの基礎を学ぼう] ( /docs/trial-session/ ) では 、ウェブサイトを表示するためにHTMLファイルとJavaScriptファイルを作成し、ブラウザから開きました。しかし、一般的なウェブサイトを閲覧する際は、HTMLファイルやJavaScriptファイルの存在を意識することはありません。これは、Webでは、通常インターネットを介してデータをやり取りするためです。
1212
1313インターネットを人間が直接利用することはできないので、何らかのコンピューターを使用しなければなりません。
1414このとき、
Original file line number Diff line number Diff line change @@ -10,7 +10,7 @@ Fetch APIを用いると、サーバーからデータを取得するだけで
1010
1111## HTTPリクエストとレスポンスの構造
1212
13- [ Expressによるサーバー構築] ( ../ server/) の節では 、<Term >クライアント</Term >から<Term >サーバー</Term >への要求を<Term >リクエスト</Term >と呼び、その応答を<Term >レスポンス</Term >と呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。
13+ [ Expressによるサーバー構築] ( /docs/web-servers/ server/) では 、<Term >クライアント</Term >から<Term >サーバー</Term >への要求を<Term >リクエスト</Term >と呼び、その応答を<Term >レスポンス</Term >と呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。
1414
1515- ** 制御情報** : リクエストやレスポンスの基本的な情報を含む部分。リクエストには、<Term id = " http-method" >** メソッド** </Term >と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、<Term >** ステータスコード** </Term >と呼ばれる、リクエストの結果を示すコードが含まれます。
1616- ** ヘッダー** : リクエストやレスポンスに関する追加情報を含む部分。名前と値のペアで構成され、リクエストやレスポンスの内容をより詳細に説明します。
Original file line number Diff line number Diff line change @@ -6,7 +6,7 @@ import registerRenderVideo from "./register-render.mp4";
66
77これまでは、Webアプリケーションを開発するにあたり、開発用の端末をサーバーとして利用してきました。しかし、開発したアプリケーションを実際のユーザーが使用できるようにするためには、インターネットに公開されたサーバーが必要です。サーバーの公開に際しては、通常複雑な設定や管理が必要になりますが、** PaaS** (Platform as a Service) と呼ばれるようなサービスを用いることで、その手間を大幅に簡略化することができます。
88
9- [ Render] ( https://render.com/ ) は、近年サービスを開始したPaaSで、GitHubなどと連携し、Webアプリケーションを簡単に公開できるサービスです。[ データベースの節 ] ( ../ database) の演習問題で作成したアプリケーションをデプロイし、Renderを用いてNode.jsやPostgreSQLを用いたアプリケーションを<Term >デプロイ</Term >する方法を学びましょう。
9+ [ Render] ( https://render.com/ ) は、近年サービスを開始したPaaSで、GitHubなどと連携し、Webアプリケーションを簡単に公開できるサービスです。[ データベース ] ( /docs/web-servers/ database/ ) の演習問題で作成したアプリケーションをデプロイし、Renderを用いてNode.jsやPostgreSQLを用いたアプリケーションを<Term >デプロイ</Term >する方法を学びましょう。
1010
1111## Renderへの登録
1212
Original file line number Diff line number Diff line change @@ -24,7 +24,7 @@ JavaScriptは、当初はWebサイトに簡易的な動きを追加させるた
2424
2525### <Term >モジュールバンドラ</Term >
2626
27- 通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためには` script ` タグを並べれば良いですが、[ HTTPサーバー ] ( /docs/web-servers/server/ ) の節で学んだように 、` script ` タグの数だけ<Term >HTTPリクエスト</Term >が発行されてしまうため非効率的です。
27+ 通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためには` script ` タグを並べれば良いですが、[ Expressによるサーバー構築 ] ( /docs/web-servers/server/ ) で学んだように 、` script ` タグの数だけ<Term >HTTPリクエスト</Term >が発行されてしまうため非効率的です。
2828
2929[ webpack] ( https://webpack.js.org ) のような<Term >** モジュールバンドラ** </Term >を用いることで、複数のJavaScriptファイルを統合できます。
3030
Original file line number Diff line number Diff line change @@ -746,7 +746,7 @@ export default function App() {
746746
747747:::tip[ Reactとイミュータビリティ]
748748
749- [ オブジェクトの参照] ( /docs/browser-apps/reference/ ) 節で扱ったように 、JavaScriptオブジェクトは参照として扱われます。Reactでは、** 状態として保存されたオブジェクトの参照先への変更は許可されていません** 。例えば、先ほどのプログラムの` addTodo ` 関数と` removeTodo ` 関数は、次のように書き換えることはできません。これは、この方法ではReactが状態が変化したことを検知できないからです。
749+ [ オブジェクトの参照] ( /docs/browser-apps/reference/ ) で扱ったように 、JavaScriptオブジェクトは参照として扱われます。Reactでは、** 状態として保存されたオブジェクトの参照先への変更は許可されていません** 。例えば、先ほどのプログラムの` addTodo ` 関数と` removeTodo ` 関数は、次のように書き換えることはできません。これは、この方法ではReactが状態が変化したことを検知できないからです。
750750
751751``` tsx
752752const addTodo = () => {
You can’t perform that action at this time.
0 commit comments