新入生のみなさん．
こんにちは．
**rkun( @rkunkunr )**と申します．

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

突然ですが

みなさん．2ちゃんねるって知ってますか？

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

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

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

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

JavaScriptのおべんつよ

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

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

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

文字や数字の表現の仕方

// 整数
123

// 小数
123.456

// 文字列
"今日も一日，がんばるぞい！！"

変数の宣言・代入

変数とは，値を入れる箱です．

// 変数の宣言
var text;

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

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

if文

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

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

// Console: 飲酒NG!!

この
today >= 20は，「todayが20以上」という意味です．

関数

関数とは，引数を受け取り，返り値を返す（返さなくてもいいよ）処理の塊である．

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

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

console.log(result);
// Console: 9

配列

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

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

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

配列のforEach()

JavaScriptの配列には面白い機能がある．

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

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

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

DOM

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

<div id="title">CompositeComputerClub</div>

これをJavaScript上で操作するために，この要素と対応したJavaScriptのオブジェクトが用意されています．

var titleElem = document.getElementById("title")

で取得ができます．

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

titleElem.innerHTML = "CompositeConstructionClub"

とすることでHTMLの表示を変更できます．部室とか自作してそうですね．

JQuery(時間余ったら話す)

ボタンを押したら入力しておいたメッセージを出すコードをJavaScriptで書いてみましょう．

HTML

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

JavaScript

document.getElementById("msg_button").addEventListener(function(e) {
  alert(document.getElementById("msg_text").value);
});

このgetElementByIdとかaddEventListenerが長くて書く気が失せますよね．

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

$("#msg_button").click(function(e) {
  alert($("#msg_text").val());
});

となります．短いですね．
ほかにもJQueryを使うととても便利なので，掲示板にも採用しています．

C3超感覚掲示板

作り方

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

CodePenについて

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

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

ここにアクセスし，右下のForkボタンを押します．

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

Consoleを活用しよう

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

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

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

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

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

実装

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

投稿を表示する機能(30行目)

ここで実装してほしい機能

var postBox = generatePostBox(username, created_at, text) を呼び出して投稿Boxを新しくつくり postBox 変数へ代入する．
prependPostBox(postBox)を呼んで
挿入後，postBox.hide().fadeIn() をつかってフェードインさせる．

投稿を送信する機能(57行目)

ここで実装してほしい機能

変数 username : 投稿ユーザー名
変数 text : 投稿内容

もし内容が""であれば，(if文)

showEmptyAlert()
を行う．

内容が空でなければ送信してOKなので，(else)

db.post(username, text)で送信する．
makePostFormEmpty()でフォームを空にする．