Skip to content

ほとんどのタームから type を削除しました。 #573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aster-void merged 5 commits into from
Nov 8, 2023
Merged

ほとんどのタームから type を削除しました。 #573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
32b2008
チェックポイント: build 確認
aster-void Nov 8, 2023
44fa12e
完成
aster-void Nov 8, 2023
400c4ee
メモ消し忘れてました
aster-void Nov 8, 2023
b63c243
Merge branch 'master' into remove-type-from-most-term
aster-void Nov 8, 2023
b14ef49
format
aster-void Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions docs/1-trial-session/02-html/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import openInBrowserVideo from "./open-in-browser.mp4";
import showFileExtensionsVideo from "./show-file-extensions.mp4";
import reloadBrowserVideo from "./reload-browser.mp4";

Web 開発に必ず用いられる言語があります。<Term type="html">**HTML**</Term> と CSS、そして JavaScript です。これらは互いに異なる役割をもっています。まずは最も基本となる <Term type="html">HTML</Term> から学んでいきましょう。
Web 開発に必ず用いられる言語があります。<Term>**HTML**</Term> と CSS、そして JavaScript です。これらは互いに異なる役割をもっています。まずは最も基本となる <Term>HTML</Term> から学んでいきましょう。

![Web開発で用いられる言語](./web-development-languages.drawio.svg)

## <Term type="html">HTML</Term> を書き始める
## <Term>HTML</Term> を書き始める

VS Code の画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー ( `command / Ctrl + S` ) を用いてください。

Expand All @@ -30,7 +30,7 @@ VS Code の画面左端には、ファイル一覧が表示されています。

<video src={createFileVideo} controls />

## ブラウザで <Term type="html">HTML</Term> ファイルを開く
## ブラウザで <Term>HTML</Term> ファイルを開く

前頁で作成したフォルダを開き、`index.html` が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World`の部分だけ太字) が表示されましたか？

Expand All @@ -40,25 +40,25 @@ VS Code の画面左端には、ファイル一覧が表示されています。

VS Code 上で作成したファイルは `index.html` でした。しかしながら、Windows でフォルダの中身を見ると `index` しか表示されません（Mac の場合は正しく表示されます）。なぜでしょうか？

ファイル名の `.` (ピリオド) 以降の部分は<Term type="fileExtension">**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term type="html">HTML</Term>ファイルであることを明示するためです。
ファイル名の `.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term>HTML</Term>ファイルであることを明示するためです。

実は Windows では、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。

<video src={showFileExtensionsVideo} controls />

:::

## <Term type="html">HTML</Term> の構造
## <Term>HTML</Term> の構造

それでは、先ほどのファイルの中身を見ていきましょう。

`<strong>World</strong>` の部分に注目してください。

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

{/* prettier-ignore */}
<Term type="tag">タグ</Term>は、`<tag>内容</tag>` のように、<Term type="tag">タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term type="startTag">**開始タグ**</Term>と<Term type="endTag">**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
<Term type="startTag">開始タグ</Term>から<Term type="endTag">終了タグ</Term>までのまとまりを<Term type="element">**要素**</Term>といいます。
<Term>タグ</Term>は、`<tag>内容</tag>` のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
<Term>開始タグ</Term>から<Term>終了タグ</Term>までのまとまりを<Term>**要素**</Term>といいます。

`body` 要素の中身を書き換え、次のようにしてみましょう。

Expand All @@ -76,7 +76,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
</html>
```

繰り返しになりますが、<Term type="html">HTML</Term> を編集したら、`command / Ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
繰り返しになりますが、<Term>HTML</Term> を編集したら、`command / Ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。

![ファイルを保存する](./save-file.png)

Expand All @@ -92,33 +92,33 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな

<video src={reloadBrowserVideo} autoPlay muted loop controls />

`<a href="https://www.google.com/">～</a>` は **`a` <Term type="element">要素</Term>** です。<Term type="startTag">開始タグ</Term>の中に `href="https://www.google.com/"` という部分があります。これが<Term type="attribute">**属性**</Term>です。<Term type="attribute">属性</Term>は、<Term type="startTag">開始タグ</Term> の中に `属性名="値"` のように記述され、<Term type="element">要素</Term>の特徴を表します。`a` <Term type="element">要素</Term>の **`href` <Term type="attribute">属性</Term>**は、ハイパーリンクのリンク先を表す<Term type="attribute">属性</Term>です。
`<a href="https://www.google.com/">～</a>` は **`a` <Term>要素</Term>** です。<Term>開始タグ</Term>の中に `href="https://www.google.com/"` という部分があります。これが<Term>**属性**</Term>です。<Term>属性</Term>は、<Term>開始タグ</Term> の中に `属性名="値"` のように記述され、<Term>要素</Term>の特徴を表します。`a` <Term>要素</Term>の **`href` <Term>属性</Term>**は、ハイパーリンクのリンク先を表す<Term>属性</Term>です。

これにより、ハイパーリンクが設定されます。この例では `a` <Term type="element">要素</Term>の中に `strong` <Term type="element">要素</Term>が含まれています。このように、HTML タグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。
これにより、ハイパーリンクが設定されます。この例では `a` <Term>要素</Term>の中に `strong` <Term>要素</Term>が含まれています。このように、HTML タグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。

![ネストされた要素](./nested-elements.png)

## <Term type="html">HTML</Term> の文法
## <Term>HTML</Term> の文法

それでは、作成した <Term type="html">HTML</Term> をもう一度見直してみましょう。
それでは、作成した <Term>HTML</Term> をもう一度見直してみましょう。

すべての <Term type="html">HTML</Term> ファイルは、
すべての <Term>HTML</Term> ファイルは、

```html title="index.html"
<!doctype html>
```

という、「このファイルは <Term type="html">HTML</Term> ファイルだ！」と宣言する定型句から始まります。
という、「このファイルは <Term>HTML</Term> ファイルだ！」と宣言する定型句から始まります。

続けて記述されるのは `<html lang="ja">` 、つまり **`html` <Term type="element">要素</Term>** です。<Term type="html">HTML</Term> は、この `html` <Term type="element">要素</Term>を根とした木構造になっています。このため、`html` <Term type="tag">タグ</Term>の閉じ<Term type="tag">タグ</Term>はファイルの末尾に現れます。
続けて記述されるのは `<html lang="ja">` 、つまり **`html` <Term>要素</Term>** です。<Term>HTML</Term> は、この `html` <Term>要素</Term>を根とした木構造になっています。このため、`html` <Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。

`html` <Term type="element">要素</Term>の直属の子<Term type="element">要素</Term>は、**`head` <Term type="element">要素</Term>**と**`body` <Term type="element">要素</Term>**の二つだけです。このうち、後者 (`body` <Term type="element">要素</Term>) が実際にブラウザの表示領域上に表示されることになります。
`html` <Term>要素</Term>の直属の子<Term>要素</Term>は、**`head` <Term>要素</Term>**と**`body` <Term>要素</Term>**の二つだけです。このうち、後者 (`body` <Term>要素</Term>) が実際にブラウザの表示領域上に表示されることになります。

![HTMLの構造](./html-structure.drawio.svg)

:::info

ブラウザの画面内に表示される情報を表すのは `body` <Term type="element">要素</Term>中だけなので、<Term type="html">HTML</Term> ファイルの編集は通常 `body` <Term type="element">要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する <Term type="html">HTML</Term> のサンプルコードは `body` <Term type="element">要素</Term>内部のみを記述することとします。
ブラウザの画面内に表示される情報を表すのは `body` <Term>要素</Term>中だけなので、<Term>HTML</Term> ファイルの編集は通常 `body` <Term>要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する <Term>HTML</Term> のサンプルコードは `body` <Term>要素</Term>内部のみを記述することとします。

:::

Expand Down
22 changes: 11 additions & 11 deletions docs/1-trial-session/03-javascript/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ title: JavaScript ことはじめ

import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";

## <Term type="javascript">JavaScript</Term>
## <Term>JavaScript</Term>

{/* prettier-ignore */}
<Term type="html">HTML</Term> がウェブサイトの構造を表す言語だとすれば、<Term type="javascript">**JavaScript**</Term> はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
<Term>HTML</Term> がウェブサイトの構造を表す言語だとすれば、<Term>**JavaScript**</Term> はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。

![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)

## <Term type="javascript">JavaScript</Term> で Hello World!
## <Term>JavaScript</Term> で Hello World!

プログラミングの世界では、まず画面に `Hello World!` と表示させることが慣例になっています。<Term type="javascript">JavaScript</Term> を用いて画面に `Hello World!` を表示してみましょう。
プログラミングの世界では、まず画面に `Hello World!` と表示させることが慣例になっています。<Term>JavaScript</Term> を用いて画面に `Hello World!` を表示してみましょう。

まずは、`index.html` を次のように書き換えます。

Expand All @@ -40,27 +40,27 @@ document.write("Hello World!");

<video src={helloWorldByJavascriptVideo} controls />

## <Term type="javascript">JavaScript</Term> が動く仕組み
## <Term>JavaScript</Term> が動く仕組み

<Term type="html">HTML</Term> ファイルの中に、以下のような記述があります。
<Term>HTML</Term> ファイルの中に、以下のような記述があります。

```html title="index.html"
<script src="./script.js"></script>
```

まず、この記述によって、 `script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが <Term type="javascript">JavaScript</Term> です。
まず、この記述によって、 `script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが <Term>JavaScript</Term> です。

:::info

この講座の中では、`script` <Term type="element">要素</Term>を常に **`body` <Term type="element">要素</Term>の末尾**に記述するようにします。これは、<Term type="javascript">JavaScript</Term> が読み込まれるタイミングで他のすべての <Term type="element">HTML 要素</Term>がすでに表示されていることを保証するためです。
この講座の中では、`script` <Term>要素</Term>を常に **`body` <Term>要素</Term>の末尾**に記述するようにします。これは、<Term>JavaScript</Term> が読み込まれるタイミングで他のすべての <Term>HTML 要素</Term>がすでに表示されていることを保証するためです。

:::

## <Term type="javascript">JavaScript</Term> の基本文法
## <Term>JavaScript</Term> の基本文法

{/* prettier-ignore */}
<Term type="javascript">JavaScript</Term> のプログラムで、セミコロンで区切られた部分を<Term type="javascriptStatement">文</Term>と呼びます。
<Term type="javascript">JavaScript</Term> の実行環境は、プログラム中に含まれる<Term type="javascriptStatement">文</Term>を上から下に向けて順番に実行していきます。
<Term>JavaScript</Term> のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。
<Term>JavaScript</Term> の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。
`document.write` はブラウザの画面に出力するための命令です。

```javascript title="script.js"
Expand Down
Loading