Skip to content

Commit 7fcde59

Browse files
chelprocchelproc
committed
1日目の記事の完成
1 parent ff397c1 commit 7fcde59

28 files changed

+421
-8
lines changed

‎docs/day01/04.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,22 @@ title: HTMLの基礎
2525

2626
HTMLファイルは、文書に意味を持たせるために、**タグ**と呼ばれる構造を持つことができます。タグは、`<tag>`のような、「小なり」と「大なり」で囲まれた英数字のまとまりです。
2727

28-
タグは、`<tag>内容</tag>`のように、タグ名の先頭にスラッシュを付けるか否かの区別により**開始タグ**と**終了タグ**となり、内部のテキスト等を挟み込むことができます。開始タグから終了タグまでのまとまりを**要素**（Element）といいます。
28+
タグは、`<tag>内容</tag>`のように、タグ名の先頭にスラッシュを付けるか否かの区別により**開始タグ**と**終了タグ**に別れ、内部のテキストや別のタグを挟み込むことができます。開始タグから終了タグまでのまとまりを**要素**（Element）といいます。
2929

30-
開始タグは`<tag type="value">`のように、`属性名="値"`の形式で**属性**を指定することができます。例えば、`html`タグには`lang`属性を指定することができ、その文書が何の言語で記されたものであるかを示すことができます。
30+
開始タグには、`<tag type="value">`のように、`属性名="値"`の形式で**属性**を指定することができます。例えば、`html`タグには`lang`属性を指定することができ、その文書が何の言語で記されたものであるかを示すことができます。
3131

32-
全てのHTMLファイルは、一行目の
32+
また、全てのHTMLファイルは、一行目の
3333

3434
```html
3535
<!DOCTYPE html>
3636
```
3737

38-
という「このファイルはHTMLファイルだ！」と宣言する定型句ののち、html要素を頂点とした木構造を形成します。
38+
という「このファイルはHTMLファイルだ！」と宣言する定型句ののち、`html`要素を頂点とした木構造を形成します。
3939

40-
`html`要素の直属の子としては、`head`要素と`body`要素がそれぞれ1つずつのみ存在します。このうち、`head`要素は文書のメタ情報（文書自身関する情報）を格納し、上記の例であれば`title`要素によって文書のタイトルを、`meta`タグの`charset`属性において文字コードを指定しています。`body`タグの中には実際に画面に表示され得る情報を記述します。
40+
順を追って見ていくと、`html`要素の直属の子としては、`head`要素と`body`要素がそれぞれ1つずつのみ存在することが分かります。
41+
42+
このうち、`head`要素は文書のメタ情報（文書自身に関する情報）を格納するものです。上記の例であれば`title`要素によって文書のタイトルを、`meta`タグの`charset`属性において文字コードを指定しています。
43+
44+
`body`タグの中には実際に画面に表示される情報を記述します。今回は`Hello World`というテキストのみが存在していますね。
4145

4246
HTMLの定型的な部分はそこそこ長いので、最初のうちはコピペで構いません。そのうち覚えます。

‎docs/day01/05.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
title: "課題: HTMLのみを使用してフォームを作成する"
33
---
44

5-
単一のHTMLファイルのみを使用して、以下のようなフォームを作成してみましょう。
5+
単一のHTMLファイルのみを使用して、以下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすらHTMLタグを並べるのみです。
66

77
![課題の例](05/task-sample.png)
88

99
実際に動作する例は、[こちら](https://ut-code.github.io/utcode-learn-answers/01/)をご覧ください。
1010

1111
見た目だけでは分かりづらい部分もあります。例えば、IDやパスワードの入力欄は表形式になっています。`html 表`などと検索してみてください。
1212

13-
最後の部分は箇条書きです。こちらも同じく`html 箇条書き`などと検索してみると良いでしょう。
13+
また、最後の部分は箇条書きです。実は、HTMLには、箇条書きのための専用の要素が用意されています。`html 箇条書き`などと検索してみてください。
1414

1515
:::tip
1616
課題が完成したら、Slack上でソースコードを共有してください。書いたコードを誰かに読んでもらうことで、間違っている部分に素早く気づくことができます。

‎docs/day01/06.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ title: ディレクトリ構造
1111
* `http://127.0.0.1:5500/sub.html`
1212
* `http://127.0.0.1:5500/sample/sub2.html`
1313

14-
のような感じです。ディレクトリ構造はスラッシュを区切り文字として対応します。
14+
のような感じです。ディレクトリ構造がスラッシュを区切り文字として表現されているというイメージですね。
1515

1616
なお、`index.html`は少し特別な意味を持ち、実はURL上では省略可能な場合が多いです。例えば、`http://127.0.0.1:5500/index.html`は、`http://127.0.0.1:5500/`のように書き換え可能だったりします。便利ですね。
17+
18+
`a`タグを利用すると、あるページから別のページへの**ハイパーリンク**を作成することができます。
19+
20+
```html title="index.html"
21+
<a href="sub.html">リンク</a>
22+
```
23+
24+
としてみて、どのように表示されるか確認してみてください。

‎docs/day01/07.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Gitのインストール
3+
---
4+
5+
Gitは、**バージョン管理システム**の一種です。Gitのようなバージョン管理システムを用いることで、複雑になりがちなソフトウェアの開発の工程の履歴を克明に記録することができます。現代のソフトウェア開発において、Gitが使われないケースは稀でしょう。
6+
7+
:::info
8+
以下のインストール手順は、Macユーザーには必要ありません。macOSには標準でGitが搭載されています。
9+
:::
10+
11+
Gitのインストーラーを公式サイトからダウンロードします。
12+
13+
![Gitのダウンロード](07/download-git.png)
14+
15+
画面の指示に従ってインストールします。標準の設定で特に問題ありません。
16+
17+
![Gitのインストール](07/install-git.png)
18+
19+
ターミナル上でGitが使用できることを確認してください。
20+
21+
![Gitがインストールされていることの確認](07/confirm-git.png)

‎docs/day01/07/confirm-git.png‎

81.9 KB
Loading

‎docs/day01/07/download-git.png‎

688 KB
Loading

‎docs/day01/07/install-git.png‎

17.1 KB
Loading

‎docs/day01/08.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: GitHubへの登録とGitの初期設定
3+
---
4+
5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
8+
Gitが管理するソースコードのまとまりを**リポジトリ**といいます。**GitHub**を用いると、クラウド上にGitリポジトリを保存しておくことができ、チーム開発を円滑に進めることができます。
9+
10+
GitHubに登録しましょう。
11+
12+
![GitHubへの登録](08/register-github.png)
13+
14+
## 公開鍵と秘密鍵の作成
15+
16+
GitHubにGitを用いて接続する際、自らを正規のユーザーであると証明するため、公開鍵と秘密鍵のペアを作成します。ターミナル（Windowsであれば`PowerShell`、macOSであれば`Terminal.app`）で以下のコマンドを実行します。
17+
18+
:::note
19+
公開鍵暗号に関する詳細な説明は省略しますが、教養学部の情報の教科書にも載っていますし、詳しい数理的背景を知っている必要もありません。重要なのは、公開鍵暗号を用いることで何ができるのか、という点です。
20+
:::
21+
22+
```
23+
$ ssh-keygen -t ed25519
24+
Generating public/private ed25519 key pair.
25+
Enter file in which to save the key (/Users/[ユーザー名]/.ssh/id_ed25519):
26+
Created directory '/Users/[ユーザー名]/.ssh'.
27+
Enter passphrase (empty for no passphrase):
28+
Enter same passphrase again:
29+
Your identification has been saved in /Users/[ユーザー名]/.ssh/id_ed25519.
30+
Your public key has been saved in /Users/[ユーザー名]/.ssh/id_ed25519.pub.
31+
The key fingerprint is:
32+
SHA256:xjZbER36s2DNfwNCpk963KAvSa3+EPiOHILpLKqH1kE [ユーザー名]@[コンピューター名]
33+
The key's randomart image is:
34+
+--[ED25519 256]--+
35+
| |
36+
| |
37+
| |
38+
| |
39+
| |
40+
| |
41+
| |
42+
| |
43+
| |
44+
+----[SHA256]-----+
45+
```
46+
47+
このとき、`/Users/[ユーザー名]/.ssh/id_ed25519`が秘密鍵の保存場所、`/Users/[ユーザー名]/.ssh/id_ed25519.pub`が公開鍵の保存場所です。Windowsの場合は`C:\Users\`から始まる文字列となっていることでしょう。
48+
49+
:::info
50+
以後、「$」から始まる行は入力するコマンドを表すものとします。上記の場合であれば、`ssh-keygen -t ed25519`がコマンド入力です。このコマンドは何度か対話的な入力を求めてきますが、今回は何も入力せずEnterキーを押して構いません。
51+
:::
52+
53+
公開鍵が格納されたファイルの中身を表示させます。`cat`コマンドを利用すると、ファイルの中身を簡単に表示させることができます。
54+
55+
```
56+
$ cat /Users/[ユーザー名]/.ssh/id_ed25519.pub
57+
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIFNwa2O/BIlw+WvisPCrSlM6IS2M2bbCRKNU9G8NYq2L [ユーザー名]@[コンピューター名]
58+
```
59+
60+
`ssh-ed25519 AA...2L`の部分をコピーしましょう。これが公開鍵です。
61+
62+
## 公開鍵をGitHubに登録する
63+
64+
![設定画面へ移動](08/go-to-settings.png)
65+
66+
以上の図のように設定画面に移動し、[`SSH and GPG keys`](https://github.com/settings/keys)を選択します。`New SSH key`から先ほどコピーした公開鍵を入力します。
67+
68+
![SSH鍵の登録](08/ssh-key-registeraton.png)
69+
70+
公開鍵の登録は基本的に1端末につき1つです。鍵を作成した端末を区別できる適当な名前を「Title」に指定しておきましょう。
71+
72+
## Gitの初期設定
73+
74+
設定画面の[Emails](https://github.com/settings/emails)から、ダミーのメールアドレスを取得することができます。Gitを使用するにはメールアドレスが必要ですが、正直に正しいメールアドレスを入力してしまうとそれがGitHub上にアップロードされたとき、全世界中に自分のメールアドレスが公開されることになってしまうからです。
75+
76+
![ダミーのメールアドレスの取得](08/dummy-email-address.png)
77+
78+
ターミナルからGitの初期設定を行います。
79+
80+
```
81+
$ git config --global user.email [ダミーのメールアドレス]
82+
$ git config --global user.name [GitHubのユーザー名]
83+
```
84+
85+
GitがGitHubを利用できるようになりました。

‎docs/day01/08/dummy-email-address.png‎

35.4 KB
Loading

‎docs/day01/08/go-to-settings.png‎

224 KB
Loading

0 commit comments

Comments
 (0)