ドットインストールリアル参加してきました（追記あり） #dotinstall

（追記：本文追加しました2/23 23時頃）

昨日はプログラム学習Webサービスのリアル版「ドットインストールリアル#0000」に参加してきました。
#0000ということで、初回ではなくプレ回なんでしょう、きっと。

ちょうど19時頃に着いたので、PCの準備などゆっくり出来ました。
講師のtaguchiさんに初めてお会いしましたが（遠目で見てただけ）、想像してたガンプラ姿とは全然違いましたね。百式も素敵ですが、本人も素敵でした。

講義開始

画面に既に出来ている簡単なプログラムが表示されて、◯◯診断・・・名前を入れて、ボタンを押すと・・・ドラクエ風の職業が表示される。。

『あなたは「勇者」です』

「はい、これを作ってください」

( ﾟдﾟ)ﾎﾟｶｰﾝ

プログラムの勉強会ってこんなノリなのかっ！
と思いつつ、早速皆さんカタカタとキーボードを叩き始めます。

僕は職業柄HTML、CSSあたりはお手の物なので、とりあえず見た目を作り始めました。
h1タグ打って～、input置いて～、HTMLでの見た目は楽勝です。

で、Javascriptは初心者なので書き方のイロハがわかってません。

ボタンにidは振ったし・・・scriptタグの中にjavascriptを書いて・・・。
とりあえずちょっと前にやったJavaScriptで作る「簡単おみくじ」 (全3回)（要ログインかな）を参考に、職業の文字列を配列に突っ込んで・・・。そのままおみくじと同じようにランダムで配列を引き出せるようにして・・。あ、function作ってないじゃん、やべやべ。で、え～とHTMLに表示させるのなんだっけ・・・あ、そうそうgetElementByIdね・・・。

と、ごにょごにょしながら職業部分は完了。

そうしていると、講師のtaguchiさんが助け舟を出し始めます。HTMLの書き方から順番に。
HTML辺りは問題無いので説明を聞かずに自分勝手にカタカタ。

フォームに入力した名前を取得する方法がわからず暫く詰まってたら、説明してくれてなんとかクリア。
あとは適当に結果を変数に入れて、innerHTMLで表示。

当然一発では表示されず、Chromeのコンソールログを確認。

fanction xxxx(){
の行でエラーが発生している・・・なんだろう・・・。

a →　u でした。

というようなスペルミスなどであっさり引っかかるところが素人っぽい。
と、紆余曲折しながらなんとか課題クリア。

退屈して遊び始める

自分の課題が終わった時点で時間を持て余したので、とりあえず課題が出来たことをハッシュタグでツイート（笑）
そのままヒマを持て余してもつまらないので、同じ班（同じテーブル）の人に声をかけてみる。ちょっと暇だったんですごめんなさいw

班の人もあんまり問題なさそう（？）だったので、自分のプログラムを眺めててひらめいた！

改造しちゃえ。
仕事でも人の書いたプログラム（主にPHP）をいじるのは慣れているので、そのノリです。

ドラクエの職業だから・・・HPとかMPとか設定して表示されるようにしてみよう。

・・・・（ここから講師の話をほとんど聞かなくなります）

if関数を使って、職業によって分岐して・・・どうやって配列を表示させようか・・・。
と勝手に試行錯誤して出来たのが、↓のデモプログラムです。

ホントは木の実とか種とかのアイテムを使うとステータスが増えるように設定したかったけど、まだまだ技術が足りずそこまではできませんでした。

遊んでいる間に、前で知らないこと（appendChildなど）を書いていて、内心慌ててましたが、とりあえず自分のinnerHTMLの部分を修正。セキュリティ上の注意点らしいです。大規模サービスを作るときは気を付けないといけませんね。

講義終了

人数が多かったせいか、一つ目の課題を全員が完成させた時点で残り時間がわずかとなってしまい、質問タイムになりました。

ドットインストールのマイページで質問などを集計していて、凄い設計だと改めて関心。
作ったコードもマイページに保存しておきました。

その後、懇親会へ流れて飲んで食べて・・同じ目的で集まっている人は話しやすくて楽しいですね。
また、次回も参加したいです。

それでは、今日のところはこのへんで。

（↓元文）
取り急ぎ、課題で作った◯◯診断+ちょこっと改造した駄プログラムを晒しておきます。レビューは後でします・・・たぶん。

デモページ

</p> <h1>○○診断</h1> <p>あなたの名前を入力してください</p> <p><input type="text" id="name" value="" /></p> <p><input type="button" id="shindan" value="診断！" onclick="getJob();" /></p> <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label> <div class="toc-content"> <ol class="toc-list open"><ol><li><a href="#toc1" tabindex="0">講義開始</a></li><li><a href="#toc2" tabindex="0">退屈して遊び始める</a></li><li><a href="#toc3" tabindex="0">講義終了</a></li></ol></li><li><a href="#toc4" tabindex="0">診断結果</a></li></ol> </div> </div> <h2><span id="toc4">診断結果</span></h2> <div id="kekka">ここに結果が表示されます</div> <p>あなたのステータスは…</p> <div id="statusOut"></div> <div id="item" style="display: none;"> <div>いのちの木の実→HP＋3～5</div> <div>ふしぎな木の実→MP＋3～5</div> <div>ちからの種→力＋1～3</div> <div>ちりょくの実→賢さ＋1～3</div> <div>すばやさの種→早さ＋1～3</div> </p> </div> <div id="tweet"></div> </div> <p> <script type="text/javascript"> function getJob(){ document.getElementById('kekka').innerHTML = ''; var name = document.getElementById('name').value; var job = ["勇者","戦士","魔法使い","遊び人","スーパースター"]; var result = Math.floor(Math.random() * job.length); //形容詞をつける var dress = ["体力自慢の", "寛容な", "豪傑な", "切れ者の", "一匹狼の"]; var dresult = Math.floor(Math.random() * dress.length); var kekka = name + "さんは「" + dress[dresult] + job[result] + "」です"; var text = document.createTextNode(kekka); document.getElementById('kekka').appendChild(text); //職業ごとのステータス if(job[result] == "勇者"){ var status = {'HP':80,'MP':30,'力':20,'賢さ':20,'素早さ':15}; }else if(job[result] == "戦士"){ var status = {'HP':100,'MP':0,'力':25,'賢さ':5,'素早さ':10}; }else if(job[result] == "魔法使い"){ var status = {'HP':20,'MP':50,'力':5,'賢さ':25,'素早さ':8}; }else if(job[result] == "遊び人"){ var status = {'HP':40,'MP':10,'力':10,'賢さ':5,'素早さ':25}; }else if(job[result] == "スーパースター"){ var status = {'HP':60,'MP':40,'力':15,'賢さ':15,'素早さ':15}; } //パラメーターの入力 document.getElementById('statusOut').innerHTML = "HPは" + status['HP']; document.getElementById('statusOut').innerHTML += "/MPは" + status['MP']; document.getElementById('statusOut').innerHTML += "/力は" + status['力']; document.getElementById('statusOut').innerHTML += "/賢さは" + status['賢さ']; document.getElementById('statusOut').innerHTML += "/素早さは" + status['素早さ']; var tweetLink = '<a rel="noopener" href="http://twitter.com/intent/tweet?text=' + kekka + '&hashtags=dotinstall" target="_blank">ツイートする</a>'; document.getElementById('tweet').innerHTML = tweetLink; } </script><br />
※WordPressのタグ自動補完のせいか、変なタグがいろいろ入り込んでます・・・直さねば。