プログラミングを勉強して、相槌を打ってくれる「あいづちくん」を作った

たいしたことないですが、「あいづちくん」を作ったことによる学びを、自分のメモ代わりにまとめました。どなたかの参考になることを願って･･･

こちらから遊べる･･･というものでもない、本当に最初の最初の初心者が作るものですが、

よかったら見てみてください。

この「あいづちくん」は、夢に出てきたのです。自分が見た夢から着想を得ました。

夢で見なかったら「何作ろう･･･作るもんがないな･･･」ってなかなか手が動かなかったと思いますｗ

※オンラインスパルタ（ｗ）スクール、ウェブカツで学んだもののアレンジです

プログラミングを勉強して相槌をうつ「あいづちくん」を作った

やっている処理

・文字数カウント（javaScript）

・文字数に応じて表示する文字を変える（jQuery）keyupメソッド

・文字数に応じて表示する画像を変える（jQuery）keyupメソッド

他の処理

おっさんが出てきたとき、<p>タグにclass=”majigire”が追加されるように

addClass(‘majigire’)で指定。（jQuery）

CSSで.majigireに文字サイズを大きくするスタイルを指定。（font-size）

こういった流れを作りながら学びました。

こんな感じで考えてやっていって、思い通りに動いたときは本当に嬉しいです。

こういった試行錯誤を経験することが、何かを1から作ることの大切さなんだなと思いました。

プログラミングって発想の勝利だな～ってやってて一番思いましたね、、

どの処理でやるか？って、ある意味パズルっぽいというか、、

CSS

おっさんが震える処理は、「画像　震える　CSS」とかでググってコピペしただけです。

CSSだけでブルブル震わせる | q-Az

CSSだけで文字や画像をブルブル震わせてみます。複雑な感じにブルブル震わせることもCSSを細かく記述すれば出来るのですが、なるべく短いシンプルな記述でブルブル震えるよう見える感じにしてみました。CSSだけでブルブルCSSのanimationを使って永久アニメーションをさせます。HTML<spa

q-az.net

ただ脳死でコピペするんじゃなく、まだ学んでないからよくわからないけど、アニメーションのセレクタ指定は@～から始まるのかな？とか、

translateって単語が入ってるぞ。とか、display: inline-block;が入ってるのでブロック要素でないと動かないとか、なんとなく意味を考えながら貼りました

学び

pタグに勝手に上下の余白がつく

もしかするとウェブカツのHTML初級でやってたかもしれませんが、すっかり忘れました。（先に進むとどれかを忘れる、ウェブカツあるある）

開発ツールで見ると、このオレンジの線は「margin」です。

なのでmarginを0にすればいいのかなと思いきや、変わらず、

margin: 0;
padding 0;

にすることで、隙間がなくなりました。

おっさんが出てきたとき、おっさんとと文字の幅が開きすぎており、

せっかくおっさんが出てきても、字が見えなくなってインパクトを与えられないなーと思ったので

最終的に

margin: 5px 5px 20px 5px;

とすることで自分の理想通りになりました。果たしてこれでいいのか？（笑）

ほぼ自分ひとりの力でできて、自信になった

何度もツイッターで聞いてしまおうか迷いましたが、自力でできたことで、力がついたと思います。

全くわからないことをググって解決できた。

pタグに追加するにはどうしたらいいんだ？→

「クラス　子要素　追加」などでググる→

$(‘○○’)で指定する　これっぽいな。→

やってみたら、理想通りに動いた！

の感動。この達成感があるから辛くてもやめられないのかもしれません（笑）

開発ツールを見る大切さを知った

なんとなくindex.htmlとAtomのみで、F5でその都度更新して動き確認する、みたいなやり方をしていたのですが

開発ツールで見ていると、例えば「50文字以上入力されたときに、「へー」という文字を出す。」という指示をしていた場合、開発ツールもリアルタイムで切り替わっていくんですよね。

なので、jQueryでaddClass(“classname”);としたときに、どの親要素に対してクラスが追加されていくのか？などがリアルタイムで瞬時にわかり、

使わないでいるよりも、時間をだいぶ短縮することができました。

「あれっ！？自分としてはpに追加するようにしたつもりなのにdivに追加されてしまっている･･･！？」ということは根本から間違ってるんだ。ここを直せばいけるかな？みたいな（笑）

頭で考えてるだけだとうまくできない。メモに書く

これが、サイトやwebサービスを作る時の「モック」（一度簡単な設計を書く）にも通じるんだなあと。

あやふやなところ

テキストエリア608pxに対しbody 808px。

文字カウントの数字のwidth 780px。（笑）

これで画面サイズをいくら変えても崩れなかったので良いことにしたけど、これでいいのかな？（笑）

改善点

開発ツールを見てわかる通り（あ、jsは見れないのか）、

これをズラーーーッと書き連ねてるだけです。

一番最初だけ頭使って完成させて、あとはコピペです。

今後はswitch文でのコードの短縮にも挑戦します。

switchって、”case”の中に　length > 30　とか書けるんですかね･･･？ようわからん。

ただ、これはウェブカツのjs部「文字カウント」「ユーザー登録フォームを作ってみよう！」の流用なところもありますので

のくだりとか。

技術的には、正直、自分ではすごく成長した！！とは思えませんが、やっぱり得るものは大きかったです。

また、次回

「もし250文字を越えたとき、その後、250文字を割っても他の文字を出さないようにする」

を実装しようかと思ってます　今、おっさんが出たあとBackSpace押してもおっさん消えないんですよね、、（pタグの中は変わるのに･･･）

あいづちくん、ポートフォリオに入れられるんですかね？（笑）

ウェブカツ！！の詳細を見てみる