チートシート 📌

<h1>My website</h1>

いちばん大きい見出し。ページに1回だけ——本のタイトルみたい。

<h2>Chapter</h2>

小さめの見出し。<h6>（いちばん小さい）まであるよ。

<p>Hi, this is text.</p>

普通のテキストの段落。

<strong>important</strong>

文字を太くする。

<em>interesting</em>

斜体（傾いた）文字。

<a href="https://example.com">Click</a>

リンク。href に飛び先のアドレスを書く。

<img src="dog.jpg" alt="My dog">

画像。src = 画像ファイル、alt = 読み込めなかったときの説明。

<ul>
  <li>first</li>
  <li>second</li>
</ul>

丸印のリスト。各項目は <li>。

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

番号付きリスト——番号はブラウザが自動でつける。

<div class="card">...</div>

一緒のものをまとめる箱。class の名前は自分で決める。

<!-- note to myself -->

コメント。ブラウザは無視する——自分用のメモ。

h1 {
  color: red;
}

すべての <h1> 見出しが赤くなる。

.card {
  background: yellow;
}

class="card" のものは背景が黄色に。ドットは「この class を探す」という意味。

p {
  font-size: 20px;
}

段落の文字サイズ。数字が大きいほど文字も大きい。

body {
  font-family: Arial;
}

ページ全体のフォント。

.card {
  padding: 16px;
}

内側の余白——中身と箱の端の間。

.card {
  margin: 16px;
}

外側の余白——周りのものとの距離。

.card {
  border: 2px solid black;
}

枠線：太さ、線の種類、色。

.card {
  border-radius: 12px;
}

角を丸くする。数字が大きいほど丸い。

.menu {
  display: flex;
  gap: 10px;
}

中のものが横並びになる。間隔 10px。メニューの魔法！

img {
  width: 200px;
}

画像の幅。高さは自動で調整されてつぶれない。

const name = 'Kate';

変数——ラベル付きの箱。何かを入れておく。

let points = 0;
points = points + 1;

let は変えられる箱。ここでは1点足してる。

alert('Hi!');

メッセージボックスが出る。最初の実験にぴったり。

console.log('it works');

コンソール（F12）にメッセージを出す——プログラマー用の秘密の窓。

document.querySelector('h1')

ページの最初の <h1> を見つけて、操作できるようにする。

element.textContent = 'New text';

見つけた要素の中の文字を入れ替える。

element.addEventListener('click', () => {
  alert('Clicked!');
});

誰かがクリックしたら、中のコードが動く。

if (points > 10) {
  alert('You won!');
}

条件：かっこの中が正しいときだけ、中のコードが動く。

element.classList.toggle("dark");

class がなければ追加、あれば削除。ダークモードはまさにこう動く。

const r = await fetch(address);

API にリクエストを送って、答えを待つ（await）。

const data = await r.json();

返事をオブジェクトに変えて使えるようにする。

data.current_weather.temperature

ドットでオブジェクトから値を取り出す——普通のオブジェクトと同じ。

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = サーバーにデータを送る。body にオブジェクトを文字列にしたものを入れる。

{ "city": "Prague", "temperature": 21 }

JSON——API の共通言語。文字は引用符、数字はなし。

JSON.stringify(obj)

オブジェクトを JSON 文字列に変える（送る前に）。

JSON.parse(text)

JSON 文字列をオブジェクトに戻す（受け取ったあと）。

process.env.AI_KEY

サーバーで：.env ファイルから秘密のキーを読む。キーはブラウザに入れちゃダメ！

cd my-website

my-website フォルダに移動（cd = change directory）。

ls

今のフォルダの中身を表示（Windows では dir）。

node server.js

Node.js で server.js ファイルを実行。

npm install

プロジェクトに必要なパッケージを全部ダウンロード。

git status

前回の保存から何が変わったか表示。

git add .

すべての変更を保存の準備（ドット = 全部）。

git commit -m "Added a menu"

変更を履歴に保存。何をしたかメモも付ける。

git push

保存した変更を GitHub に送る。