diff --git a/docs/9-old/day01/01.mdx b/docs/9-old/day01/01.mdx deleted file mode 100644 index 2176a9a7e..000000000 --- a/docs/9-old/day01/01.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Visual Studio Codeのインストール ---- - -Visual Studio Code (以下 VS Code)は、Microsoft 社のオープンソースソフトウェアです。多くのエディタが登場する中、Visual Studio Code は、その軽快な動作と機能性、拡張性の高さにより多くの開発者からの支持を得るに至りました。 - -![Visual Studio Codeのインストール](01/install-vscode.png) - -VS Code をインストールしてください。以上のような画面が表示されれば成功です。 diff --git a/docs/9-old/day01/01/install-vscode.png b/docs/9-old/day01/01/install-vscode.png deleted file mode 100644 index 850d0c775..000000000 Binary files a/docs/9-old/day01/01/install-vscode.png and /dev/null differ diff --git a/docs/9-old/day01/02.mdx b/docs/9-old/day01/02.mdx deleted file mode 100644 index 73ba1b0bc..000000000 --- a/docs/9-old/day01/02.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: HTMLファイルの作成 ---- - -VS Code は、ディレクトリ（フォルダ）単位でファイルを管理します。これから大量に増えていくだろうプログラムファイルを保存しておくためのディレクトリを、適当な場所に作成しましょう。それが終わったら、そのディレクトリの中に今から作るプロジェクトのためのディレクトリを作成します。名前は何でもいいですが、例えば「helloworld」などにしてみましょう。 - -VS Code でディレクトリを開きます。`Ctrl (Cmd) + Shift + P`を押して`File: Open Folder...`を選択し、先ほど作成したディレクトリを選択しましょう。 - -![ディレクトリを開く](02/open-folder.png) - -なお、この`Ctrl (Cmd) + Shift + P`は、VS Code を利用する上で非常に重要な操作です。これにより**コマンド パレット**が表示され、現在実行可能な操作が全て一覧表示されます。 - -:::tip[絞り込み] -結構雑な絞り込みも有効です。例えば、「opfol」のように入力しても、「File: Open Folder...」が見つかります。 -::: - -図のように、左側のパネルに開いているディレクトリの名前が表示されれば成功です。 - -![エクスプローラー](02/explorer.png) - -新しいファイルを作成して`index.html`としてください。 - -![index.htmlの作成](02/create-index-html.png) - -ファイルの中身は適当で構いません。 - -```html title="index.html" -hello world! -``` diff --git a/docs/9-old/day01/02/create-index-html.png b/docs/9-old/day01/02/create-index-html.png deleted file mode 100644 index 3e523cfda..000000000 Binary files a/docs/9-old/day01/02/create-index-html.png and /dev/null differ diff --git a/docs/9-old/day01/02/explorer.png b/docs/9-old/day01/02/explorer.png deleted file mode 100644 index 8785d6d01..000000000 Binary files a/docs/9-old/day01/02/explorer.png and /dev/null differ diff --git a/docs/9-old/day01/02/open-folder.png b/docs/9-old/day01/02/open-folder.png deleted file mode 100644 index a39ba615c..000000000 Binary files a/docs/9-old/day01/02/open-folder.png and /dev/null differ diff --git a/docs/9-old/day01/03.mdx b/docs/9-old/day01/03.mdx deleted file mode 100644 index c5a661b9f..000000000 --- a/docs/9-old/day01/03.mdx +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: ブラウザでHTMLファイルを表示する ---- - -VS Code は、**拡張機能**（Extensions）を通して自分好みの機能を追加することができます。`Live Server`拡張機能を使用すると、作成した HTML ファイルを簡単にブラウザで表示できます。開発用には Chrome が便利なので、インストールされていない場合はインストールしておきましょう。 - -![Live Serverのインストール](03/install-live-server.png) - -Live Server 拡張機能をインストールすると、コマンドパレットから`Live Server: Open with Live Server`が使用できるようになります。これを実行しましょう。 - -![Open with Live Server](03/open-with-live-server.png) - -ブラウザが起動し、先ほど作成した Web ページが表示されました。標準状態では、ブラウザのアドレスバーは - -``` -http://127.0.0.1:5500/index.html -``` - -を示しているはずです。 - -![ブラウザプレビュー](03/browser-preview.png) - -おめでとうございます！はじめてのウェブサイトが作成できました！ diff --git a/docs/9-old/day01/03/browser-preview.png b/docs/9-old/day01/03/browser-preview.png deleted file mode 100644 index b6e33bddf..000000000 Binary files a/docs/9-old/day01/03/browser-preview.png and /dev/null differ diff --git a/docs/9-old/day01/03/install-live-server.png b/docs/9-old/day01/03/install-live-server.png deleted file mode 100644 index 03157b1e2..000000000 Binary files a/docs/9-old/day01/03/install-live-server.png and /dev/null differ diff --git a/docs/9-old/day01/03/open-with-live-server.png b/docs/9-old/day01/03/open-with-live-server.png deleted file mode 100644 index 0d2dc7926..000000000 Binary files a/docs/9-old/day01/03/open-with-live-server.png and /dev/null differ diff --git a/docs/9-old/day01/04.mdx b/docs/9-old/day01/04.mdx deleted file mode 100644 index fb33fc876..000000000 --- a/docs/9-old/day01/04.mdx +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: HTMLの基礎 ---- - -先ほどの`index.html`をもう一度見直してみましょう。実は、HTML ファイルはただ文章を書けばよいというものではなく、いくつかの約束事があります。`index.html`を正しい HTML ファイルにするため、以下の通りに書き換えてください。 - -```html title="index.html" - - - - - Document - - - Hello World! - - -``` - -:::warning[ファイルの保存] -ファイルを保存したら忘れずに保存しましょう。ほとんどのソフトウェアでは`Ctrl (Cmd) + S`がこの操作に該当します。 -::: - -先ほどとは表示が変わっていないのにもかかわらず、コードの量が大きく増加してしまいました。どうしたものでしょうか。 - -HTML ファイルは、文書に意味を持たせるために、**タグ**と呼ばれる構造を持つことができます。タグは、``のような、「小なり」と「大なり」で囲まれた英数字のまとまりです。 - -タグは、`内容`のように、タグ名の先頭にスラッシュを付けるか否かの区別により**開始タグ**と**終了タグ**に別れ、内部のテキストや別のタグを挟み込むことができます。開始タグから終了タグまでのまとまりを**要素**（Element）といいます。 - -開始タグには、``のように、`属性名="値"`の形式で**属性**を指定することができます。例えば、`html`タグには`lang`属性を指定することができ、その文書が何の言語で記されたものであるかを示すことができます。 - -また、全ての HTML ファイルは、一行目の - -```html - -``` - -という「このファイルは HTML ファイルだ！」と宣言する定型句ののち、`html`要素を頂点とした木構造を形成します。 - -順を追って見ていくと、`html`要素の直属の子としては、`head`要素と`body`要素がそれぞれ 1 つずつのみ存在することが分かります。 - -このうち、`head`要素は文書のメタ情報（文書自身に関する情報）を格納するものです。上記の例であれば`title`要素によって文書のタイトルを、`meta`タグの`charset`属性において文字コードを指定しています。 - -`body`タグの中には実際に画面に表示される情報を記述します。今回は`Hello World`というテキストのみが存在していますね。 - -HTML の定型的な部分はそこそこ長いので、最初のうちはコピペで構いません。そのうち覚えます。 diff --git a/docs/9-old/day01/05.mdx b/docs/9-old/day01/05.mdx deleted file mode 100644 index 432d3e4dc..000000000 --- a/docs/9-old/day01/05.mdx +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: "課題: HTMLのみを使用してフォームを作成する" ---- - -単一の HTML ファイルのみを使用して、以下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。 - -![課題の例](05/task-sample.png) - -実際に動作する例は、[こちら](https://ut-code.github.io/utcode-learn-answers/01/)をご覧ください。 - -見た目だけでは分かりづらい部分もあります。例えば、ID やパスワードの入力欄は表形式になっています。`html 表`などと検索してみてください。 - -また、最後の部分は箇条書きです。実は、HTML には、箇条書きのための専用の要素が用意されています。`html 箇条書き`などと検索してみてください。 - -:::tip -課題が完成したら、Slack 上でソースコードを共有してください。書いたコードを誰かに読んでもらうことで、間違っている部分に素早く気づくことができます。 - -HTML は「正しく」なくても動作します！気を付けてください！ -::: diff --git a/docs/9-old/day01/05/task-sample.png b/docs/9-old/day01/05/task-sample.png deleted file mode 100644 index b4c9c76f3..000000000 Binary files a/docs/9-old/day01/05/task-sample.png and /dev/null differ diff --git a/docs/9-old/day01/06.mdx b/docs/9-old/day01/06.mdx deleted file mode 100644 index 54ba0b89c..000000000 --- a/docs/9-old/day01/06.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: ディレクトリ構造 ---- - -図のように、`index.html`以外の HTML ファイルがあったり、`sample`ディレクトリの中に`sub2.html`が存在したりするなど、複雑な構造になった場合はどうしたらよいのでしょうか。 - -![複雑なディレクトリ構造](06/complex-structure.png) - -そこまで難しくはありません。最初のファイルが`http://127.0.0.1:5500/index.html`でアクセスできる場合、 - -- `http://127.0.0.1:5500/sub.html` -- `http://127.0.0.1:5500/sample/sub2.html` - -のような感じです。ディレクトリ構造がスラッシュを区切り文字として表現されているというイメージですね。 - -なお、`index.html`は少し特別な意味を持ち、実は URL 上では省略可能な場合が多いです。例えば、`http://127.0.0.1:5500/index.html`は、`http://127.0.0.1:5500/`のように書き換え可能だったりします。便利ですね。 - -`a`タグを利用すると、あるページから別のページへの**ハイパーリンク**を作成することができます。 - -```html title="index.html" -リンク -``` - -としてみて、どのように表示されるか確認してみてください。 diff --git a/docs/9-old/day01/06/complex-structure.png b/docs/9-old/day01/06/complex-structure.png deleted file mode 100644 index 1b367c69a..000000000 Binary files a/docs/9-old/day01/06/complex-structure.png and /dev/null differ diff --git a/docs/9-old/day01/07.mdx b/docs/9-old/day01/07.mdx deleted file mode 100644 index f3128047d..000000000 --- a/docs/9-old/day01/07.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Gitのインストール ---- - -Git は、**バージョン管理システム**の一種です。Git のようなバージョン管理システムを用いることで、複雑になりがちなソフトウェアの開発の工程の履歴を克明に記録することができます。現代のソフトウェア開発において、Git が使われないケースは稀でしょう。 - -:::info -以下のインストール手順は、Mac ユーザーには必要ありません。macOS には標準で Git が搭載されています。 -::: - -Git のインストーラーを公式サイトからダウンロードします。 - -![Gitのダウンロード](07/download-git.png) - -画面の指示に従ってインストールします。標準の設定で特に問題ありません。 - -![Gitのインストール](07/install-git.png) - -ターミナル上で Git が使用できることを確認してください。 - -![Gitがインストールされていることの確認](07/confirm-git.png) diff --git a/docs/9-old/day01/07/confirm-git.png b/docs/9-old/day01/07/confirm-git.png deleted file mode 100644 index 3a9c9c052..000000000 Binary files a/docs/9-old/day01/07/confirm-git.png and /dev/null differ diff --git a/docs/9-old/day01/07/download-git.png b/docs/9-old/day01/07/download-git.png deleted file mode 100644 index 748976756..000000000 Binary files a/docs/9-old/day01/07/download-git.png and /dev/null differ diff --git a/docs/9-old/day01/07/install-git.png b/docs/9-old/day01/07/install-git.png deleted file mode 100644 index 3db1c87bf..000000000 Binary files a/docs/9-old/day01/07/install-git.png and /dev/null differ diff --git a/docs/9-old/day01/08.mdx b/docs/9-old/day01/08.mdx deleted file mode 100644 index e8e17fa91..000000000 --- a/docs/9-old/day01/08.mdx +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: GitHubへの登録とGitの初期設定 ---- - -import Tabs from "@theme/Tabs"; -import TabItem from "@theme/TabItem"; - -Git が管理するソースコードのまとまりを**リポジトリ**といいます。**GitHub**を用いると、クラウド上に Git リポジトリを保存しておくことができ、チーム開発を円滑に進めることができます。 - -GitHub に登録しましょう。 - -![GitHubへの登録](08/register-github.png) - -## 公開鍵と秘密鍵の作成 - -GitHub に Git を用いて接続する際、自らを正規のユーザーであると証明するため、公開鍵と秘密鍵のペアを作成します。ターミナル（Windows であれば`PowerShell`、macOS であれば`Terminal.app`）で以下のコマンドを実行します。 - -:::note -公開鍵暗号に関する詳細な説明は省略しますが、教養学部の情報の教科書にも載っていますし、詳しい数理的背景を知っている必要もありません。重要なのは、公開鍵暗号を用いることで何ができるのか、という点です。 -::: - -``` -$ ssh-keygen -t ed25519 -Generating public/private ed25519 key pair. -Enter file in which to save the key (/Users/[ユーザー名]/.ssh/id_ed25519): -Created directory '/Users/[ユーザー名]/.ssh'. -Enter passphrase (empty for no passphrase): -Enter same passphrase again: -Your identification has been saved in /Users/[ユーザー名]/.ssh/id_ed25519. -Your public key has been saved in /Users/[ユーザー名]/.ssh/id_ed25519.pub. -The key fingerprint is: -SHA256:xjZbER36s2DNfwNCpk963KAvSa3+EPiOHILpLKqH1kE [ユーザー名]@[コンピューター名] -The key's randomart image is: -+--[ED25519 256]--+ -| | -| | -| | -| | -| | -| | -| | -| | -| | -+----[SHA256]-----+ -``` - -このとき、`/Users/[ユーザー名]/.ssh/id_ed25519`が秘密鍵の保存場所、`/Users/[ユーザー名]/.ssh/id_ed25519.pub`が公開鍵の保存場所です。Windows の場合は`C:\Users\`から始まる文字列となっていることでしょう。 - -:::info -以後、「$」から始まる行は入力するコマンドを表すものとします。上記の場合であれば、`ssh-keygen -t ed25519`がコマンド入力です。このコマンドは何度か対話的な入力を求めてきますが、今回は何も入力せず Enter キーを押して構いません。 -::: - -公開鍵が格納されたファイルの中身を表示させます。`cat`コマンドを利用すると、ファイルの中身を簡単に表示させることができます。 - -``` -$ cat /Users/[ユーザー名]/.ssh/id_ed25519.pub -ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIFNwa2O/BIlw+WvisPCrSlM6IS2M2bbCRKNU9G8NYq2L [ユーザー名]@[コンピューター名] -``` - -`ssh-ed25519 AA...2L`の部分をコピーしましょう。これが公開鍵です。 - -## 公開鍵を GitHub に登録する - -![設定画面へ移動](08/go-to-settings.png) - -以上の図のように設定画面に移動し、[`SSH and GPG keys`](https://github.com/settings/keys)を選択します。`New SSH key`から先ほどコピーした公開鍵を入力します。 - -![SSH鍵の登録](08/ssh-key-registeraton.png) - -公開鍵の登録は基本的に 1 端末につき 1 つです。鍵を作成した端末を区別できる適当な名前を「Title」に指定しておきましょう。 - -## Git の初期設定 - -設定画面の[Emails](https://github.com/settings/emails)から、ダミーのメールアドレスを取得することができます。Git を使用するにはメールアドレスが必要ですが、正直に正しいメールアドレスを入力してしまうとそれが GitHub 上にアップロードされたとき、全世界中に自分のメールアドレスが公開されることになってしまうからです。 - -![ダミーのメールアドレスの取得](08/dummy-email-address.png) - -ターミナルから Git の初期設定を行います。 - -``` -$ git config --global user.email [ダミーのメールアドレス] -$ git config --global user.name [GitHubのユーザー名] -``` - -Git が GitHub を利用できるようになりました。 diff --git a/docs/9-old/day01/08/dummy-email-address.png b/docs/9-old/day01/08/dummy-email-address.png deleted file mode 100644 index 9a2733d26..000000000 Binary files a/docs/9-old/day01/08/dummy-email-address.png and /dev/null differ diff --git a/docs/9-old/day01/08/go-to-settings.png b/docs/9-old/day01/08/go-to-settings.png deleted file mode 100644 index e69765eb7..000000000 Binary files a/docs/9-old/day01/08/go-to-settings.png and /dev/null differ diff --git a/docs/9-old/day01/08/register-github.png b/docs/9-old/day01/08/register-github.png deleted file mode 100644 index bba4ef37c..000000000 Binary files a/docs/9-old/day01/08/register-github.png and /dev/null differ diff --git a/docs/9-old/day01/08/ssh-key-registeraton.png b/docs/9-old/day01/08/ssh-key-registeraton.png deleted file mode 100644 index 0e37bd825..000000000 Binary files a/docs/9-old/day01/08/ssh-key-registeraton.png and /dev/null differ diff --git a/docs/9-old/day01/09.mdx b/docs/9-old/day01/09.mdx deleted file mode 100644 index 4d78a4aad..000000000 --- a/docs/9-old/day01/09.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Gitを使用する ---- - -Git のリポジトリは、**コミット**と呼ばれるソースコードへの変更の塊の集合です。以前作成したログインフォームを、Git の管理下に置いてみましょう。 - -![統合ターミナルの起動](09/new-integrated-terminal.png) - -VS Code は、ターミナルの機能を内蔵しています（統合ターミナル）。ソースコードを見ながら利用するのに便利なので、積極的に利用していきましょう。それでは、プロジェクトのディレクトリを VS Code で開いた状態で、統合ターミナルで以下のコマンドを入力してください。 - -``` -$ git init -Initialized empty Git repository in /Users/username/path/to/helloworld/.git/ -``` - -ファイルリスト中のファイルの色が変わり、`U`の文字が表示されたでしょうか。 - -![git init](09/git-init.png) - -`git init`は、ディレクトリを Git の支配下に置くことを宣言するためのコマンドです。このコマンドを実行することにより、プロジェクトディレクトリはまだコミットが存在しない空のリポジトリになりました。 - -`U`は`Untracked`の頭文字で、そのファイルが最後のコミット（といってもまだ作ったばかりのリポジトリなので空ですが）より後に新しく作成され、まだ Git によって管理されていないことを表します。 - -``` -$ git add -A -``` - -左側のパネルを`SOURCE CONTROL`にすると、すべてのファイルリストではなく、変更されたファイルのみのリストを表示させることができます。上のコマンドを実行すると、今まで`U`だった部分が`A (Added)`に変更されました。 - -![ステージング](09/git-staging.png) - -`git add`コマンドは、変更を**ステージング**するためのコマンドです。ステージングとはコミットの直前の状態で、Git に対して該当ファイルをコミットする意思があることを伝えるためのものです。今回は`-A`オプションによりすべてのファイルをステージングしましたが、特定のファイルのみとすることもできます。 - -VS Code は、GUI を利用した Git の操作に標準で対応しています。変更一覧に表示されるプラスボタンがステージング、マイナスボタンがその解除に当たります。 - -最後に、ステージングされたファイルをコミットしてみましょう。 - -``` -$ git commit -m "init" -``` - -コミットが作成され、ファイルリストは白色に戻りました。なお、git ではコミットを作成するとき、そのコミットによって行った変更を説明するための**コミットメッセージ**を付けることになっています。それを指定するためのオプションが`-m`です。 - -![コミット](09/git-commit.png) - -なお、これ以降は、最後のコミットと比較し、新しく追加されたファイルには`U`が、編集されたファイルには`M (Modified)`が付与されます。ある程度変更がまとまったら、ステージング（`git add`）、コミット（`git commit`）を繰り返してプログラムを書き進めていきましょう。 - -![さらに編集](09/additional-changes.png) diff --git a/docs/9-old/day01/09/additional-changes.png b/docs/9-old/day01/09/additional-changes.png deleted file mode 100644 index 92754bef8..000000000 Binary files a/docs/9-old/day01/09/additional-changes.png and /dev/null differ diff --git a/docs/9-old/day01/09/git-commit.png b/docs/9-old/day01/09/git-commit.png deleted file mode 100644 index b6cff3f09..000000000 Binary files a/docs/9-old/day01/09/git-commit.png and /dev/null differ diff --git a/docs/9-old/day01/09/git-init.png b/docs/9-old/day01/09/git-init.png deleted file mode 100644 index 5aef46526..000000000 Binary files a/docs/9-old/day01/09/git-init.png and /dev/null differ diff --git a/docs/9-old/day01/09/git-staging.png b/docs/9-old/day01/09/git-staging.png deleted file mode 100644 index 3c21899be..000000000 Binary files a/docs/9-old/day01/09/git-staging.png and /dev/null differ diff --git a/docs/9-old/day01/09/new-integrated-terminal.png b/docs/9-old/day01/09/new-integrated-terminal.png deleted file mode 100644 index 688036adc..000000000 Binary files a/docs/9-old/day01/09/new-integrated-terminal.png and /dev/null differ diff --git a/docs/9-old/day01/10.mdx b/docs/9-old/day01/10.mdx deleted file mode 100644 index 8e2c5a74d..000000000 --- a/docs/9-old/day01/10.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: ローカルリポジトリとGitHub上のリポジトリの同期 ---- - -前回の作業で、手元のコンピューター上の Git リポジトリ（ローカルリポジトリ）に新しいコミットを追加することに成功しました。次は、このリポジトリを GitHub 上のリポジトリ（リモートリポジトリ）に同期させてみましょう。 - -![GitHub上でリポジトリを作成する](10/new-repository.png) - -GitHub では、Web インターフェースを使用して Git リポジトリの操作をすることができます。`Repository name`に適当な名前を入力して、`Create repository`を押しましょう。 - -![新しいリポジトリ](10/repository-created.png) - -`git@github.com:アカウント名/リポジトリ名.git`の部分は、GitHub 上に新しく作ったリポジトリの場所を表す URL です。 - -ターミナルに戻り、以下のコマンドを実行します。 - -``` -$ git remote add origin git@github.com:アカウント名/リポジトリ名.git -``` - -このコマンドを実行することで、ローカルリポジトリに対し、URL で指定したリポジトリを`origin`という名前で関連付けさせます。 - -:::note -`origin`という名前は慣習的に決まっているものです。別の名前で登録することもできますが、あまり一般的ではありません。 -::: - -`origin`に対し、ローカルリポジトリの変更を**プッシュ**しましょう。 - -``` -$ git push -u origin master -``` - -:::info -この操作の際、初回は以下のような警告が出る場合があります。 - -``` -The authenticity of host 'github.com (13.114.40.48)' can't be established. -RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8. -Are you sure you want to continue connecting (yes/no/[fingerprint])? -``` - -これは、接続先となっている GitHub が、なりすましではなく本物の GitHub であると信頼してもよいかを尋ねるメッセージです。家庭用のインターネット回線、UTokyo WiFi 等、十分に信頼できるネットワークに接続している場合は問題ありませんので、`yes`を入力して続行させてください。 -::: - -:::tip -`-u`オプションは、初回の`push`時にその宛先を記憶し、次回以降自動的にその場所を指定するためのオプションです。2 回目以降は - -``` -$ git push -``` - -だけで構いません。`master`は、**ブランチ**と呼ばれるソースコードの編集の分岐の名前を表すものですが、この回ではまだ詳しく扱わないこととします。 -::: - -GitHub をリロードしてみてください。変更が反映されているのを確認できるはずです。 - -![GitHub上のリポジトリが更新された](10/github-updated.png) diff --git a/docs/9-old/day01/10/github-updated.png b/docs/9-old/day01/10/github-updated.png deleted file mode 100644 index 6ba0af101..000000000 Binary files a/docs/9-old/day01/10/github-updated.png and /dev/null differ diff --git a/docs/9-old/day01/10/new-repository.png b/docs/9-old/day01/10/new-repository.png deleted file mode 100644 index 061197772..000000000 Binary files a/docs/9-old/day01/10/new-repository.png and /dev/null differ diff --git a/docs/9-old/day01/10/repository-created.png b/docs/9-old/day01/10/repository-created.png deleted file mode 100644 index 683caaa54..000000000 Binary files a/docs/9-old/day01/10/repository-created.png and /dev/null differ diff --git a/docs/9-old/day01/11.mdx b/docs/9-old/day01/11.mdx deleted file mode 100644 index 22d4e0781..000000000 --- a/docs/9-old/day01/11.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: GitHub Pagesを用いて作成したウェブサイトを公開する ---- - -GitHub の機能である**GitHub Pages**を用いると、GitHub 状のリポジトリをそのままウェブサイトとして公開することができます。 - -![GitHub Pagesの設定](11/github-pages.png) - -`Settings`内の`Options`の`GitHub Pages`セクションで、`Source`を`master`に設定しましょう。すると、 - -``` -Your site is ready to be published at https://[アカウント名].github.io/[リポジトリ名]/. -``` - -のように URL が発行され、作成したウェブサイトが全世界に公開されるようになります。 - -おめでとうございます。はじめての Web サイトを公開することができました:tada: diff --git a/docs/9-old/day01/11/github-pages.png b/docs/9-old/day01/11/github-pages.png deleted file mode 100644 index a7a2bcc05..000000000 Binary files a/docs/9-old/day01/11/github-pages.png and /dev/null differ diff --git a/docs/9-old/day01/12.mdx b/docs/9-old/day01/12.mdx deleted file mode 100644 index 9a7d30868..000000000 --- a/docs/9-old/day01/12.mdx +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: CSSことはじめ ---- - -今まで学習してきた HTML は、あくまで**文書の構造**を表現することしかできませんでした。**CSS**を用いると、HTML によって形作られた文書構造を、極めてリッチに装飾することができます。 - -## `style`属性を使用して CSS を使ってみる - -以下のような HTML ファイルを作成しましょう。 - -```html -
Hello World
-``` - -:::warning -これ以降、HTML を記述する際は、必要な部分のみを記述するものとします。例えば、上記の例であれば、実際の HTML ファイルは - -```html - - - - - Document - - -
Hello World
- - -``` - -となるのでしょうが、今回関心があるのは`body`タグの内部のみです。 -::: - -上記の例の実行結果は、以下のようになるはずです。 - ->
Hello World
- -CSS は、`プロパティ名: 値;`の形式で記述します。上記の例で使われている`color`プロパティは文字色を設定するため、`font-size`プロパティは文字サイズを指定するためのプロパティです。セミコロンで区切って複数のプロパティを使用することができます。 - -## CSS を別ファイルに分離する - -Web サイトの見た目に対する社会の要求の高まりに応えて CSS のプロパティの種類は増え続け、現在ではとても数えきれないほどとなっています。CSS の記述量は HTML のそれとは比較にならないほど多い場合がほとんどです。 - -このため、CSS をすべて`style`属性で記述するのは現実的ではありません。数が多すぎて、見通しが悪くなってしまうからです。このため、通常 CSS ファイルは HTML ファイルとは別に用意します。 - -![CSSを別ファイルに分離する](12/separate-html-css.png) - -CSS ファイルの拡張子は通常`.css`です。今回は`index.html`と併せて`style.css`を作成しました。 - -```html title="index.html" - - - - - Document - - - -
Hello World!
- - -``` - -```css title="style.css" -#element { - color: red; - font-size: 40px; -} -``` - -まず注目すべきは`link`タグです。`href`属性を指定することにより、外部に作成した CSS ファイルを読み込ませることができます。 - -外部 CSS ファイルの中身は`color: red; font-size: 40px;`だけというわけにはいきません。なぜなら、この CSS が HTML 上のどの要素に適用されるのかを指定しなければならないからです。 - -その役割を担っているのが**セレクタ**、この例では`#element`の部分です。「`id`属性が`element`である要素」を示します。`id`属性は、HTML 要素に対して開発者が自由に設定できますが、1 ページ内に同じ`id`属性を持つ要素が複数存在してはならない、というルールがあります。 - -これに対し、`class`属性は、開発者が好きな値を設定できるのは同じですが、同じ値を複数の要素が持つことを許されています。また、スペース区切りで複数の複数の値を設定することもできます。セレクタは、`.element`のようにドット記号に続けて記述します。 - -| セレクタ | 意味 | -| ---------- | ------------------------------------ | -| `#element` | `id`属性が`element`である要素 | -| `.element` | `class`属性に`element`が含まれる要素 | -| `element` | タグ名が`element`である要素 | - -また、セレクタをスペースで区切ると子孫要素、`>`で区切ると直属の子要素を表すことができます。そのまま繋げば and 条件とみなされます。 - -| セレクタ | 意味 | -| ---------------- | ------------------------------------------------------------------------ | -| `div.element` | `class`属性に`element`が含まれる`div`要素 | -| `#parent .child` | `id`属性が`parent`である要素の子孫の、`class`属性に`child`が含まれる要素 | -| `#parent > div` | `id`属性が`parent`である要素の直属の子の`div`要素 | - -セレクタを上手に活用すると、HTML を最小限必要なものに抑えながら、変更に強くて柔軟な CSS を作成することができます。 diff --git a/docs/9-old/day01/12/separate-html-css.png b/docs/9-old/day01/12/separate-html-css.png deleted file mode 100644 index 73b3fd3ef..000000000 Binary files a/docs/9-old/day01/12/separate-html-css.png and /dev/null differ diff --git a/docs/9-old/day01/13.mdx b/docs/9-old/day01/13.mdx deleted file mode 100644 index 0461dea6a..000000000 --- a/docs/9-old/day01/13.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: "課題: CSSを用いてログインフォームをデザインする" ---- - -VS Code で別のディレクトリを開き、Git リポジトリを初期化しましょう。`style.css`のみを使用して、次に示された HTML を装飾してください。 - -```html title="index.html" - - - - - 課題 - - - -
-

ログイン

- - - - - - - - - -
ID:
パスワード:
- -
- - -``` - -完成イメージは以下の通りでいかがでしょうか。このサンプルを忠実に模写する必要は特にありません。様々な CSS プロパティを用いて、CSS の強力さを実感してください。 - -![完成サンプル](13/sample.png) - -実際に動作するサンプルは[こちら](https://ut-code.github.io/utcode-learn-answers/02/)から確認できます。 - -## おそらくつまづくであろうポイント - -サンプルでは、ログインフォームが画面の中央に配置されています。一昔前であれば実装するのが大変なデザインだったのですが、現在では`Flexbox`と呼ばれる技術を使うことにより簡単に実装できるようになりました。 - -`body`要素に`display: flex`を指定し、`justify-content`や`align-items`を上手く使うことで対応できます。この際、上下方向に中央にするためには、`html`要素と`body`要素に`height: 100%;`を指定しなければなりません。これは、標準状態だと両要素は中身に応じて伸縮してしまうためです。 - -## 疑似クラス - -疑似クラスを用いると、要素が特定の状態になったときにスタイルを適用することができます。代表的なものが`:hover`です。 - -```css -input:hover { - color: red; -} -``` - -とすれば、`input`要素にカーソルが乗っている時だけ文字色を赤色にすることができます。 - -## 参考: サンプルで使われている CSS プロパティの一覧 - -暇だったら調べてみてください。 - -- `display` -- `flex-direction` -- `justify-content` -- `align-items` -- `align-self` -- `margin` -- `padding` -- `height` -- `border` -- `border-radius` -- `border-collapse` -- `outline` -- `box-shadow` -- `background-color` -- `text-align` -- `color` -- `font-family` -- `font-weight` -- `content` - -## もっと CSS を学びたい人へ - -実際に動作している Web サイトの模写ができるか腕試しをしてみましょう。驚くような実装に出会えるかもしれません。 diff --git a/docs/9-old/day01/13/sample.png b/docs/9-old/day01/13/sample.png deleted file mode 100644 index bc41d2134..000000000 Binary files a/docs/9-old/day01/13/sample.png and /dev/null differ diff --git a/docs/9-old/day02/01.mdx b/docs/9-old/day02/01.mdx deleted file mode 100644 index d637d9b04..000000000 --- a/docs/9-old/day02/01.mdx +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: 開発者ツールの利用 ---- - -ブラウザに標準で搭載されている**開発者ツール**を使用すると、表示されているウェブサイトの構造を簡単に分析できます。 - -![開発者ツールを開く](01/open-developer-tool.png) - -Chrome の場合図のように「その他のツール」「デベロッパー ツール」の順で選択するか、`Ctrl (Cmd) + Shift (Option) + I`、`F12`といったショートカットキーを利用します。 - -![要素の検証](01/inspect-element.png) - -また、Web ページ上で右クリックすれば、そこにある HTML 要素を直接開発者ツール上で開くこともできます。Chrome だけでなく Safari や Firefox などのブラウザにも同じような機能が搭載されています。 diff --git a/docs/9-old/day02/01/inspect-element.png b/docs/9-old/day02/01/inspect-element.png deleted file mode 100644 index 5205552a1..000000000 Binary files a/docs/9-old/day02/01/inspect-element.png and /dev/null differ diff --git a/docs/9-old/day02/01/open-developer-tool.png b/docs/9-old/day02/01/open-developer-tool.png deleted file mode 100644 index da27cfd97..000000000 Binary files a/docs/9-old/day02/01/open-developer-tool.png and /dev/null differ diff --git a/docs/9-old/day02/02.mdx b/docs/9-old/day02/02.mdx deleted file mode 100644 index b4bc5a35a..000000000 --- a/docs/9-old/day02/02.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: JavaScriptの記述 ---- - -これまでに学習してきた HTML や CSS は、プログラミング言語というよりは**マークアップ言語**です。これに対し、**JavaScript**はブラウザ上で動作する唯一のプログラミング言語です。張り切って学習していきましょう。 - -## HTML ファイル中に JavaScript を記述する - -```html - - - -``` - -JavaScript を記述するには、`script`タグを使用します。`document.write('Hello World!');`は、ブラウザ上に`Hello World!`と表示させるプログラムです。 - -## 外部ファイル中の JavaScript を利用する - -CSS と同じように、JavaScript も外部ファイルに切り出すことができます。JavaScript を外部ファイルに記述する場合は、`script`タグに`src`属性を指定します。 - -```html title="index.html" - -``` - -```js title="script.js" -document.write("Hello World!"); -``` - -`script`タグに`src`属性を指定する場合、中身は必要ありませんが、閉じタグを省略することは許されていません。 diff --git a/docs/9-old/day02/03.mdx b/docs/9-old/day02/03.mdx deleted file mode 100644 index 6544b0301..000000000 --- a/docs/9-old/day02/03.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: JavaScriptによるプログラミング ---- - -:::info -この記事は、プログラミングが未経験の方を対象にしています。経験者の方で、歯応えのある内容をお求めの場合は[JavaScript Primer](https://jsprimer.net)をお勧めします。 -::: - -## プログラムの実行順序と文 - -JavaScript において、セミコロン（`;`）で終わるまとまりを**文**と呼びます。JavaScript は、ファイルの先頭から終わりに向けて、順番に文が実行されます。 - -{/* prettier-ignore */} -```js -document.write('Hello'); document.write('My'); -document.write('Special'); document.write('World'); -``` - -``` -HelloMySpecialWorld -``` - -:::info -JavaScript には行という概念が存在しません。改行は区切り文字にはなりますが、スペースと意味上の違いはありません。 -::: - -:::info -JavaScript では、文脈を判断してセミコロンを自動的に挿入する機能（AST）がありますが、混乱を避けるためこの教材では常にセミコロンを記述するものとします。 -::: - -サンプルコードの一部を変更して、表示がどのように変わるのか確認してみましょう。 - -## コメント - -`/**`と`*/`に囲まれた部分と、`//`から行末までの範囲は**コメント**と呼ばれ、メモなどを書くために用いられます。プログラムとして解釈されることはありません。 - -```js -document.write("Hello World"); // ここはコメントです。 -/** 複数行の -コメントも -書けます */ -``` diff --git a/docs/9-old/day02/04.mdx b/docs/9-old/day02/04.mdx deleted file mode 100644 index 29dea32b7..000000000 --- a/docs/9-old/day02/04.mdx +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 値と式と演算子 ---- - -次のコードを実行すると、`Hello World`が画面に表示されました。 - -```js -document.write("Hello World"); -``` - -`'Hello World'`のように`'`（シングルクォーテーション）で囲まれた値を、**文字列**と呼びます。これに対し、**数値**は文字列と同じ、値の一種ですが、プログラムの中に直接記述することができます。 - -```js -document.write(3); -``` - -**演算子**を用いると、値を用いて計算をすることができます。例えば`+`（加算演算子）で、足し算の計算を行うことができます。 - -```js -document.write(3 + 4); -``` - -演算子には優先順位が設定されています。 - -```js -document.write(3 + 4 * 5); -``` - -`*`（乗算演算子）は`+`より優先順位が高く設定されているため、上記のコードの実行結果は`23`となります。 - -このコードにおいて、`3 + 4 * 5`や、`4 * 5`、`4`を**式**と呼び、式が計算され、その値が確定することを式が**評価**されるといいます。`3 + 4 * 5`は、先に`4 * 5`が評価されて`20`になり、次に`3 + 20`が評価されることにより、`23`という値となると考えることができます。 - -演算子が適用できるのは、何も数値だけではありません。文字列に適用できる演算子もあります。先ほどの`+`（加算演算子）は、文字列同士で使用された場合は、文字列結合演算子となります。 - -```js -document.write("Hello" + "World"); -``` - -画面には`HelloWorld`と表示されるはずです。それでは、以下の２つのプログラムの実行結果はどうなるでしょうか。 - -```js -document.write(3 + 4 + "Hello"); -``` - -```js -document.write("Hello" + 1 + 2); -``` - -この場合、演算子の**結合規則**を考えます。`+`の結合規則は左から右なので、`3 + 4 + 'Hello'`は`(3 + 4) + 'Hello'`、`'Hello' + 1 + 2`は`('Hello' + 1) + 2`と解釈されることになります。 - -`+`は、両辺が数値の場合のみ加算演算子として振る舞い、片方が数値で片方が文字列の場合は数値を文字列に変換してから文字列結合演算子として機能します。このため、最終的な式全体の評価結果は前者が`7Hello`、後者が`Hello12`となるのです。 - -:::tip -改行が表示されず困っていますか？`document.write`は HTML タグを出力できます。`
`を用いたり、`p`タグで囲んでみたりしてみましょう。 -::: diff --git a/docs/9-old/day02/05.mdx b/docs/9-old/day02/05.mdx deleted file mode 100644 index d43bec2d0..000000000 --- a/docs/9-old/day02/05.mdx +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 変数と定数 ---- - -**変数**を用いると、式の値を一時的に保存し、再利用することができます。数学における変数は通常数値ですが、プログラムにおける変数は、文字列等、全ての種類の「値」を格納することができます。 - -## 変数の宣言と使用 - -変数を使用するには、まず変数を**宣言**する必要があります。 - -```js -let myGreatName; -myGreatName = "Becky Jones"; -document.write(myGreatName); -``` - -1 行目の`let myGreatName;`で、`myGreatName`という名前の変数を宣言しています。`let`は、変数宣言のためのキーワードです。 - -続いて 2 行目では、変数`myGreatName`に文字列`'Becky Jones'`を**代入**しています。`=`は**代入演算子**で、左側に指定した変数に対し、右側に指定された値を代入します。 - -3 行目では、変数`myGreatName`が評価され、代入されていた文字列値`'Becky Jones'`が画面に表示されます。 - -:::tip -変数名の長さに特に制限はありません。どれだけ長くなったとしても、その変数が持っている値を正確に表す命名を心がけましょう。JavaScript の変数は通常、名前に含まれる 2 つ目以降の単語の先頭文字を大文字にすることで、単語の区切りを表します。 - -上の例では、`my great name`という意味を表現して、`myGreatName`のように記述しています。 - -このような**命名規則**を、**キャメルケース**と呼びます。 -::: - -```js -let myBirthday = "2000/01/01", - yourAge = 20; -``` - -`let`キーワードを用いた変数宣言では、宣言と同時に値を代入（**初期化**）したり、コンマで区切って複数の変数を同時に宣言したりすることができます。 - -上記の例では、変数`myBirthday`と`yourAge`に、それぞれ文字列`'2000/01/01'`と、数値`20`を代入しています。 - -## 変数の性質 - -変数は、最後に代入された値のみを保持する性質があります。 - -```js -let mysteriousNumber = 0; -mysteriousNumber = 1; -mysteriousNumber = 2; -document.write(mysteriousNumber); -``` - -変数`mysteriousNumber`は 3 回代入されていますが、最後に代入された`2`が表示されます。 - -以下の場合はどうでしょうか。 - -```js -let price = 100; -price = price / 2; -document.write(price); -``` - -`price = price / 2`はどう解釈されるべきなのでしょうか。演算子の優先順位を考えれば良いですね。 - -`=`（代入演算子）は非常に優先順位の低い演算子です。このため、`/`（除算演算子）の部分が先に評価されます。`price = price / 2`、`price = 100 / 2`、`price = 50`のような順番で計算が進められ、最終的に`price`は`50`となります。 - -## 定数 - -`const`キーワードを用いると、**定数**を宣言することができます。定数は宣言時のみ値を決定することができ、再代入が許されません。 - -```js -const taxRatio = 1.1; -// ↓許されない -// taxRatio = 1.2; -``` - -:::tip -JavaScript では、`const`を用いた定数宣言が`let`よりも圧倒的に多いです。これは、`const`を用いて宣言された定数は宣言文のみからその値を知ることができるのに対し、`let`を用いて宣言された変数はその代入の過程を都度追っていかなければならないためです。 -::: diff --git a/docs/9-old/day02/06.mdx b/docs/9-old/day02/06.mdx deleted file mode 100644 index c29d774c6..000000000 --- a/docs/9-old/day02/06.mdx +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 論理値と論理演算子 ---- - -JavaScript で利用できる「値」として、文字列と数値を扱いました。JavaScript では他に、**論理値**と呼ばれる、「正しいか、正しくないか」を表すための値の種類が存在します。 - -論理値は、`true`（真）または`false`（偽）の２つだけです。通常の値ですので、変数に代入したり、計算することも可能です。 - -## 論理演算子 - -```js -const isMonsterBig = true; -const isMonsterSmall = !true; // false -const isHunterStrong = false; -const shouldEscape = !isHunterStrong && isMonsterBig; // true -const shouldFight = isHunterStrong || isMonsterSmall; // false -``` - -論理値に対してよく使用される演算子に、`!`、`&&`、`||`があります。 - -`!`は**単項演算子**の一種で、作用する値の`true`と`false`を反転させます。`&&`は両辺が共に`true`のとき`true`、`||`は両辺のいずれかが`true`のとき`true`になります。 - -:::tip -論理値が代入されている変数は、通常`is`や`can`、`should`などの単語を先頭に置き、Yes / No 疑問文と同様の語順をとる場合が多いです。現在形の動詞を用いる場合は、三人称単数とします（`userExists`等）。 -::: - -## 比較演算子 - -比較演算子を用いると、複数の値を比較して、その結果の論理値を得ることができます。 - -```js -const age = 15; -const height = 155; -const isFourteen = age === 14; // false -const isNotFourteen = age !== 14; // true -const isChild = age < 20; // true -const canRideRollerCoasters = age >= 10 && height >= 140; // true -``` - -`===`は両辺が等しいとき、`!==`は両辺が等しくないときに`true`となります。`<`や`>=`などは見ての通りです。なお、`&&`や`||`よりも比較演算子の方が優先度が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。 - -:::danger -`=`は比較演算子ではありません。常に代入演算子です。 - -``` -let age = 15; -let isTwenty = age = 20; -``` - -上記のプログラムの 2 行目において、まずは`age = 20`の部分が評価され、`age`に`20`が代入されます。実は、代入演算子の式の値は右辺そのままの値です。そのため、このプログラムは最終的に`let isTwenty = 20`となり、定数`isTwenty`には論理値ではなくただの数値である`20`が代入されてしまいます。 -::: diff --git a/docs/9-old/day02/07.mdx b/docs/9-old/day02/07.mdx deleted file mode 100644 index d779595b4..000000000 --- a/docs/9-old/day02/07.mdx +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: if文 ---- - -`if`文を用いると、特定の条件下のみで実行されるプログラムを記述することができます。 - -## 基本構造 - -```js -const age = 18; -if (age >= 20) { - document.write("大人です。"); -} else { - document.write("子供です。"); -} -``` - -2 行目の`if (age >= 20) {`の部分に差し掛かると、まずは括弧内の`age >= 20`が評価されます。この式の値は`false`なので、 - -```js -if (false) { - document.write("大人です。"); -} else { - document.write("子供です。"); -} -``` - -`if`文の基本構造は - -``` -if (式) 文1 else 文2 -``` - -です。式の値が`true`であれば文 1 が、`false`であれば文 2 が実行されます。よって、上記の例では`子供です。`が表示されます。 - -なお、`else`と文 2 は省略することもできます。 - -:::tip -`{`から`}`で囲まれた部分のことを**ブロック**と呼び、複数の文をグループ化することができます。上の例では文は 1 つずつなのでこの括弧は必要ありませんが、複数の文を入れる場合は必ず必要になります。 - -ブロックを作る場合は、適切に**インデント**（字下げ）を行いましょう。上の例では、2 行目と 4 行目のみが、他の部分と比べ**スペース 2 文字分**だけ下がっていることが分かります。 -::: - -## ネストされた if 文と else if - -制御構造は、入れ子（**ネスト**）にすることで、より複雑な処理を記述できます。 - -```js -const age = 19; -if (age >= 20) { - document.write("入場できます。"); -} else { - if (age >= 18) { - document.write("条件付きで入場できます。"); - } else { - document.write("入場できません。"); - } -} -``` - -以上の例では、`age`が - -- 20 以上であれば、`入場できます。`と表示 -- 18 以上であれば、`条件付きで入場できます。`と表示 -- それ以外であれば、`入場できません。`と表示 - -という形になっています。ただし、この場合、外側の`else`に続く括弧内の文は`if`文ひとつのみですので、括弧を省略して - -```js -const age = 19; -if (age >= 20) { - document.write("入場できます。"); -} else if (age >= 18) { - document.write("条件付きで入場できます。"); -} else { - document.write("入場できません。"); -} -``` - -のようにする場合が多いです。 - -## truthy と falsy - -次のコードの実行結果はどうなるでしょうか。 - -```js -if ("Hello World!") { - document.write("trueです。"); -} else { - document.write("falseです。"); -} -``` - -JavaScript では次のような値は、論理演算において`false`と同様に扱われます。 - -- `0` (数値) -- `''` (空文字列) - -などです。このような値を**falsy**な値であるといいます。falsy でない値はすべて`true`と同様、すなわち**truthy**な値です。よって、上の例では`trueです。`が表示されます。 - -## 課題 - -生まれた年を格納した変数を予め用意し、その年がうるう年かどうかを判定して表示するプログラムを作成してください。ただし、うるう年とは、西暦年が以下のいずれかの条件を満たす年であるものとします。 - -- 400 で割り切れる -- 100 で割り切れないが、4 で割り切れる - -:::tip -`%`は**剰余演算子**と呼ばれ、除算の剰余を求めることができます。 -::: diff --git a/docs/9-old/day02/08.mdx b/docs/9-old/day02/08.mdx deleted file mode 100644 index 2c50bb057..000000000 --- a/docs/9-old/day02/08.mdx +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: while文とfor文 ---- - -## while 文の基本構造 - -`while`文は、以下の構造をとります。 - -``` -while (式) 文 -``` - -`while`は、式の値が truthy であれば、文を実行します。文の実行が終わったら、もう一度式を評価するところからやり直します。この繰り返しです。例を見てみましょう。 - -```js -let i = 0; -while (i < 3) { - document.write(i); - i++; -} -``` - -``` -123 -``` - -`++`は**インクリメント演算子**と呼ばれる単項演算子で、作用する変数に 1 を直接加えます。 - -プログラムの実行の流れを順に追っていきましょう。まずは`i < 3`、つまり`0 < 3`が評価され、`true`になります。`true`は明らかに truthy なので、ブロック内の文が実行されます。 - -`document.write`により`0`が表示され、続けてインクリメント演算子により`i`の値が`0`から`1`に増えます。 - -ブロック内の文の実行が終わったので、再度式を評価します。`i < 3`は`1 < 3`ですのでやはり`true`です。ブロックが実行されます。 - -以上を`i = 3`となるまで繰り返します。 - -## for 文の基本構造 - -上記の`while`文の例は`for`文を用いると以下のように書き直すことができます。 - -```js -for (let i = 0; i < 3; i++) { - document.write(i); -} -``` - -非常にシンプルになりました。`for`文は、以下のような構造をとります。 - -``` -for (初期化; 条件; 再設定) 文 -``` - -`while`文で置き換えたとき、`初期化`の部分が`while`文より手前に、`条件`の部分が`while`文の条件式に、`再設定`の部分が`while`文の中のブロックの末尾に入ると考えられます。 - -## 課題 - -Fizz Buzz 問題と呼ばれる有名な問題があります。`for`文と`if`文を用いて実装してみましょう。 - -Fizz Buzz 問題とは、1 から 100 までの整数に対して、それぞれ以下の処理を実行するものです。 - -- 3 の倍数なら`Fizz`と表示 -- 5 の倍数なら`Buzz`と表示 -- 3 と 5 の公倍数なら`FizzBuzz`と表示 -- 以上のいずれにも当てはまらない場合はその数字を表示 - -出力は以下のようになります。 - -``` -1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 ... -``` diff --git a/docs/9-old/day02/09.mdx b/docs/9-old/day02/09.mdx deleted file mode 100644 index dbd155ed1..000000000 --- a/docs/9-old/day02/09.mdx +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 関数 ---- - -## 処理の共通化 - -次のコードを見てください。 - -```js -let sum1To10 = 0; -for (let i = 1; i <= 10; i++) { - sum1To10 += i; -} -document.write(`

1から10の和は${sum1To10}です。

`); - -let sum6To18 = 0; -for (let i = 6; i <= 8; i++) { - sum6To18 += i; -} -document.write(`

6から18の和は${sum6To18}です。

`); -``` - -:::note - -- `+=`は**加算代入演算子**で、左辺の変数に右辺の式の値を加えます。式自体の評価結果は加算後の変数の値です。 -- `` ` ``（バッククォート）は**テンプレートリテラル**と呼ばれ、文字列中の`${`から`}`に囲まれた部分を JavaScript の式として評価して文字列中に展開します。 - -::: - -見ての通り、1 ～ 10、6 ～ 18、それぞれの和を計算して表示するプログラムです。しかしながら、前半と後半で重複する部分が多く、無駄な感じがします。 - -:::tip -情報の重複を許さないというルールは**DRY 原則**（Don't Repeat Yourself）と呼ばれ、高品質な製品を実現するための基本的な枠組みとなっています。 -::: - -## 純粋な関数 - -**関数**を用いると、決まった処理をひとまとまりとして扱い、その処理に名前を付けることができます。 - -```js -function sum(from, to) { - let result = 0; - for (let i = from; i <= to; i++) { - result += i; - } - return result; -} - -document.write(`

1から10の和は${sum(1, 10)}です。

`); -document.write(`

6から18の和は${sum(6, 8)}です。

`); -``` - -JavaScript における関数は、`function`キーワードから始まる 1 つのブロックです。 - -関数は、**引数**（ひきすう）をとることができます。`sum(from, to)`の`from`や`to`を**仮引数**と呼び、関数内でその引数の値を扱うための変数となります。 - -関数を呼び出す側、例えば`sum(1, 10)`における`1`や`10`を**実引数**と呼びます。この場合、`sum`関数側では`from`に`1`が、`to`に`10`が代入されて実行されます。 - -`return`文は、関数の中で到達すると、その時点で関数の実行を中断し、式の評価結果を確定させます。`sum(1, 10)`を実行して`return result;`まで到達したとき、`result`は`55`ですので、式`sum(1, 10)`の評価結果は`55`となります。関数の評価結果を、その関数の**戻り値**と呼びます。 - -## 副作用を持つ関数 - -関数は、数学のそれとは異なり、あくまでも処理のまとまりであって、値を返す必要はありません。上のコードは、以下のように書き直すことができます。 - -```js -function showSum(from, to) { - let result = 0; - for (let i = from; i <= to; i++) { - result += i; - } - document.write(`

${from}から${to}の和は${result}です。

`); -} - -showSum(1, 10); -showSum(6, 18); -``` - -上記の例において、`showSum`は`from`から`to`までの合計を計算して表示するための関数です。`return`文が存在しないので、値を返すことはありません。 - -:::tip -上記の`sum`のように、数学の関数と同じく、引数を受け取って値を帰すだけの関数を、**純粋な関数**と呼びます。 - -`showSum`は、関数内で画面に文字を表示するという、関数の外界に影響を及ぼす処理（**副作用**）を行っています。副作用を持つ関数は純粋な関数ではありません。 - -`document.write`は、文字列を受け取ってそれを画面に表示させる、副作用を持つ関数であるといえます。 -::: - -## 課題 - -文字列`str`と整数`count`を受け取り、`str`を`count`回繰り返し結合してその文字列を返す関数`repeat(str, count)`を作成してください。 - -```js -document.write(repeat("*", 6)); // ****** -``` - -のようにして、作成した関数を実際に実行してみてください。 - -:::info -加算代入演算子は、`+`と同じく、文字列結合の用途にも使用できます。 -::: diff --git a/docs/9-old/day02/10.mdx b/docs/9-old/day02/10.mdx deleted file mode 100644 index ec8974ae1..000000000 --- a/docs/9-old/day02/10.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: デバッグ ---- - -プログラムが誤っているとき、当然ながらプログラムは動作しません。この誤りを**バグ**と呼びます。バグを消すための操作を**デバッグ**と呼びます。デバッグには、以前学習した開発者ツールを利用することができます。 - -## console.log - -ブラウザ上で動作する JavaScript のプログラムで`console.log`が呼ばれると、開発者ツールの**コンソール**にその値が表示されます。 - -```js -console.log("Hello World!"); -``` - -開発者ツールを確認してみましょう。 - -![コンソールに表示されたHello World](10/console.png) - -## デバッガ - -**デバッガ**は、デバッグを支援するためのソフトウェアです。ブラウザの開発者ツールには、JavaScript 向けの非常に強力なデバッガが搭載されています。 - -以下のコードを実行してみましょう。 - -```js title="script.js" -for (let i = 0; i < 10; i++) { - console.log(i); -} -``` - -Chrome の開発者ツールでは、`Sources`タブで記述されている HTML や CSS、JavaScript ファイルの内容を表示できます。先ほど記述した`script.js`の 2 行目の、**行番号の左側**をクリックしてみましょう。丸い記号が表示されるはずです。 - -![ブレークポイントの設置](10/set-breakpoint.png) - -これは、**ブレークポイント**と呼ばれる、プログラムの実行を一時的に中断するための機能です。ブレークポイントが実際に動作することを確認するため、ページをリロードしてみましょう。 - -![変数の値の表示](10/inspect-variables.png) - -プログラムの実行が一時中断されました。この状態で、変数名にカーソルを合わせると、その時点での変数の値が表示されます。また、画像中では右側に表示されているパネルには、定義されている変数の一覧も表示されていることがわかります。 - -再生ボタンを押すと、プログラムの実行が再開されます。上記の例の場合は、次のループでもう一度 2 行目が実行されるため、そこでまたプログラムが中断されます。10 回のループの間に、変数の値がどのように変化しているかを観察してみてください。 - -:::tip -再生ボタンの右隣にある 3 つのアイコンは、順に**ステップオーバー**、**ステップイン**、**ステップアウト**です。 - -ステップオーバーを利用すると、プログラムの実行が次の文に移動します。ステップインの動作はステップオーバーの動作と似ていますが、実行中の文に関数が含まれる場合、その内部に移動します。ステップアウトは、現在処理している関数の処理を抜けたところまで実行します。 -::: diff --git a/docs/9-old/day02/10/console.png b/docs/9-old/day02/10/console.png deleted file mode 100644 index 78ccf1b2f..000000000 Binary files a/docs/9-old/day02/10/console.png and /dev/null differ diff --git a/docs/9-old/day02/10/inspect-variables.png b/docs/9-old/day02/10/inspect-variables.png deleted file mode 100644 index 491d240e9..000000000 Binary files a/docs/9-old/day02/10/inspect-variables.png and /dev/null differ diff --git a/docs/9-old/day02/10/set-breakpoint.png b/docs/9-old/day02/10/set-breakpoint.png deleted file mode 100644 index 92fd972b3..000000000 Binary files a/docs/9-old/day02/10/set-breakpoint.png and /dev/null differ diff --git a/docs/9-old/day03/01.mdx b/docs/9-old/day03/01.mdx deleted file mode 100644 index afd3e5c43..000000000 --- a/docs/9-old/day03/01.mdx +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: オブジェクト ---- - -今まで扱ってきた JavaScript の「値」は、文字列、数値、論理値の 3 つでした。**オブジェクト**は、複数の値をひとまとまりにして**名前と値のペア**で管理できる、新たな種類の値です。また、JavaScript におけるオブジェクトではない値を総称して、**プリミティブ**な値といいます。 - -## オブジェクトの生成 - -```js -const student1 = { - name: "Becky Jones", - age: 20, -}; -document.write( - `Hello. I am ${student1.name}. I am ${student1["age"]} years old.`, -); -``` - -オブジェクトを生成するには、`{`から`}`までで表される**オブジェクトリテラル**を用います。括弧内では、`名前: 値`のペアをコンマで区切って記述します。 - -:::tip -**リテラル**とは、値を直接生成するための構文です。たとえば、`3`は数値を生成するための数値リテラルですし、`'Hello'`は文字列を生成するための文字列リテラルです。 -::: - -オブジェクトの内部にアクセスするためには、ドット記法（`.`）またはブラケット記法（`[]`）を用います。多くの場合、`student1.name`と`student1['name']`は等価です。可読性の観点からドット記法を用いる場合がほとんどですが、ブラケット記法では内部に式を記述できるため、アクセスするプロパティを動的に制御することができます。 - -## ネストされたオブジェクト - -`student1.name`や`student1.age`を、`student1`の**プロパティ**と呼びます。プロパティには任意の値を含むことができるため、当然のことながらオブジェクトのプロパティにオブジェクトを指定することもできます。 - -```js -const student2 = { - name: "Sakura", - scores: { - math: 90, - science: 80, - }, -}; -document.write(`student2の数学の点数は${student2.scores.math}です。`); -``` - -上記の例において、`student2`の`scores`プロパティには、オブジェクト`{ math: 90, science: 80 }`が指定されています。このオブジェクトの`math`プロパティにアクセスするために、`student2.scores.math`と記述しています。 - -## オブジェクトを引数や戻り値に持つ関数 - -オブジェクトも値の一種ですので、当然のことながら関数の引数として渡したり、戻り値として返したりすることができます。 - -```js -function introduce(person) { - document.write(`I am ${person.name}. I am ${person.age} years old.`); -} -introduce({ name: "Becky Jones", age: 20 }); -``` - -上の例では、`introduce`関数に`name`プロパティと`age`プロパティを持つオブジェクトを渡しています。 - -## オブジェクトと参照 - -次のコードの実行結果を予想してみてください。 - -```js -const taro = { - name: "太郎", - age: 20, -}; - -const hanako = taro; -hanako.name = "花子"; - -document.write(taro.name); -``` - -驚くべきことに、このプログラムの実行結果は`花子`になります。というよりそもそも、`const`で宣言したはずの変数`hanako`に再代入が行われているように見えますが、これは許されるのでしょうか。 - -この結果のカラクリは、JavaScript の持つ**参照**という仕組みにあります。実は、 - -```js -{ name: '太郎', age: 20 }; -``` - -のようにオブジェクトリテラルを使用したとき、この式の値は、オブジェクトそのものではありません。オブジェクト自体はメモリ（コンピューターが一時的に値を保存しておく場所）に生成されるのですが、その式の値は生成されたオブジェクトへの参照、つまり場所を指し示す値でしかないのです。 - -![オブジェクトへの参照](01/object-reference.png) - -```js -taro.age = 18; -``` - -などとしても`taro`自体が書き換えられるわけではなく、参照が指し示す値を書き換えているだけに過ぎません。このため、`const`による制約は満たされているのです。 - -上の例では、`taro`の値を`hanako`に代入することにより、`taro`が持っていたオブジェクトへの参照と同じものを`hanako`が持つことになります。参照先のオブジェクトは全く同じものですので、`hanako.name`を変更した場合、`taro.name`も書き変わってしまうことになるのです。 - -## 課題 - -以下のコードを実行したのち、変数`sakura`はどのような値となるでしょうか。 - -```js -const sakura = { - name: "Sakura", - scores: { - math: 90, - science: 80, - }, -}; -let sakuraScores = sakura.scores; -sakuraScores.math = 100; -sakuraScores = { - math: 80, - science: 90, -}; -``` - -なお、オブジェクトの中身を見るためには、開発者ツールを利用すると便利です。ネストされたオブジェクトも、ツリー形式で簡単に表示できます。`console.log`をしたり、ブレークポイントで止めたりして変数の値を確認してみましょう。`debugger`文を使用することもできます。 diff --git a/docs/9-old/day03/01/object-reference.png b/docs/9-old/day03/01/object-reference.png deleted file mode 100644 index e7c48dea0..000000000 Binary files a/docs/9-old/day03/01/object-reference.png and /dev/null differ diff --git a/docs/9-old/day03/02.mdx b/docs/9-old/day03/02.mdx deleted file mode 100644 index 81da0c6dc..000000000 --- a/docs/9-old/day03/02.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 配列 ---- - -:::note -JavaScript の配列は、他の言語とかなり異なる性質を持っています。他の言語の経験がある方は注意して読むようにしてください。 -::: - -## 配列の生成 - -JavaScript における**配列**（Array）は、キーが数値であるオブジェクトです。**配列リテラル**を用いて生成します。 - -```js -const myFriends = ["Taro", "Hanako", "Becky"]; -document.write(myFriends[1]); // Hanako -document.write(myFriends.length); // 3 -``` - -配列リテラルでは、`[`から`]`までの領域の中に、複数の値をコンマ区切りで記述します。各値には 0 から始まる整数が自動的にキーとして割り当てられます。キー名が数値となっているため、各要素（プロパティ）にアクセスするためには、ブラケット記法を使用する必要があります。つまり、`myFriends.1`という記法はエラーとなります。 - -`['A', 'B', 'C']`のようにして生成された配列は、`{ 0: 'A', 1: 'B', 2: 'C' }`というオブジェクトと似ていますが、異なる点もあります。そのひとつが`length`プロパティです。配列には`length`プロパティが自動的に定義され、配列の長さを表します。 - -## 配列の要素を列挙する - -`for`文を使用すると、配列の要素を列挙させることができます。 - -```js -for (let i = 0; i < myFriends.length; i++) { - document.write(myFriends[i]); -} -``` - -`length`プロパティにより配列の要素数を取得することができるので、それを条件式の中で利用しましょう。 - -`for`文には、配列のようなオブジェクトの、全ての要素を列挙するための専用の記法が存在しています。`for 〜 of`ループです。 - -```js -for (const myFriend of myFriends) { - document.write(myFriend); -} -``` - -`for (const 変数 of 配列)`とすることで、配列の各要素を変数に代入しながらループを回すことができます。なお、`for 〜 of`ループの中では`const`が使用できることに注意してください。 - -## ネストされた配列 - -配列の要素には、任意の値を格納できます。当然のことながら、配列自体を配列の中に格納することもできます。このような配列を、**多次元配列**と呼びます。 - -```js -const multidimensionalArray = [ - [1, 2, 3, 4, 5], - [6, 7, 8, 9, 10], -]; -document.write(multidimensionalArray[1][2]); // 8 -``` - -この場合、`multidimensionalArray[1]`の部分がまず評価され、`[6, 7, 8, 9, 10]`となります。続いて、`[6, 7, 8, 9, 10][2]`が評価され、`8`が表示されます。 - -## オブジェクトと配列 - -配列の要素にオブジェクトを使用することもできます。以下は非常によく使用される例です。 - -```js -const students = [ - { name: "Ichiro", age: 20 }, - { name: "Jiro", age: 19 }, - { name: "Saburo", age: 18 }, -]; -document.write(students[2].age); // 18 -``` - -この場合、`students[2]`の部分がまず評価され、`{ name: 'Saburo', age: 18 }`となります。続いて、`{ name: 'Saburo', age: 18 }.age`が評価され、`18`となります。 - -## 課題 - -`for ～ of`ループにより`students`の中から`name`が`Jiro`である生徒を検索し、その年齢を表示させてください。 diff --git a/docs/9-old/day03/03.mdx b/docs/9-old/day03/03.mdx deleted file mode 100644 index 2cd3c19ac..000000000 --- a/docs/9-old/day03/03.mdx +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: DOM ---- - -**DOM**（Document Object Model）は、HTML 構造を JavaScript のオブジェクトとして扱うための枠組みです。HTML と CSS のすべての機能は、JavaScript 側から操作することが可能になっています。 - -## DOM 要素を取得する - -HTML 要素を DOM オブジェクトとして取得するもっとも単純な方法は、`document.getElementById`を使用する方法です。 - -```html title="HTML" -
Hello World
-``` - -```js title="JavaScript" -const element = document.getElementById("element"); -element.textContent = "Hello DOM"; -``` - -`document.getElementById`を使用すると、HTML 中に存在する特定の ID を持つ要素を取得することができます。このオブジェクトは`textContent`プロパティを持ち、HTML タグの内部のテキストに対応します。 - -## DOM 要素のスタイルシートを変更する - -DOM オブジェクトの`style`プロパティは、すべての CSS の値を含むオブジェクトです。オブジェクトのキーが、CSS のプロパティ名をキャメルケースに変換したものに対応します。 - -```js -element.style.backgroundColor = "red"; -``` - -CSS のプロパティ名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。このため、DOM では、CSS のプロパティ名はキャメルケースで扱うルールとなっています。 - -## CSS セレクタを使用して要素を取得する - -`document.querySelector`を使用すると、CSS セレクタを使用して要素を取得することができます。 - -```js -const element = document.querySelector("#container div:hover"); -``` - -また、`document.querySelectorAll`を用いると、CSS セレクタにマッチするすべての要素を、配列と同じような形式で取得することができます。 - -```js -const elements = document.querySelectorAll("#container div"); -for (const element of elements) { - element.style.color = "red"; -} -``` - -以上の例では、CSS セレクタ`#container div`にマッチするすべての要素の文字色が赤色に変更されます。 - -## 課題 - -{/* prettier-ignore */} -```html - - - - - - - - - - - -
123456789
1
2
3
4
5
6
7
8
9
-``` - -JavaScript ですべての`td`要素を取得し、九九の表を完成させましょう。なお、`document.querySelectorAll`の戻り値は、HTML で出現した順番に並べられています。この事実を利用して構いません。 diff --git a/docs/9-old/day03/04.mdx b/docs/9-old/day03/04.mdx deleted file mode 100644 index 7cd4512f0..000000000 --- a/docs/9-old/day03/04.mdx +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: 関数とオブジェクト ---- - -JavaScript においては、関数も一種のオブジェクトです。関数自体を数値や文字列と同じく通常の値として扱うことができます。 - -:::tip -関数のこのような性質を**第一級関数**と呼びます。 -::: - -## 関数を変数に代入する - -```js -function doSomething() { - document.write("Hello World!"); -} - -const someVariable = doSomething; -someVariable(); -``` - -上の例では、関数`doSomething`を`someVariable`に代入しています。関数が入った変数は、そのまま通常の関数と同様に使用できます。 - -## 関数を関数の引数として使用する - -```js -function callTwice(callback) { - callback(); - callback(); -} - -function sayHello() { - document.write("Hello"); -} - -callTwice(sayHello); -``` - -`callTwice`の内部の`callback`には関数が格納されているので、そのまま実行することができます。 - -## 無名関数 - -**無名関数**とは、名前を持たない関数のことです。**アロー関数式**は、JavaScript において無名関数を生成する式の一種です。 - -先ほどの例を、無名関数を用いて書き換えてみましょう。 - -```js -callTwice(() => { - document.write("Hello"); -}); -``` - -アロー関数式は、`(引数) => { 処理 }`の形をとります。上記の例では、`() => { document.write('Hello'); }`の部分が、引数を取らず、`Hello`と表示する無名関数を生成する式となっています。 - -## アロー関数式の省略形 - -アロー関数式には、2 つの省略記法が存在しています。両方を組み合わせることも可能です。 - -### 引数の括弧の省略 - -アロー関数の引数が 1 個だけのとき、引数の括弧は省略できます。 - -```js -(x) => { - return x * 2; -}; -``` - -は、 - -{/* prettier-ignore */} -```js -x => { - return x * 2; -}; -``` - -のように省略できます。 - -### `return`文とブロックの括弧の省略 - -アロー関数式内が`return`文ただ 1 つのとき、`return`文と波括弧が省略できます。 - -```js -(x) => { - return x * 2; -}; -``` - -は、 - -```js -(x) => x * 2; -``` - -のように省略できます。 - -## 課題 - -```js -function map1To10(callback) { - const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; - for (let i = 0; i < numbers.length; i++) { - numbers[i] = callback(numbers[i]); - } - return numbers; -} -``` - -`map1To10`を適切に呼び出して、以下の戻り値を得てください。 - -```js -[3, 6, 9, 12, 15, 18, 21, 24, 27, 30]; -``` diff --git a/docs/9-old/day03/05.mdx b/docs/9-old/day03/05.mdx deleted file mode 100644 index b450cec12..000000000 --- a/docs/9-old/day03/05.mdx +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: イベントハンドラ ---- - -DOM 要素に対し、何らかのアクション（**イベント**）が起こった際の反応（**イベントハンドラ**）を定義することができます。 - -```html - -``` - -```js -document.getElementById("amazing-button").onclick = () => { - alert("びっくり！"); -}; -``` - -DOM オブジェクトの`onclick`プロパティには、その要素がクリックされた時に呼ばれる関数を指定します。今回は、アロー関数式を用いて、`() => { alert('びっくり！'); }`という関数を指定しています。 - -:::tip -`alert`は、画面上にモーダルダイアログボックスを表示させる関数です。 -::: - -:::warning -この記事以降、`document.write`は一切使用しません。これは、`document.write`をページの読み込みが完了した状態で実行すると、ページの内容を全て消去してしまうためです。何かを出力する必要がある場合は、代わりに`console.log`を使用しましょう。 -::: - -## イベントオブジェクト - -イベントハンドラには、**イベントオブジェクト**と呼ばれる、起きたイベントの詳細を表すオブジェクトが引数として渡される場合が多いです。イベントオブジェクトを受け取る引数名には、`e`を使う場合が多いです。 - -```html - -``` - -```js -document.querySelector("input").onkeydown = (e) => { - console.log(e.key); -}; -``` - -`keydown`イベントのイベントオブジェクトには、押されたキーが格納されている、`key`プロパティがあります。 - -## 課題 - -`0`を表示する`div`要素とボタンをひとつ用意し、ボタンがクリックされるたびに`div`要素内部に表示されている値を 1 ずつ増やすプログラムを作成してください。 diff --git a/docs/9-old/day03/06.mdx b/docs/9-old/day03/06.mdx deleted file mode 100644 index 1dfdc84d8..000000000 --- a/docs/9-old/day03/06.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: メソッド ---- - -:::note -この章では、一般的なプログラミング言語におけるメソッドとは若干異なる概念である、JavaScript のメソッドについて説明します。他のプログラミング言語の経験がある方は注意して読んでください。 -::: - -## メソッドの作成 - -JavaScript において、関数は一種の値ですので、当然のことながらオブジェクトのプロパティとして使用することもできます。このような関数のことを`メソッド`と呼んでいます。 - -```js -const someObject = { - someMethod: () => { - console.log("Method called"); - }, -}; - -someObject.someMethod(); -``` - -上記の例において、`someMethod`は`someObject`のメソッドである、といいます。 - -:::tip -`console.log`は`console`オブジェクトの`log`メソッドで、`document.write`は`document`オブジェクトの`write`メソッドです。 -::: - -## メソッドの省略記法 - -オブジェクトのメソッドは、次のように記述すると簡単です。 - -```js -const someObject = { - someMethod() { - console.log("Method called"); - }, -}; -``` - -以上のコードは、前項のサンプルコードとほとんど同等です。 diff --git a/docs/9-old/day03/07.mdx b/docs/9-old/day03/07.mdx deleted file mode 100644 index 8cdf7f665..000000000 --- a/docs/9-old/day03/07.mdx +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: クラスとオブジェクト指向 ---- - -:::info -この記事では、まだ JavaScript の標準仕様には含まれていない[パブリックフィールド宣言](https://github.com/tc39/proposal-class-fields)を使用しています。Chrome と Firefox では動作しますが、Safari では動作しないかもしれません。 -::: - -多くのプログラミング言語が、**オブジェクト指向**という考え方を持っています。オブジェクト指向とは、「データと動作を一つのまとまりとして捉える考え方」です。 - -オブジェクト指向におけるこのまとまりを、**クラス**と呼びます。クラスに含まれるデータが**フィールド**、動作が**メソッド**です。 - -クラスを使うためには、**定義**をしなければなりません。クラスの定義とは、そのクラスがどのようなフィールドやメソッドを持つかを示す、設計図のようなものです。 - -```js -class Dog { - age; - name; - bark() { - if (this.age > 5) { - console.log("バウバウ"); - } else { - console.log("ワンワン"); - } - } -} -``` - -JavaScript においてクラスを定義するためには、`class`構文を用います。上の例で示した`Dog`クラスの定義は、現実世界の犬を表す設計図です。犬を表すためのデータには、例えば「年齢」や「名前」があります。これが`age`フィールドや`name`フィールドです。 - -犬に関わる動作には、例えば「吠える」などがあります。`bark`メソッドとしてみましょう。メソッドの中の`this`キーワードは、設計図から生まれた実体を表します。 - -```js -const pochi = new Dog(); -pochi.name = "ポチ"; -pochi.age = 8; -pochi.bark(); -``` - -`Dog`の定義から実体（**インスタンス**）を作り出すためには、`new`キーワードを用います。インスタンスは通常の JavaScript オブジェクトと同様の形式なので、ドット記法またはブラケット記法によりフィールドやメソッドにアクセスできます。 - -`pochi.bark();`を実行した際、`bark`メソッド内で得られる`this`は`pochi`そのものです。この仕組みにより、クラス定義は、全てのインスタンスで共通する動作を問題なく抽象化できます。 - -なお、これ以降、クラスのメソッドは`#`記号を用いて表すこととします。例えば、`Dog`クラスの`bark`メソッドは`Dog#bark`メソッドと表記します。 - -## コンストラクタ - -コンストラクタは、`new`演算子が使用された際に呼び出される関数です。`JavaScript`では、`constructor`という名前のメソッドを定義することで使用することができます。 - -```js -class Dog { - age; - constructor(age) { - this.age = age; - } -} - -const pochi = new Dog(8); -console.log(pochi.age); // 8 -``` - -コンストラクタは、他の関数と同じように、引数を取ることができます。通常、コンストラクタに渡される値は、フィールドの初期化などに用いられます。 - -## コンストラクタを使用する - -JavaScript には、日時を表すための`Date`クラスが用意されています。`Date`クラスのコンストラクタは、例えば文字列引数 1 つにより呼び出すことができ、その文字列を日付として解釈しようと試みます。`Date`クラスには、日時を扱うための様々な便利メソッドが用意されています。 - -```js -const valentinesDay = new Date("2020-02-14 00:00:00"); -console.log(valentinesDay.getDate()); // 14 -``` - -例えば、`Date#getDate`メソッドは、その日の日付を返すメソッドです。 - -## 課題 - -`Dog`クラスに、`私の名前は〜です。`（〜の部分に`name`プロパティを埋め込む）とコンソールに出力する`introduceSelf`メソッドを追加してください。実際に`introduceSelf`メソッドを実行させ、正常に動作することを確認してください。 diff --git a/docs/9-old/day03/08.mdx b/docs/9-old/day03/08.mdx deleted file mode 100644 index e287632e1..000000000 --- a/docs/9-old/day03/08.mdx +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 組み込みクラス ---- - -## Array クラス - -今まで何気なく扱ってきた JavaScript の配列ですが、実は`Array`クラスのインスタンスです。具体的に言えば、配列リテラルが生成するオブジェクトは、`Array`クラスのインスタンスです。 - -Array クラスには、開発効率を劇的に変える便利なメソッドが大量に定義されています。 - -### `map`メソッド - -`Array#map`メソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値からなる新たな配列を返します。 - -```js -const numbers = [1, 3, 6, 8]; -const doubledNumbers = numbers.map((value) => value * 2); // [2, 6, 12, 16] -``` - -2 行目の`map`メソッドの引数として渡しているアロー関数式`value => value * 2`は、引数をひとつとり、その値を 2 倍にして返す関数です。この関数が配列の各要素に対して実行されて、その戻り値の集合が`doubledNumber`となっています。 - -### `filter`メソッド - -`Array#filter`メソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値が truthy だったもののみからなる新しい配列を返します。 - -```js -const evenNumbers = numbers.filter((value) => value % 2 === 0); // [6, 8] -``` - -アロー関数式`value => value % 2 === 0`は、引数が偶数の場合`false`を、奇数の場合`true`を返す関数です。`numbers`のうち`6`と`8`の場合のみ戻り値が`true`となるので、その 2 つのみからなる新しい配列が`evenNumbers`に入ります。 - -## DOM オブジェクトと継承 - -DOM オブジェクトも、何らかのクラスのインスタンスだとみなせます。例えば、 - -```js -document.querySelector("div"); -``` - -のようにして取得された`div`要素は、`HTMLDivElement`クラスのインスタンスだと考えられます。 - -[`HTMLDivElement`について記述している文書](https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement)を読んでみましょう。おなじみ`textContent`プロパティや`style`プロパティが存在していませんね。 - -これには、**継承**と呼ばれる仕組みが関係しています。継承とは、その名の通り機能を受け継ぐための仕組みです。ここでいう機能とは、例えばプロパティやメソッドです。継承先のオブジェクトでは、継承元のプロパティやメソッドを使用することができます。 - -DOM は非常に高度な枠組みです。今回の例でいえば、`HTMLDivElement`は`HTMLElement`を継承しており、`HTMLElement`は`Element`を、そして`Element`は`Node`を継承しています。そして`HTMLDivElement`は、そのすべてを利用できるのです。 - -実は、`textContent`は`Node`オブジェクトのプロパティで、`style`は`HTMLElement`オブジェクトのプロパティです。どのプロパティがどのオブジェクトに所属するのかを具体的に記憶する必要性はあまりありませんが、リファレンスを調べる場合にこの知識は大変有用です。 - -## 課題 - -[`Array#reduce`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)は、配列のすべての要素から、単一の値を導き出す（次元を下げる）メソッドです。 - -```js -const sum = [1, 2, 3, 4, 5].reduce( - (previous, current) => previous + current, - 0, -); -console.log(sum); // 15 -``` - -`reduce`メソッドの第一引数は、引数を 2 つとる関数です。配列の各要素をこの関数の第二引数に渡し、戻り値を次の実行時に第一引数として渡します。この第一引数は、初回実行時には`reduce`メソッド自体の第二引数が用いられます（ただしこの引数が省略された場合は配列の最初の要素が用いられ、実行回数が 1 回分減ります）。 - -`reduce`メソッドを使用して、配列の最小値を求めてみてください。 - -```js -const numbers = [6, 9, 1, 3, 2]; -const minimumNumber = numbers.reduce(/** ここに記述 */); -console.log(minimumNumber); // 1 -``` diff --git a/docs/9-old/day03/09.mdx b/docs/9-old/day03/09.mdx deleted file mode 100644 index b6df6629c..000000000 --- a/docs/9-old/day03/09.mdx +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: プルリクエストを用いた共同開発 ---- - -GitHub には、**プルリクエスト**という、変更を提案するための機能があります。この機能を正しく利用することで、複数人による開発を円滑に進めることができます。 - -## ブランチ - -以前少し触れたとおり Git における**ブランチ**とは、ソースコードの分岐です。複数人で開発をする場合は、同じソースコードに複数人が同時に触れることのないよう、編集を枝分かれさせます。 - -![ブランチ](09/branch.svg) - -作業しているブランチを切り替えるためには、`git checkout`コマンドを使用します。ただし、ブランチがまだ存在せず、新しく作成することが必要な場合は`-b`オプションを付けます。 - -複数のブランチをひとつのブランチに統合する作業を**マージ**といいます。分岐したブランチでいくつかのコミットをしたら、もとのブランチをチェックアウトした状態で`git merge`コマンドを実行しましょう。**マージコミット**が作成され、分岐先のブランチの変更を取り込むことができます。 - -## プルリクエストを利用してマージする - -Git のリポジトリを作成すると、通常`master`ブランチが作成されます。`master`ブランチは、すべての起点となる重要なブランチです。このため、`master`ブランチへのマージ作業は慎重に行うべきでしょう。GitHub のプルリクエスト機能を使用すれば、マージ前に様々な確認作業を行うことができます。 - -まずは、**トピックブランチ**（あるひとつの変更を加えるためのブランチ）を作成します。どのような変更を行うかを把握しやすいネーミングを心がけましょう。 - -``` -$ git checkout -b add-something -``` - -続いて、トピックブランチ上で適当な編集を行い、コミットします。 - -``` -$ git add -A -$ git commit -m "somethingを追加した" -``` - -リモートリポジトリにプッシュしましょう。 - -``` -$ git push -u origin add-something -``` - -:::tip -`git checkout`コマンドで作成したブランチは、まだローカルリポジトリにしか存在していないため、プッシュする際に`-u`オプションを指定して、リモートリポジトリを指定する必要があります。2 回目以降のプッシュでは`git push`のみで構いません。 -::: - -続いて、GitHub の`Pull requests`タブから、`New pull request`もしくは`New`をクリックします。 - -![プルリクエストの準備](09/new-pull-request-preparation.png) - -`base`をマージ先のブランチ、`compare`を先ほど作成したブランチに設定し、プルリクエストのタイトルとメッセージを記入します。 - -:::tip -先ほどの画面で`Compare & pull request`のボタンが表示されていた場合は自動的に`base`と`compare`が設定されます。 -::: - -![プルリクエストの作成](09/new-pull-request.png) - -`Create pull request`を選択すると、プルリクエストが作成されます。 - -![作成されたプルリクエスト](09/pull-request-created.png) - -`Merge pull request`を押して確認すれば、変更が`base`に指定したブランチに反映されます。 - -``` -$ git checkout master -$ git pull -``` - -`master`ブランチをプルして、変更が正しく反映されていることを確認しましょう。 - -## ほかの人のリポジトリの開発に参加する - -### 権限の付与 - -`Settings`の`Manage access`から、`Invite a collaborator`を押すことで、ほかの人をリポジトリに招待することができます。 - -![権限の付与](09/authorize-others.png) - -### 開発の開始 - -権限が付与されると、メールでその旨が通知されます。リポジトリの`Code`ボタンからリポジトリの URL を取得し - -``` -$ git clone [リポジトリのURL] -``` - -としてリモートリポジトリをクローンしましょう。 - -![リポジトリのクローン](09/clone-repository.png) - -:::tip -`git clone`を用いてリポジトリをクローンした場合には、はじめからリモートリポジトリが結びついているため、 - -``` -$ git remote add origin [リポジトリのURL] -``` - -を実行する必要はありません。 -::: - -## 課題 - -ut.code(); Learn（このウェブサイト）は、[GitHub にて管理](https://github.com/ut-code/utcode-learn)されています。編集権限を受け取り、何かしらの編集をして、プルリクエストを作成してみましょう。 diff --git a/docs/9-old/day03/09/authorize-others.png b/docs/9-old/day03/09/authorize-others.png deleted file mode 100644 index 4ca75c3e5..000000000 Binary files a/docs/9-old/day03/09/authorize-others.png and /dev/null differ diff --git a/docs/9-old/day03/09/branch.svg b/docs/9-old/day03/09/branch.svg deleted file mode 100644 index 118044659..000000000 --- a/docs/9-old/day03/09/branch.svg +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - featureブランチ - - - - git checkout -b feature - - - git merge feature - - - - - - fixブランチ - - - - git checkout -b fix - - - git merge fix - - - - - - masterブランチ - - - - - - - - - - - マージコミット - マージコミット - diff --git a/docs/9-old/day03/09/clone-repository.png b/docs/9-old/day03/09/clone-repository.png deleted file mode 100644 index 061d3d9b8..000000000 Binary files a/docs/9-old/day03/09/clone-repository.png and /dev/null differ diff --git a/docs/9-old/day03/09/fork.png b/docs/9-old/day03/09/fork.png deleted file mode 100644 index 000b6c1b8..000000000 Binary files a/docs/9-old/day03/09/fork.png and /dev/null differ diff --git a/docs/9-old/day03/09/new-pull-request-preparation.png b/docs/9-old/day03/09/new-pull-request-preparation.png deleted file mode 100644 index e2f724d9a..000000000 Binary files a/docs/9-old/day03/09/new-pull-request-preparation.png and /dev/null differ diff --git a/docs/9-old/day03/09/new-pull-request.png b/docs/9-old/day03/09/new-pull-request.png deleted file mode 100644 index ac0f960c9..000000000 Binary files a/docs/9-old/day03/09/new-pull-request.png and /dev/null differ diff --git a/docs/9-old/day03/09/pull-request-created.png b/docs/9-old/day03/09/pull-request-created.png deleted file mode 100644 index 641abf704..000000000 Binary files a/docs/9-old/day03/09/pull-request-created.png and /dev/null differ diff --git a/docs/9-old/day03/10.mdx b/docs/9-old/day03/10.mdx deleted file mode 100644 index cd7e3004b..000000000 --- a/docs/9-old/day03/10.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: "課題: フロントエンドの総まとめ" ---- - -電卓アプリを作成してみましょう。DRY 原則に忠実に実装できますか？ - -![電卓アプリ](10/calc.png) diff --git a/docs/9-old/day03/10/calc.png b/docs/9-old/day03/10/calc.png deleted file mode 100644 index 0c1e51942..000000000 Binary files a/docs/9-old/day03/10/calc.png and /dev/null differ diff --git a/docs/9-old/day04/01.mdx b/docs/9-old/day04/01.mdx deleted file mode 100644 index c634c3f9d..000000000 --- a/docs/9-old/day04/01.mdx +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: サーバーサイドの学習をはじめる前に ---- - -これまでの学習の中で使用していた言語は、HTML と CSS、そして JavaScript ですが、そのいずれもがブラウザ上で動作する言語です。しかしながら、Web サービスはブラウザだけでは動作しません。 - -Web サービスを提供するためには、インターネットの向こう側で常時起動し、使用者（**クライアント**）からの**リクエスト**に応じて、ブラウザに対し、HTML や CSS、JavaScript などからなる、適切な**レスポンス**を返すためのコンピューターが必要です。このようなコンピューターを**サーバー**と呼びます。 - -皆さんが使っているパソコンは何でしょうか。Macbook であったり、Surface であったりするとは思いますが、どのようなパソコンであれ、通常は**OS**を搭載しています。一般向けのパソコンに搭載されている OS は、通常 Windows または macOS です。 - -サーバーとして使用されるコンピューターが搭載する OS は、通常**Linux**です。このため、サーバーで動作するプログラムを作るためには、Linux の動作を理解し、Linux に近い環境を用意しなければなりません。実は、macOS は Linux に近い構成となっているため、あまり設定をする必要がありません。Windows の方は、少々大変ですが Linux が動作する環境を構築しましょう。 diff --git a/docs/9-old/day04/02.mdx b/docs/9-old/day04/02.mdx deleted file mode 100644 index 0a6273927..000000000 --- a/docs/9-old/day04/02.mdx +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: "WSL2環境の構築 (Windowsのみ)" ---- - -:::info -競技プログラミング等で既に WSL1 を使用している場合は、[こちら](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#set-your-distribution-version-to-wsl-1-or-wsl-2)を参考に、 - -- 開発に使用するディストリビューションの WSL バージョンを 2 にする -- WSL のデフォルトバージョンを 2 にする - -を行ってください。 -::: - -:::warning -この記事では、非常に新しい技術について扱っています。内容が実際と異なる場合があるので、必ず[Microsoft の記事](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)を併せて確認してください。 -::: - -新しいバージョンの Windows には、WSL（Windows Subsystem for Linux）と呼ばれる、Windows 内で Linux を動作させるための仕組みが用意されています。最近、WSL のバージョン 2 が登場し、完全な Linux を使用できるようになりました。これ以後の全ての Windows 上での開発は、WSL2 上で行うことを前提とします。 - -## WSL の有効化と WSL2 の設定 - -WSL2 は、Windows 10 のバージョン 2004 以降で正式に利用できます。設定画面から Windows のバージョンを確認し、これより前の状態であった場合は Windows Update をするとよいでしょう。 - -![Windowsのバージョン確認](02/check-windows-version.png) - -PowerShell またはコマンドプロンプトを管理者権限で起動します。 - -![PowerShellを管理者権限で起動](02/start-powershell-as-admin.png) - -以下のコマンドを用いて WSL と仮想マシン プラットフォームを有効にします。有効化が終わったら、端末を再起動してください。 - -``` -dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart -dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart -``` - -![機能の有効化](02/enable-wsl-and-vmplatform.png) - -再起動が完了したら、WSL2 を有効にします。以下のコマンドを実行してください。こちらは管理者権限は必要ありません。 - -``` -wsl --set-default-version 2 -``` - -「WSL 2 を実行するには、カーネル コンポーネントの更新が必要です。詳細については https://aka.ms/wsl2kernel を参照してください」と表示された場合は、[WSL 2 Linux カーネルの更新](https://aka.ms/wsl2kernel)を参考にしてください。 - -![Linuxカーネルのインストール](02/install-linux-kernel.png) - -「WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください」のように表示されたら完了です。 - -![WSLのインストールの完了](02/wsl-completed.png) - -## Ubuntu のセットアップ - -Microsoft Store から Ubuntu をインストールします。Ubuntu は、Linux のディストリビューション（Linux の上に様々なソフトウェアを加えたもの）の、最もポピュラーなもののひとつです。 - -![Ubuntuのインストール](02/install-ubuntu.png) - -Ubuntu を起動すると、Ubuntu で使用するユーザー名とパスワードの入力が求められます。必ず英数字で入力してください。 - -![Ubuntuのセットアップ](02/ubuntu-setup.png) - -おめでとうございます。WSL が使用可能になりました。 - -## VS Code を WSL で使用する - -`Visual Studio Code Remote - WSL`拡張機能を用いると、VS Code を WSL 上で動作させることができ、あたかも Linux 上で開発をしているかのような体験を得ることができます。 - -![拡張機能のインストール](02/install-remote-wsl.png) - -拡張機能のインストールが完了したら、コマンドパレットから`Remote-WSL: New Window`を選択します。 - -![新しいWSLウィンドウを開く](02/wsl-new-window.png) - -正しくウィンドウが開けたら成功です。 - -## Git の設定をする - -WSL は Windows から独立しているため、Windows 環境でインストールした Git は WSL 上では使用できません。しかしながら、幸いなことに Ubuntu では Git が標準でインストールされています。以前の記事を参考に、SSH 鍵の生成と、メールアドレス・ユーザー名の設定を行いましょう。 - -``` -$ ssh-keygen -t ed25519 -$ git config --global user.email [ダミーのメールアドレス] -$ git config --global user.name [GitHubのユーザー名] -``` - -SSH 公開鍵を表示するためには、 - -``` -$ cat ~/.ssh/id_ed25519.pub -``` - -を実行してください。公開鍵を GitHub に登録したら、リポジトリのクローンやコミットができるかどうか確認してみましょう。 - -## Windows のエクスプローラーで WSL 上のファイルにアクセスする - -WSL 上では、通常の Windows とは完全に独立したファイルシステムが構築されています。このため、Windows 側からファイルを操作するためには、特殊な方法が必要です。 - -`Win + R`キーを押して`ファイル名を指定して実行`ダイアログボックスを開き、`\\wsl$`と入力します。 - -![エクスプローラーでWSLを開く](02/show-wsl-in-explorer.png) - -エクスプローラー上でインストールしたディストリビューション（この記事の手順に従った場合は`Ubuntu`）のフォルダとして表示されます。この中身がファイルシステムのルートです。 diff --git a/docs/9-old/day04/02/check-windows-version.png b/docs/9-old/day04/02/check-windows-version.png deleted file mode 100644 index 89d540612..000000000 Binary files a/docs/9-old/day04/02/check-windows-version.png and /dev/null differ diff --git a/docs/9-old/day04/02/enable-wsl-and-vmplatform.png b/docs/9-old/day04/02/enable-wsl-and-vmplatform.png deleted file mode 100644 index 6fe994bb7..000000000 Binary files a/docs/9-old/day04/02/enable-wsl-and-vmplatform.png and /dev/null differ diff --git a/docs/9-old/day04/02/enable-wsl.png b/docs/9-old/day04/02/enable-wsl.png deleted file mode 100644 index aff819deb..000000000 Binary files a/docs/9-old/day04/02/enable-wsl.png and /dev/null differ diff --git a/docs/9-old/day04/02/install-linux-kernel.png b/docs/9-old/day04/02/install-linux-kernel.png deleted file mode 100644 index d3498ccc1..000000000 Binary files a/docs/9-old/day04/02/install-linux-kernel.png and /dev/null differ diff --git a/docs/9-old/day04/02/install-remote-wsl.png b/docs/9-old/day04/02/install-remote-wsl.png deleted file mode 100644 index 0adbe5111..000000000 Binary files a/docs/9-old/day04/02/install-remote-wsl.png and /dev/null differ diff --git a/docs/9-old/day04/02/install-ubuntu.png b/docs/9-old/day04/02/install-ubuntu.png deleted file mode 100644 index 92756d43a..000000000 Binary files a/docs/9-old/day04/02/install-ubuntu.png and /dev/null differ diff --git a/docs/9-old/day04/02/show-wsl-in-explorer.png b/docs/9-old/day04/02/show-wsl-in-explorer.png deleted file mode 100644 index cff11d24d..000000000 Binary files a/docs/9-old/day04/02/show-wsl-in-explorer.png and /dev/null differ diff --git a/docs/9-old/day04/02/start-powershell-as-admin.png b/docs/9-old/day04/02/start-powershell-as-admin.png deleted file mode 100644 index 7924207d9..000000000 Binary files a/docs/9-old/day04/02/start-powershell-as-admin.png and /dev/null differ diff --git a/docs/9-old/day04/02/ubuntu-setup.png b/docs/9-old/day04/02/ubuntu-setup.png deleted file mode 100644 index 22a38eabe..000000000 Binary files a/docs/9-old/day04/02/ubuntu-setup.png and /dev/null differ diff --git a/docs/9-old/day04/02/wsl-completed.png b/docs/9-old/day04/02/wsl-completed.png deleted file mode 100644 index 6f0062b8c..000000000 Binary files a/docs/9-old/day04/02/wsl-completed.png and /dev/null differ diff --git a/docs/9-old/day04/02/wsl-new-window.png b/docs/9-old/day04/02/wsl-new-window.png deleted file mode 100644 index 02003aaea..000000000 Binary files a/docs/9-old/day04/02/wsl-new-window.png and /dev/null differ diff --git a/docs/9-old/day04/03.mdx b/docs/9-old/day04/03.mdx deleted file mode 100644 index 3591ab0c8..000000000 --- a/docs/9-old/day04/03.mdx +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Dockerのインストール ---- - -**Docker**を用いると、仮想的な Linux マシンを軽量に構築することができます。 - -## WSL を用いてインストールする (Windows のみ) - -[こちら](https://www.docker.com/products/docker-desktop)から Docker Desktop をダウンロード・インストールします。インストール中に`Enable WSL 2 Windows Features`が表示されるので、チェックが入っていることを確認しましょう。 - -![DockerがWSL2を使用するよう設定する](03/enable-wsl2-docker.png) - -:::warning -このオプションが表示されない場合、WSL2 が正しく有効化できていない可能性が高いです。 -::: - -Docker Desktop の設定画面（タスクトレイのアイコンから起動できます）から、WSL のディストリビューション上（手順通りであれば`Ubuntu`です）で Docker が使用できるように設定します。 - -![DockerをUbuntu上で有効にする](03/enable-docker-in-ubuntu.png) - -VS Code で WSL に接続して統合ターミナルを起動し、Docker が問題なく使用できることを確認しましょう。 - -![DockerがWSLにインストールされたかの確認](03/check-docker-version.png) - -``` -$ docker -v -$ docker-compose -v -``` - -バージョン番号が表示されていれば成功です。 - -## macOS にインストールする - -macOS での手順は非常に簡単です。[Docker Desktop](https://www.docker.com/products/docker-desktop)を何も考えずにインストールするだけです。簡単ですね。VS Code の統合ターミナルで同様に確認してください。 - -![MacでDockerのインストール確認](03/install-check-mac.png) diff --git a/docs/9-old/day04/03/check-docker-version.png b/docs/9-old/day04/03/check-docker-version.png deleted file mode 100644 index 0a831b417..000000000 Binary files a/docs/9-old/day04/03/check-docker-version.png and /dev/null differ diff --git a/docs/9-old/day04/03/enable-docker-in-ubuntu.png b/docs/9-old/day04/03/enable-docker-in-ubuntu.png deleted file mode 100644 index 6fd59262d..000000000 Binary files a/docs/9-old/day04/03/enable-docker-in-ubuntu.png and /dev/null differ diff --git a/docs/9-old/day04/03/enable-wsl2-docker.png b/docs/9-old/day04/03/enable-wsl2-docker.png deleted file mode 100644 index 7dc737c96..000000000 Binary files a/docs/9-old/day04/03/enable-wsl2-docker.png and /dev/null differ diff --git a/docs/9-old/day04/03/install-check-mac.png b/docs/9-old/day04/03/install-check-mac.png deleted file mode 100644 index 785b16fea..000000000 Binary files a/docs/9-old/day04/03/install-check-mac.png and /dev/null differ diff --git a/docs/9-old/day04/04.mdx b/docs/9-old/day04/04.mdx deleted file mode 100644 index eceffbd17..000000000 --- a/docs/9-old/day04/04.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Linuxのコマンドに慣れる ---- - -## ファイルシステム - -Linux のファイルシステムは、**ルートディレクトリ**と呼ばれる特殊なディレクトリを頂点とする木構造で表現され、この木構造の中の特定の要素を一意に表現するための表記を**パス**と呼びます。Linux においてパスの区切り文字は`/`で、それが単体で利用された際はルートディレクトリを表します。例えば、ルートディレクトリの中の`home`ディレクトリの中の`utcode`という名前のディレクトリは`/home/utcode`という形で表現されます。 - -![ディレクトリの木構造](04/directory-tree.png) - -また、PC は複数のユーザーで使用されることを前提に設計されているため、各ユーザーが使用できる個人的な領域として「ホームディレクトリ」が作成されます。Ubuntu をはじめとした標準的な Linux では、ホームディレクトリは「/home/ユーザー名」にあります。 - -Linux には、最初から存在している**root**と呼ばれる特殊なユーザーがあります。`root`ユーザーは、コンピューター内の全てのファイルやディレクトリにアクセスできる権限を持っています。Ubuntu では、root ユーザーのホームディレクトリは`/root`にあります。 - -## 相対パスと絶対パス - -現在作業対象となっているディレクトリを**カレントディレクトリ**と呼びます。すべてのファイルやディレクトリは、ルートディレクトリを基準とした**絶対パス**で表される他、カレントディレクトリからの**相対パス**で表すことができます。例えば、カレントディレクトリが`/home/utcode`のとき、`/home/utcode/pictures/xxx.jpg`は`pictures/xxx.jpg`と表されます。 - -Ubuntu の場合は、標準状態でカレントディレクトリがターミナル上に表示される場合が多いです。以下の例の場合は`~/projects/sample`がカレントディレクトリです。 - -![カレントディレクトリの確認](04/check-current-directory.png) - -:::tip -ターミナル上で動作し、ユーザーの入力を受け取って実際に実行するソフトウェアを**シェル**と呼びます。コマンドを入力する場所（**プロンプト**）にカレントディレクトリを表示させるか否かはシェルの設定に依存しますが、Ubuntu のデフォルトである**bash**や macOS のデフォルトである**zsh**では、標準で表示されるようになっています。 -::: - -パスを表現するとき、様々な記号を用いることで、より複雑な関係を表現することができます。 - -| カレントディレクトリ | 目標のディレクトリ | 相対パス | -| -------------------- | ---------------------- | ---------------------------- | -| /foo/bar | /foo/bar/baz | baz 又は ./baz | -| /foo/bar | /foo/bar/baz/foobar | baz/foobar 又は ./baz/foobar | -| /foo/bar/baz | /foo/bar | .. 又は ./.. | -| /foo/bar/baz | /foo | ../.. 又は ./../.. | -| どこでも | /home/[ユーザー名]/foo | ~/foo | - -カレントディレクトリは「.」、親ディレクトリは「..」、ホームディレクトリは「~」と表されることが分かります。 - -## コマンドの入力方法 - -コマンドはスペース区切りで入力し、最初がコマンド名、それ以降をそのコマンドの「引数」と呼びます。コマンド名や引数にスペース文字が含まれる場合は、値全体を`""`（ダブルクォーテーション）で囲むことでスペースが区切り文字として認識されることを防ぐことができます。以下にコマンドの一例を示します。 - -| コマンド名 | 機能 | -| ------------ | ---------------------------- | -| pwd | カレントディレクトリを表示 | -| ls | ディレクトリの中身を一覧表示 | -| cd [移動先] | カレントディレクトリを移動 | -| mkdir [名前] | 新しいディレクトリを作成 | -| touch [名前] | 新しいファイルを作成 | - -## 課題 - -ホームディレクトリ内に以下のディレクトリ・ファイル構造を作成してください。 - -``` -[ホームディレクトリ] -└── secret - ├── pictures - │ └── xxx.txt - └── videos - ├── yyy.txt - └── zzz.txt -``` diff --git a/docs/9-old/day04/04/check-current-directory.png b/docs/9-old/day04/04/check-current-directory.png deleted file mode 100644 index 11de9432b..000000000 Binary files a/docs/9-old/day04/04/check-current-directory.png and /dev/null differ diff --git a/docs/9-old/day04/04/directory-tree.png b/docs/9-old/day04/04/directory-tree.png deleted file mode 100644 index 1bec64791..000000000 Binary files a/docs/9-old/day04/04/directory-tree.png and /dev/null differ diff --git a/docs/9-old/day04/05.mdx b/docs/9-old/day04/05.mdx deleted file mode 100644 index dc828710a..000000000 --- a/docs/9-old/day04/05.mdx +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Webサーバー ---- - -## Docker を用いて Web サーバーを構築する - -新しいディレクトリを作成し、VS Code で開きましょう。`docker-compose.yml`という名前のファイルを作成し、以下の内容を記述します。 - -```yml -version: "3" -services: - web: - image: httpd - ports: - - 8080:80 - volumes: - - ./files:/usr/local/apache2/htdocs -``` - -続いて`files`ディレクトリを作成して、適当な`index.html`をその中に作成してください。 - -![docker-compose.ymlを含むプロジェクト](05/docker-project.png) - -プロジェクトディレクトリで以下のコマンドを実行します。 - -``` -$ docker-compose up -``` - -[http://localhost:8080/](http://localhost:8080/) にアクセスして、先ほど作成した HTML ファイルの内容が表示されることを確認してください。 - -:::tip -`docker-compose up`コマンドで起動したサーバーは、`Ctrl + C`のショートカットで終了させることができます。 -::: - -## URL の構造 - -私たちがウェブサイトにアクセスする場合には、**URL**を用いるのが普通です。URL には様々な情報が含まれています。 - -![URL](05/url.png) - -### ② ドメイン - -クライアントがサーバーにリクエストを送信する際、まず最初に使用されるのがドメインです。ドメンは、インターネット上でサーバーの場所を区別するための文字列です。 - -:::note -② の場所に入る文字列を、正確には**FQDN**と呼びます。FQDN は、`www.utcode.net`のような文字列で、`www`を**ホスト名**、`utcode.net`をドメインと呼びます。 - -しかしながら、FQDN、ホスト、ドメインが同じ意味で用いられる場合も多いので注意が必要です。 -::: - -:::tip -多くの端末では、`localhost`とすることで自分自身にアクセスすることができます。 -::: - -### ③ ポート - -クライアントからリクエストを受けるコンピューターをサーバーと呼びますが、そのリクエストを実際に受け取って処理を行うソフトウェアもまた、サーバーと呼びます。 - -このため、一台の物理的なサーバーで稼働しているソフトウェアとしてのサーバーが一種類とは限りません。どのソフトウェアの通信なのかを区別するため、外部からの接続を待ち受けするソフトウェアは、`0 ～ 2^16 – 1 (65535)`の整数で表される**ポート**番号を指定する必要があります。 - -![ポート番号](05/port.png) - -サーバーの種類によって使われるポート番号は大体決まっています。例えば、Web サーバーの場合は、80 番または 443 番が使用されるのが普通です。後述するプロトコルが HTTP の場合は 80 番、HTTPS の場合は 443 番のとき、URL におけるポート番号は省略可能になります。一般的な URL にポート番号が存在していないのはこのためです。 - -### ① プロトコル - -複数のコンピューターが正しく通信を行うためには、事前に通信の方法を定めておく必要があります。通信を行うための取り決めを、**プロトコル**と呼びます。ウェブサイトを提供するためのプロトコルは**HTTP**または**HTTPS**です。 - -### ④ パス - -通信先のサーバーにおける、リクエストするリソースの場所を表す文字列です。具体的な解釈の方法はプロトコルで決まっているわけではなく、サーバーソフトウェアの実装次第です。 - -## Docker と Docker Compose の使い方 - -以前インストールした Docker は、**仮想化**のためのソフトウェアです。サーバーは通常物理的な筐体ですが、仮想化を用いることで、あるコンピューターの中にあたかも別のコンピューターが存在するかのようにふるまわせることができます。 - -**Docker Compose**は、複雑なコマンド体系を持つ Docker を扱いやすくするためのソフトウェアです。`docker-compose.yml`という名前のファイルにサーバーの構成を記述し、`docker-compose up`とするだけで、様々なサーバーを起動させることができます。 - -先ほどの`docker-compose.yml`を見直してみましょう。このファイルは、**YAML**と呼ばれる可読性の高いフォーマットで記述します。 - -```yml -version: "3" # docker-compose.ymlの仕様のバージョン -services: - web: - image: httpd - ports: - - 8080:80 - volumes: - - ./files:/usr/local/apache2/htdocs -``` - -:::tip -VS Code の拡張機能 [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) をインストールしておくと便利です。 -::: - -YAML は、JavaScript オブジェクトに変換することが可能な形式です。このファイルの内容を JavaScript の式で記述すると、下記のような形式になります。 - -```js -({ - version: "3", - services: { - web: { - image: "httpd", - ports: ["8080:80"], - volumes: ["./files:/usr/local/apache2/htdocs"], - }, - }, -}); -``` - -`services`の各プロパティが、一台のサーバーを表します。Docker Compose は、このプロパティ一つごとに、仮想的な Linux 端末（**コンテナ**）ひとつを生成します。上記の例の場合は`web`ひとつだけです。 - -`service.サービス名.image`には、コンテナのベースとなるイメージ名を指定します。このイメージは、通常[Docker Hub](https://hub.docker.com/)上にアップロードされているもので、公式・非公式ともにさまざまな種類が用意されています。 - -`service.サービス名.ports`は、`ローカル側ポート:コンテナ側ポート`形式の文字列配列を指定します。この指定をすることで、`localhost`の指定ポートへの通信を、コンテナ側の指定ポートへ転送することができます。 - -`service.サービス名.volumes`は、`ローカル側パス:コンテナ側パス`形式の文字列配列で、ローカル側のファイルシステムを、コンテナ側のファイルシステムと同期させることができるようになります。 - -## Web サーバー - -`httpd`イメージは、Docker が公式に提供している、**Apache**を含むイメージです。Apache は、世界で一般的に使用される Web サーバーの一種です。 - -Web サーバーは通常、**ドキュメントルート**と呼ばれるディレクトリを設定し、そのディレクトリ内にあるファイルを公開します。URL に含まれるパスは、そのドキュメントルートからの相対パスです。 - -Docker の`httpd`イメージでは、ドキュメントルートが`/usr/local/apache2/htdocs`、ポート番号が 80 に設定されています。これが、Docker Compose の設定によりそれぞれ`./files`、8080 番ポートに転送されているため、`http://localhost:8080/`の URL で`./files/index.html`にアクセスすることができたのです。 diff --git a/docs/9-old/day04/05/docker-project.png b/docs/9-old/day04/05/docker-project.png deleted file mode 100644 index 3bad651ce..000000000 Binary files a/docs/9-old/day04/05/docker-project.png and /dev/null differ diff --git a/docs/9-old/day04/05/port.png b/docs/9-old/day04/05/port.png deleted file mode 100644 index 1f66baaa9..000000000 Binary files a/docs/9-old/day04/05/port.png and /dev/null differ diff --git a/docs/9-old/day04/05/url.png b/docs/9-old/day04/05/url.png deleted file mode 100644 index b74bbb1e1..000000000 Binary files a/docs/9-old/day04/05/url.png and /dev/null differ diff --git a/docs/9-old/day04/06.mdx b/docs/9-old/day04/06.mdx deleted file mode 100644 index 7ffb166e5..000000000 --- a/docs/9-old/day04/06.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: PHPの動作 ---- - -PHP は、リクエストを受け取った Web サーバーが、レスポンスを返す前に動作するプログラミング言語です。 - -## PHP が動作する Web サイト - -```yml title="docker-compose.yml" -version: "3" -services: - web: - image: php:apache - ports: - - 8080:80 - volumes: - - ./files:/var/www/html -``` - -```php title="files/index.php" - - - - - Hello World - - - - - - -``` - -プロジェクトディレクトリは以下のようになるはずです。 - -![PHPのDockerプロジェクト](06/docker-php-project.png) - -詳細は後にするとして、とりあえず実行結果にアクセスすると、表示は大方予想通りになります。 - -![PHPを含むウェブサイトの表示](06/php-output.png) - -しかしながら、ページ自体のソースを表示させてみるといかがでしょうか。 - -![PHPを含むウェブサイトのブラウザ側から見えるソース](06/php-source.png) - -`Hello PHP!`の部分は出力内容しか残っていないことが分かります。これが、サーバーサイドで動作するプログラムの特徴です。プログラムは、実行結果がクライアントに送信される前に実行されるため、ブラウザからはサーバーサイドのプログラムのソースコードを表示させることができません。 - -## 動作原理 - -Docker イメージの`php:apache`は、PHP が動作するよう設定された Apache のイメージです。ポート番号は 80、ドキュメントルートは`/var/www/html`に設定されています。 - -この Apache は、拡張子が`.php`のファイルに対してリクエストを受けたとき、PHP を起動させます。PHP は、ファイルの中から``で囲まれた部分を PHP のプログラムとして実行します（囲まれていない部分は通常の出力と解釈されます）。この実行結果を Apache が受け取り、クライアント側に返却するようになっています。 diff --git a/docs/9-old/day04/06/docker-php-project.png b/docs/9-old/day04/06/docker-php-project.png deleted file mode 100644 index 6bc8f42a5..000000000 Binary files a/docs/9-old/day04/06/docker-php-project.png and /dev/null differ diff --git a/docs/9-old/day04/06/php-output.png b/docs/9-old/day04/06/php-output.png deleted file mode 100644 index 4c1042568..000000000 Binary files a/docs/9-old/day04/06/php-output.png and /dev/null differ diff --git a/docs/9-old/day04/06/php-source.png b/docs/9-old/day04/06/php-source.png deleted file mode 100644 index 29e97d5df..000000000 Binary files a/docs/9-old/day04/06/php-source.png and /dev/null differ diff --git a/docs/9-old/day04/07.mdx b/docs/9-old/day04/07.mdx deleted file mode 100644 index 697781a1a..000000000 --- a/docs/9-old/day04/07.mdx +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: PHPの基本文法 ---- - -プログラミング言語は、書き方に若干の違いはあれど、大きな差があるわけではありません。JavaScript の学習の成果は、ほとんどそのまま PHP にも適用できます。 - -## PHP の特徴 - -### 変数名の頭に`$`をつける - -PHP では、変数名の最初には必ず`$`をつける必要があります。JavaScript と異なり、変数を宣言する必要はありません。代入文を記述すれば、変数は自動的に生成されます。 - -```php -$name = 'Tanaka'; -$age = 19; -``` - -### 文字列リテラルのダブルクォートとシングルクォートが区別される - -JavaScript では、文字列を表すとき、ダブルクォートで囲んでもシングルクォートで囲んでも差異はありませんでした。しかしながら、PHP においては、両者は厳密に区別されます。シングルクォートはごく普通の文字列リテラルなのですが、ダブルクォートは JavaScript におけるテンプレートリテラルに近く、`$`記号から始まる文字列が自動的に変数として展開されます。以下のコードを実行してみましょう。 - -```php -$age = 20; -print('I am $age years old.'); // I am $age years old. -print("I am $age years old."); // I am 20 years old. -``` - -基本的にはシングルクォートを使用し、ダブルクォートは必要に応じて使用するのが良いでしょう。 - -## 基本構文 - -### 変数の使用と定数の宣言 - -```php -// 変数 -$wonderful_variable = 'Hello'; - -// 定数 -const SUPER_CONSTANT_VALUE = 123; -define('EXCELLENT_CONSTANT_VALUE', 'abc'); - -print(SUPER_CONSTANT_VALUE); // 123 -``` - -PHP の定数は、数値、文字列、論理値と、配列のみに対して使用できます。JavaScript の`const`のように、通常の変数と同じように使用することはできません。また、定数を使用する際は`$`記号をつける必要がありません。 - -変数名は小文字の**スネークケース**（単語の区切りをアンダーバーで表記する手法）、定数名は大文字のスネークケースを使用しましょう。 - -### 配列（リスト）と連想配列 - -```php -$fruits = ['apple', 'banana', 'lemon']; - -print($fruits[0]); // apple -print(count($fruits)); // 3 - -$fruits[] = 'strawberry'; // $fruits = ['apple', 'banana', 'lemon', 'strawberry'] -array_push($fruits, 'melon'); // $fruits = ['apple', 'banana', 'lemon', 'strawberry', 'melon'] -``` - -PHP の配列は、JavaScript の配列と記法は似ていますが、配列に対する操作はメソッドではなく関数を用いて行います。 - -```php -$grades = ['japanese' => 67, 'math' => 80]; -print($grades['japanese']); // 67 -``` - -連想配列は「キー」＋「値」形式のデータ構造です。JavaScript オブジェクトと似ていますが、キー名にはクォーテーションが必要で、アクセスにはブラケット記法を使用する必要があります。配列とは似て非なるものです。 - -### 制御構文 - -PHP の`if`文、`while`文、`for`文は至って標準的な形式です。 - -```php -if (20 <= $age) { - print('ようこそ！オトナの世界へ！'); -} else if (18 <= $age && $age < 20) { - print('もう少し...'); -} else { - print('子供は寝る時間ですよ。'); -} - -while ($remaining > 0) { - print("まだですよ"); - $remaining--; -} - -for ($i = 0; $i < count($students); $i++) { - print($students[$i]); -} -``` - -### 配列と連想配列の列挙 - -JavaScript の`for of`と同じく、列挙可能な値を列挙するための構文が存在します。foreach 文です。2 種類の書き方があります。 - -```php -$sum = 0; -$numbers = [1, 3, 6, 8]; -foreach ($numbers as $number) { - $sum += $number; -} - -$grades = ['japanese' => 67, 'math' => 80]; -foreach ($grades as $subject => $points) { - print("$subject: $points"); -} -``` - -`foreach ($array as $value)`の形式では、配列（または連想配列）の値だけを取り出します。`foreach ($array as $key => $value)`を使用すると、連想配列ではキーと値を、配列では添字と値を使用することができます。 - -### 関数の定義 - -```php -function add($a, $b) { - return $a + $b; -} -print(add(1, 2)); -``` - -こちらも至って一般的です。 - -### クラスとアクセス修飾子 - -```php -class Dog -{ - private $age; - public $name; - public function __construct($age) { - $this->age = $age; - } - public function bark() { - if ($this->age > 5) { - print('バウバウ'); - } else { - print('ワンワン'); - } - } -} - -$pochi = new Dog(8); -$pochi->bark(); -``` - -PHP のクラスでは、インスタンスのフィールドやメソッドへのアクセスのために、ドットの代わりに`->`を使用します。これはおそらく、PHP におけるドット記号は、文字列結合演算子（JavaScript における`+`）として利用されていたためだと考えられます。 - -また、PHP では、フィールドやメソッドの定義の前に**アクセス修飾子**を付加することができます。PHP のアクセス修飾子は 3 種類で、 - -| アクセス修飾子 | 意味 | -| -------------- | ------------------------------------------------------------ | -| public | 全ての場所からアクセス可能 | -| private | クラスの定義内からのみアクセス可能 | -| protected | クラスの定義内と、継承先のクラスの定義内からのみアクセス可能 | - -が利用できます。上記の例の場合、`name`フィールドは`private`指定されていますので、 - -```php -$pochi = new Dog(8); -print($pochi->age); -``` - -はエラーとなります。なお、フィールドのアクセス修飾子は省略できませんが、メソッドのアクセス修飾子は省略可能で、その場合は自動的に`public`が指定されたものとみなされます。 - -その他、コンストラクタに`__construct()`を使用する等、細かい違いがあります。 - -### 無名関数 - -JavaScript と同様に、PHP でも無名関数が使用できます。 - -```php -$numbers = [1, 2, 3, 4, 5]; -$doubled_numbers = array_map(function($item) { - return $item * 2; -}, $numbers); -print_r($doubled_numbers); -``` - -PHP の無名関数は、`function ($引数1, $引数2, …) { 処理; }`の形式です。`print_r`関数は、配列の中身を見やすい形式で出力してくれる便利関数です。 - -## 課題 - -2 ～ 100 までの数値のうち、素数のみを選んで表示するプログラムを作成してください。 diff --git a/docs/9-old/day04/08.mdx b/docs/9-old/day04/08.mdx deleted file mode 100644 index b31aebf78..000000000 --- a/docs/9-old/day04/08.mdx +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: クエリパラメータを用いたデータの受け渡し ---- - -## クライアントがデータを送信する仕組み - -PHP を用いることで、サーバー上でプログラムを動作させることができました。それでは、サーバー上で動作するプログラムに対し、ユーザーの入力内容を伝え、それによって動作を変更するにはどうしたら良いのでしょうか。 - -もっとも単純な方法は、URL に**クエリ文字列**と呼ばれる追加情報を付加することです。東京大学の学務システム UTAS を例にとってみましょう。ブラウザで UTAS にログインし、トップページを表示させると、その URL は - -`https://utas.adm.u-tokyo.ac.jp/campusweb/campusportal.do?page=main&tabId=home` -になっています。`https://utas.adm.u-tokyo.ac.jp/campusweb/campusportal.do`まではよく見る形式で`?page=main&tabId=home`の部分がクエリ文字列です。 - -![UTAS](08/utas.png) - -クエリ文字列は、`パラメータ名=値`の組み合わせを`&`でつなぎ合わせた形となっており、`?`から始まります。 - -プロパティ名や値に特殊な文字（主にアルファベット以外の文字を指します）が含まれる場合は注意が必要です。例えば、日本語の文字は URL として使用することができないため、そのままではクエリ文字列の中に含めることができません。これらの文字を使用する場合、URL として使用可能な形式に変換してやる必要があります。 - -例えば、日本語の`あ`は UTF-8 において`E38182`（6 桁の 16 進数）で表されます。この時、`あ`を URL で使用可能な形式に変換する（**URL エンコード**）場合、`%E3%81%82`となります。 - -:::tip -コンピューター上では、文字列をデータとして扱うために、すべての文字に対し一意のコードを割り当てています。これが`文字コード`です。Web の世界では、`UTF-8`が標準です。 - -よく言われる文字化けは、製作者側の意図と異なる文字コードでデータを開こうとする場合に起こる現象です。 -::: - -## クエリ文字列を用いて PHP にユーザー入力を渡す - -HTML において、`method`属性を`get`に指定した`form`タグを使用して`input`要素を囲むと、`input`要素に入力された値をクエリ文字列を使用してサーバー側に送信することができます。 - -このとき、各`input`要素の`name`属性に指定された値が、クエリ文字列におけるパラメータ名として使用されます。データの送信先の URL は`form`タグの`action`属性によって指定できます。早速例を見てみましょう。 - -```html title="index.html" -
-

名前:

-

-
-``` - -```php title="members.php" -ようこそ！さん！ -``` - -![クエリパラメータによるデータ送信](08/send-query-parameters.png) - -フォームの送信先の画面のアドレスバーに注目しましょう。`index.html`で入力された値が、URL のクエリパラメータとして引き渡されているのが分かります（なお、昨今のブラウザは URL エンコードされた文字列をデコードしてアドレスバーに表示する機能を持っているため、アドレスバーにエンコード済みの文字列が表示されていません）。 - -PHP では、クエリパラメータによって渡されたデータは、`$_GET`グローバル変数に連想配列の形式で自動的に格納されます。この変数はプログラム中のどこからでもアクセスすることが可能となっています。 - -## 課題 - -前回の課題における、素数の最大値を GET パラメータを用いて設定できるようにしましょう。[`intval`関数](https://www.php.net/manual/ja/function.intval.php)を用いると、文字列を数値に変換できます。 diff --git a/docs/9-old/day04/08/send-query-parameters.png b/docs/9-old/day04/08/send-query-parameters.png deleted file mode 100644 index 073c8e904..000000000 Binary files a/docs/9-old/day04/08/send-query-parameters.png and /dev/null differ diff --git a/docs/9-old/day04/08/utas.png b/docs/9-old/day04/08/utas.png deleted file mode 100644 index c28502026..000000000 Binary files a/docs/9-old/day04/08/utas.png and /dev/null differ diff --git a/docs/9-old/day04/09.mdx b/docs/9-old/day04/09.mdx deleted file mode 100644 index 1c818b058..000000000 --- a/docs/9-old/day04/09.mdx +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: POSTメソッドを用いたリクエスト ---- - -## POST メソッドを使用する - -前回の例を少々改変してみましょう。 - -```html title="index.html" -
-

名前:

-

-
-``` - -```php title="members.php" -ようこそ！さん！ -``` - -実行結果は前回と変わりません。 - -![POSTメソッドの使用](09/use-post.png) - -しかしながら、今回はクエリパラメータらしき文字列が URL の中に存在していません。一体どのようにしてデータの受け渡しを行っているのでしょうか。 - -## telnet クライアントを用いて HTTP リクエストを人力で送信する - -macOS や Ubuntu に標準で搭載されている`telnet`コマンドを使用すると、HTTP より下位の（ハードウェアに近い）プロトコルである**TCP**を用いて、通常ブラウザが自動的に送信する HTTP リクエストを人力で送信することができます。以下は、`localhost`の 8080 番ポートに対して HTTP リクエストを送る例です。 - -``` -$ telnet localhost 8080 -Trying 127.0.0.1... -Connected to localhost. -Escape character is '^]'. -GET / HTTP/1.1 -Host: localhost - -HTTP/1.1 200 OK -Date: Wed, 02 Sep 2020 01:56:02 GMT -Server: Apache/2.4.38 (Debian) -Last-Modified: Wed, 02 Sep 2020 01:47:49 GMT -ETag: "11b-5ae4ad2af4662" -Accept-Ranges: bytes -Content-Length: 283 -Vary: Accept-Encoding -Content-Type: text/html - - - - - - Hello World - - -
-

名前:

-

-
- - -``` - -まず、リクエストは - -``` -GET / HTTP/1.1 -Host: localhost -``` - -の部分です。 - -1 行目の`GET`を`リクエストメソッド`と呼びます。通常、ブラウザから適当なページを開くと、このリクエストメソッドを用いて通信が行われます。 - -スペースに続く文字列`/`がパスです。URL のパス部分が、クエリ文字列を含めてそのまま渡されます。続く`HTTP/1.1`は、HTTP プロトコルのバージョンです。 - -2 行目以降は**リクエストヘッダ**で、リクエストに対して付加的な情報を与えることができます。形式は`ヘッダ名: 値`の形で、1 行につき 1 ヘッダで記述されます。主に使用されるリクエストヘッダに、`Host`リクエストヘッダがあります。 - -`Host`リクエストヘッダには、アクセスしようとするサーバーのホスト（FQDN）を指定します。昨今では、物理的なサーバーの台数を減らして多くの Web サービスを稼働させるため、複数のドメインが同じサーバーに割り当てられている場合があります。その際、サーバー側ではどのドメインへのリクエストか判断できないため、この`Host`ヘッダを確認することにより、適切な応答をすることができるようになります。 - -レスポンスは、以下の部分です。 - -``` -HTTP/1.1 200 OK -Date: Wed, 02 Sep 2020 01:56:02 GMT -Server: Apache/2.4.38 (Debian) -Last-Modified: Wed, 02 Sep 2020 01:47:49 GMT -ETag: "11b-5ae4ad2af4662" -Accept-Ranges: bytes -Content-Length: 283 -Vary: Accept-Encoding -Content-Type: text/html - - - - - - Hello World - - -
-

名前:

-

-
- - -``` - -1 行目の`200`という整数は、**ステータスコード**と呼ばれ、HTTP リクエストの成否を端的に示すための値です。ステータスコード`200`は、リクエストが成功したことを示します。 - -2 行目以降は**レスポンスヘッダ**で、リクエストヘッダと対になる概念です。レスポンスヘッダから空行を一行あけて続く部分が、**レスポンスボディ**となります。 - -## POST リクエストを telnet で送信する - -以下は、`/members.php`に対して POST リクエストを送る例です。 - -``` -$ telnet localhost 8080 -Trying 127.0.0.1... -Connected to localhost. -Escape character is '^]'. -POST /members.php HTTP/1.1 -Host: localhost -Content-Type: application/x-www-form-urlencoded -Content-Length: 16 - -user-name=utcode -HTTP/1.1 200 OK -Date: Wed, 02 Sep 2020 02:12:14 GMT -Server: Apache/2.4.38 (Debian) -X-Powered-By: PHP/7.4.9 -Vary: Accept-Encoding -Content-Length: 165 -Content-Type: text/html; charset=UTF-8 - - - - - - メンバー向け - - - ようこそ！utcodeさん！ - - -``` - -リクエストは - -``` -POST /members.php HTTP/1.1 -Host: localhost -Content-Type: application/x-www-form-urlencoded -Content-Length: 16 - -user-name=utcode -``` - -の部分です。先ほどとは異なり、リクエストメソッドが POST になり、`Content-Type`と`Content-Length`リクエストヘッダが加わっています。 - -そして注目すべきなのは、リクエストヘッダから 1 行開けて、`user-name=utcode`という形式の**リクエストボディ**が存在する点です。これはクエリパラメータと同じ形式ですね。クエリパラメータが存在しなくてもデータが送信できる理由は、このリクエストボディが存在しているからなのです。 - -なお、`Content-Type`リクエストヘッダは、リクエストボディの形式を指定するものです。`application/x-www-form-urlencoded`は、クエリパラメータと同じ形式を表しています。 - -## 課題 - -商品検索システムを作ってみましょう。入力画面でプロダクト ID を入力すると、値段が表示されるようにしてください。データは - -```php -$data = [ - ['product_id' => 'A101', 'price' => 100], - ['product_id' => 'A102', 'price' => 300], - ['product_id' => 'B321', 'price' => 230], - ['product_id' => 'B334', 'price' => 360], -]; -``` - -を使用してください。 - -### ヒント - -`$data`は`product_id`キーと`price`キーを持つ連想配列の一次元配列になっています。`foreach`ループを回して、`product_id`が入力値と一致したらその時の`price`を出力しましょう。 diff --git a/docs/9-old/day04/09/use-post.png b/docs/9-old/day04/09/use-post.png deleted file mode 100644 index 15035ad3f..000000000 Binary files a/docs/9-old/day04/09/use-post.png and /dev/null differ diff --git a/docs/9-old/day04/10.mdx b/docs/9-old/day04/10.mdx deleted file mode 100644 index 37379a92b..000000000 --- a/docs/9-old/day04/10.mdx +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: JavaScriptの非同期処理 ---- - -## 同期処理と非同期処理 - -時間の掛かる処理があります。例えば、インターネット通信や、ファイルの読み込みといった類の処理です。これらの処理を一般的な方法で実装しようとすると、その処理を行う間、ユーザーからの入力が受けられない状態になってしまいます。これが俗に言う、`フリーズした`状態です。 - -幸いなことに、JavaScript では、時間の掛かる処理の待ち時間を、他の処理のために充てることができるような仕組みが用意されています。これを、**非同期処理**といいます。JavaScript における非同期処理は、歴史的にはコールバックを用いて処理されます。 - -```js -setTimeout(() => { - console.log("Text 1"); -}, 1000); -console.log("Text 2"); -``` - -`setTimeout`関数は、2 つの引数をとり、第 1 引数で指定された関数を、第 2 引数で指定された時間（ミリ秒）後に実行します。このように、システムによって処理の完了後に呼び出される関数を、**コールバック関数**と呼びます。上記の例では、コールバック関数の実行は後回しにされ、非同期的に実行されます。このため、実行結果は`Text 2`、`Text 1`の順となります。 - -それでは、`setTimeout`関数を用いて、1 秒毎に異なるメッセージを表示させることを考えてみましょう。すぐに思いつくのは、以下のようなコードです。 - -```js -setTimeout(() => { - document.write("Text 1"); - setTimeout(() => { - document.write("Text 2"); - setTimeout(() => { - document.write("Text 3"); - setTimeout(() => { - document.write("Text 4"); - }, 1000); - }, 1000); - }, 1000); -}, 1000); -``` - -くどいですね。一昔前の JavaScript では、上記コードのように、コールバック関数が大量に使用された結果、インデントが非常に深くなるという事態に陥っていました（コールバック地獄）。 - -この状況を解決するために生まれたのが、**Promise**と呼ばれる考え方です。Promise を用いると、上記のコードは以下のように書き換えることができます。 - -```js -function mySetTimeout(time) { - return new Promise((resolve, reject) => { - setTimeout(() => { - resolve(); - }, time); - }); -} - -mySetTimeout(1000) - .then((value) => { - document.write("Text 1"); - return mySetTimeout(1000); - }) - .then((value) => { - document.write("Text 2"); - return mySetTimeout(1000); - }) - .then((value) => { - document.write("Text 3"); - return mySetTimeout(1000); - }) - .then((value) => { - document.write("Text 4"); - return mySetTimeout(1000); - }); -``` - -## Promise に対応する関数やメソッドの作成 - -`setTimeout`関数は、昔ながらのコールバック関数を用いた形式となっています。そのため、Promise を用いて`setTimeout`を利用するためには、`setTimeout`を Promise に対応させるための関数（ラッパー関数）を作成する必要があります。 - -Promise に対応する非同期処理関数は、Promise クラスのインスタンスを返します。Promise クラスのコンストラクタは、ただ 1 つの引数をとります。この引数はシステムによって呼び出される関数で、呼び出し可能な二つの引数（`resolve`と`reject`）をとることができます。非同期処理はその関数の中で実行し、正常に終了した時点で`resolve`を、異常終了した場合は`reject`を呼びます。 - -`resolve`はただ一つの引数を取り、非同期処理の結果を渡します。`reject`はただ一つの引数を取り、処理の失敗の理由を渡します。 - -## Promise を用いた非同期処理に対応する関数の使い方 - -Promise に対応する非同期処理関数により得られた Promise クラスのインスタンスは、`then`メソッドを持ちます。`then`メソッドはただ一つの引数を取り、この引数は非同期処理の終了時にシステムによって呼び出される関数です。この関数はただ一つの引数を取り、非同期処理の結果を受け取ります。 - -また、この関数の中で別の Promise を返すと、その Promise が resolve された時点で、`then`メソッドの返り値として得られる Promise が resolve されます。 - -## Async / Await 文 - -Async / Await 構文を用いると、Promise を用いた非同期処理をさらに簡潔に記述することができます。 - -```js -async function promiseTest() { - await mySetTimeout(1000); - document.write("Text 1"); - await mySetTimeout(1000); - document.write("Text 2"); - await mySetTimeout(1000); - document.write("Text 3"); - await mySetTimeout(1000); - document.write("Text 4"); -} -promiseTest(); -``` - -`async`キーワードを指定した関数の中で`await`文が実行されると、その関数は Promise が完了（resolve または reject）されるまで実行が中断されます。Promise が resolve された場合にはその値が**await**文の戻り値となります。 - -なお、**await**文を使用する関数には、**async**キーワードを付与する必要があります。**async**キーワードが付与された関数は、自動的に戻り値が Promise 型となります。 - -## `await`文のの戻り値を利用したサンプル - -`await`文は、式の中で使用することもできます。この場合、式の評価が一時中断され、Promise が resolve されてから続きが評価されます。 - -```js -function delayedSquare(number) { - console.log(`delayedSquare ${number}`); - return new Promise((resolve) => { - setTimeout(() => { - resolve(number ** 2); - }, 1000); - }); -} - -async function delayedPythagoras(a, b) { - return Math.sqrt((await delayedSquare(a)) + (await delayedSquare(b))); -} - -(async () => { - console.log(await delayedPythagoras(3, 4)); -})(); -``` - -アロー関数にも、直前に`async`キーワードを付与することにより、`async`関数として扱うことができるようになります。上の例では、`async`キーワードをつけて生成した無名関数をその直後で実行させています。JavaScript において、`await`キーワードは`async`関数内のみでしか使用できないため、このような記述をよく見かけます。 - -:::note -[JavaScript のこの制約をなくすための提案](https://github.com/tc39/proposal-top-level-await)がなされており、いずれは実現されるものと思われます。 -::: - -## 課題 - -`input`要素上でキーが押されると resolve される Promise を返す関数`getKey`を定義してください。以下のように使用できることを想定しています。 - -```js -(async () => { - while (true) { - console.log(await getKey()); - } -})(); -``` diff --git a/docs/9-old/index.mdx b/docs/9-old/index.mdx deleted file mode 100644 index 9312f37cb..000000000 --- a/docs/9-old/index.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: "旧カリキュラム (2020)" ---- - -:::warning -この情報は、2020 年に執筆された旧カリキュラムです。現在はもうメンテナンスされていません。 -::: - -このカリキュラムで解説する内容は必要最小限にとどめてあります。課題を解きながら、不足する知識はインターネットを使用して調べる練習をしましょう。