[超感覚C3講座] Webで掲示板を作ろう

新入生のみなさん．
こんにちは．
**rkun( [@rkunkunr](https://twitter.com/rkunkunr) )**と申します．

クルマとバイクとアニメが好きなキモオタです．よろしくおねがいいたします．あずにゃんぺろぺろ．

## 突然ですが
みなさん．**2ちゃんねる**って知ってますか？

掲示板ですね．まあ最近私もあんまり見ることないです．Twitterでいいよねってなります．

Twitterは「会員制交流サイト」と言われる通り，アカウントを作ってそのアカウントから投稿するというプロセスを取りますが，
掲示板はその都度名前を決め（というか決めずにランダム生成させることもある），ただただ投稿するというシンプルな構造をしていますね．

Twitterみたいなアカウント制のWebアプリを作るのは手間がかかりますが，掲示板は比較的簡単に作ることができます．

というわけで，今回は皆さんに
**JavaScript**を使って
**C3超感覚掲示板**の一部を作ってもらいたいと思います．


## JavaScriptのおべんつよ
JavaScriptとはプログラミング言語です．Web上で動かせるやつで，阿部寛のホームページみたいな骨董品じゃなければ大体どんなサイトでも使われています．

とりあえずちょっと簡単に書き方を説明したいと思います．

**コードの中の行頭が`//`のやつはコメントというやつで，実行するときには無視されるやつです！**

### 文字や数字の表現の仕方
```JavaScript
// 整数
123

// 小数
123.456

// 文字列
"今日も一日，がんばるぞい！！"
```
### 変数の宣言・代入
変数とは，値を入れる箱です．

```JavaScript
// 変数の宣言
var text;

// 変数への値の代入
text = "hogehoge";

// 宣言と代入を同時に
var text = "hogehoge"
```

### if文
if文は，条件分岐をするときの書き方です．

```JavaScript
var age = 18;
if(age >= 20) {
  // 20歳以上
  console.log("飲酒OK!!");
}else{
  // 20歳未満
  console.log("飲酒NG!!");
}

// Console: 飲酒NG!!
```
この
`today >= 20`は，「todayが20以上」という意味です．
### 関数  
関数とは，引数を受け取り，返り値を返す（返さなくてもいいよ）処理の塊である．

```JavaScript
// 関数を作る
function add(a, b) {
  console.log("Called!!");
  return a + b;
}

// 関数を利用する
var result = add(4, 5);

console.log(result);
// Console: 9
```
<!--
### オブジェクト
オブジェクトとは，変数とか関数とかを一つに固めたものです．（厳密にはちがうけど，そこは「オブジェクト指向」っていう講義で勉強しよう！！）
<font color="red">難しそうなので飛ばそう！！</font>

```JavaScript
// オブジェクトを作る
var syuman = new Object();

// オブジェクトを使う
// オブジェクト内の変数に代入
syuman.name = "主万";

// オブジェクト内に関数を代入
syuman.greet = function() {
  console.log("新入生のみなさん，こんにちは．私は部長の" + this.name + "ですわ．");
}

// オブジェクトの関数を使う
syuman.greet();
// Console: "新入生の皆さん，こんにちは．わたくしは部長の主万ですわ．"

// もちろんもう一回代入すれば上書きされる
syuman.name = "ニンジャブレンダーマヤ";

console.log(syuman.greet());
// Console: "新入生の皆さん，こんにちは．わたくしは部長のニンジャブレンダーマヤですわ．"
```
-->

### 配列
配列とは，変数がいっぱい列になって入っているもの

```JavaScript
// 作り方(a, b, cを入れておく場合)
var array = ["a", "b", "c"];
// 作り方(何も入れておかない場合)
var emptyArray = [];

// (注意！！) 最初は0から始まる
array[0];
> "a"
array[1];
> "b"
array[2];
> "c"
```

### 配列のforEach()
JavaScriptの配列には面白い機能がある．

```JavaScript
var members = ["唯", "律", "澪", "紬", "梓"];

keionClub.forEach(function(m) {
  console.log(m + "ちゃんカワイイ！！");
});

// Console:
//   唯ちゃんカワイイ！！
//   律ちゃんカワイイ！！
//   澪ちゃんカワイイ！！
//   紬ちゃんカワイイ！！
//   梓ちゃんカワイイ！！
```

### DOM
さっき，JavaScriptはWebサイトに動きをつけるものだといいましたね．あれは嘘ではありません．
HTMLの中にこんな要素があったとします．

```HTML
<div id="title">CompositeComputerClub</div>
```
これをJavaScript上で操作するために，この要素と対応したJavaScriptのオブジェクトが用意されています．

```JavaScript
var titleElem = document.getElementById("title")
```
で取得ができます．

このオブジェクトにはたくさんの変数と関数が入っており，例えば

```JavaScript
titleElem.innerHTML = "CompositeConstructionClub"
```
とすることでHTMLの表示を変更できます．部室とか自作してそうですね．


### JQuery(時間余ったら話す)
ボタンを押したら入力しておいたメッセージを出すコードをJavaScriptで書いてみましょう．

**HTML**

```HTML
<input type="text" id="msg_text"></input>
<button id="msg_button">Message</button>
```

**JavaScript**

```JavaScript
document.getElementById("msg_button").addEventListener(function(e) {
  alert(document.getElementById("msg_text").value);
});
```
この`getElementById`とか`addEventListener`が長くて書く気が失せますよね．

そこでどこかのえらいひとが**JQuery**というものを作りました．これを使うと，

```JavaScript
$("#msg_button").click(function(e) {
  alert($("#msg_text").val());
});
```
となります．短いですね．
ほかにもJQueryを使うととても便利なので，掲示板にも採用しています．

## C3超感覚掲示板

### 作り方
あらかた作っておいたので，皆さんには一部を考えて実装してもらいます．

#### CodePenについて
今回はCodePenというサービスを利用します．
https://codepen.io
ここのアカウントを作っておいてください．

(Forkせずにそのまま編集することも可能ですが，間違えてブラウザのタブを削除したときになにもかもどうでもよくなるので，ログインしてやることをおすすめします！！)



[ここ](https://codepen.io/rkunkunr-the-sasster/pen/qBOOajR)にアクセスし，右下のForkボタンを押します．
![ForkButton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108489/0d1b4ef3-58a4-9c86-27d4-4d638552a134.png)

これで，未完成のC3超感覚掲示板のコピーが自分のアカウントに作られます．

#### Consoleを活用しよう
Codepenの左下に**Console**というボタンがあるので，クリックしてみましょう！！


![scrot-20200424_223023.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108489/f07b8ba4-ddca-53cc-80aa-3bce0b8877c9.png)


こういうのが出ましたか？

これは，**Console**というやつです．

ここにJavaScriptで`console.log("メッセージ”)`したものが表示されます．

開発のときにとても便利なので表示した状態で作っていきましょう！！



### 実装
実際に実装していきましょう！！！
右側の「JS」画面を使っていきます．

#### 投稿を表示する機能(30行目)
## ここで実装してほしい機能
  1. `var postBox = generatePostBox(username, created_at, text)` を呼び出して投稿Boxを新しくつくり postBox 変数へ代入する．
  2. `prependPostBox(postBox)`を呼んで
  3. 挿入後，postBox.hide().fadeIn() をつかってフェードインさせる．

#### 投稿を送信する機能(57行目)
###### ここで実装してほしい機能
- 変数 username : 投稿ユーザー名
- 変数 text : 投稿内容

1. もし内容が""であれば，(if文)
  - showEmptyAlert()
  を行う．
  
2. 内容が空でなければ送信してOKなので，(else)
  - db.post(username, text)で送信する．
  - makePostFormEmpty()でフォームを空にする．
```