$(function(){ の意味が解らないところからjQuery入門

# 概要
jQueryを勉強して、これを作ります。
<p class="codepen" data-height="216" data-theme-id="0" data-default-tab="result" data-user="sgigagaeru" data-slug-hash="MLzEZE" style="height: 216px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="MLzEZE">
  <span>See the Pen <a href="https://codepen.io/sgigagaeru/pen/MLzEZE/">
  MLzEZE</a> by sgigagaeru (<a href="https://codepen.io/sgigagaeru">@sgigagaeru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# $()は$document.ready()の略
参考になりそうなjQueryのサンプルを探して見ると`$(function(){`で始まっていて「`function`の前の`$(`ってナニ？」となりました。それで参考書「[Web制作の現場で使うjQueryデザイン入門](https://www.amazon.co.jp/dp/B00CU33LBA/, "Amazonのページへのリンクです")」を買って読みました。
`$(`は`$document.ready(`の略で、文書が読み込まれたら括弧内の処理を実行するの意でした。
文書の末尾にscriptを書くと、全ての文書が読み込まれた後で実行されます。その場合は`$(function(){`は不要です。

# 要素を指定して、それに対して何かする
jQueryを使うときは「HTML文書内の要素を指定して、それに対して何かをする」と考えれば良さそうでした。

```js

$("button").text("←選べない");
```
これはbutton要素を指定して（このHTML中には一つしかbutton要素がないので特定できます）、そのtextを「←選べない」に変える。

```js
$("#instruction").text("「壱」「弐」「参」が選べない状態です。");
```
これは`id=instruction`を持った要素のtextを『「壱」「弐」「参」が選べない状態です。』に変える。

```js
$("select").prop("disabled", true);
```
これは、select要素のプロパティdisabledをtrueにする。

# ボタンが押されたら何かする
```js
$("button").click(function(){
  [ボタンが押されたときの処理]
});
```
これでボタンが押されたときの処理が書けます。
button要素を指定して、そこでclickイベントが起きたときの処理を書いています。

# 大体できた
```js
$("button").click(function(){
  $("button").text("←選べない");
  $("#instruction").text("「壱」「弐」「参」が選べない状態です。");
  $("select").prop("disabled", true);
  return false;
});
```
ここまでをまとめて、ボタンを押されたときの処理は上のようにしました。大体できてきましたね。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="result" data-user="sgigagaeru" data-slug-hash="yZQpyZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="yZQpyZ">
  <span>See the Pen <a href="https://codepen.io/sgigagaeru/pen/yZQpyZ/">
  yZQpyZ</a> by sgigagaeru (<a href="https://codepen.io/sgigagaeru">@sgigagaeru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 少しはまったところ
`$("select").prop("disabled", true);`のところですが、HTML表記では`<select disabled>`になります。
なので`attr`を用いて`$("select").attr("disabled", "")`のような書き方をしてたんですが、それでは動きませんでした。`prop`を使うのが正解です。

あと最後に`return false;`をいれていますが、これがないとページ遷移が発生します。今回のケースでは、同じページに遷移すなわちリロードが発生して、書き換えたテキストや属性が初期値に戻ります。

# 今回の完成形
いまは一度ボタンを押したらそれっきりになってしまうので、トグルするように、変数を入れて状態を切り替えるようにして完成です。
<p class="codepen" data-height="216" data-theme-id="0" data-default-tab="result" data-user="sgigagaeru" data-slug-hash="MLzEZE" style="height: 216px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="MLzEZE">
  <span>See the Pen <a href="https://codepen.io/sgigagaeru/pen/MLzEZE/">
  MLzEZE</a> by sgigagaeru (<a href="https://codepen.io/sgigagaeru">@sgigagaeru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 参考
以下の記事で書いたようにBootstrapを学んで、今回のHTMLを作成しました。
[Bootstrap公式ドキュメントを読む前に最低限知っておきたいこと](https://qiita.com/sgigagaeru/items/2166cf4d23bf4d088ae9)