JS道場に通って覚えたこと。

デジハリ大阪校さんの連続もの勉強会、かみやん先生の「JS道場」に行ってきました。
本やネットで得た知識でコピペしつつのこんなJSとか書いてるわけですが、正直、コピペ、卒業したいっす。私はコピペプログラミングですが、初学者の方も結構いらっしゃった印象でした。

作ったものはこちら！毎回教材を用意してくださりJSの部分をみんなで書いていくというスタイルでした。

• スライドショー
• モーダルウインドウ
• 無限スクロール
• パララックス
• ドロワーメニュー

ここでは道場で覚えた、主に実装の考え方の部分を書きたいと思います。

JS道場で覚えた考え方

実現したい処理をリストにして順番に実装していく！

何をやらないといけないかを項目出しをします。プログラマさんは日本語で書かないそうですが、まずは日本語でもいいじゃないか。

たとえばドロワーメニューだと、

• btn ボタンをクリックする
• DOM要素(ドロワー、ヘッダー、本文)を150px左へ動かす
• btn ボタンをクリックする
• DOM要素を150px右へ動かす

jQueryは便利機能＋ブラウザの違いを吸収してくれる！のに加えて、個人の感覚ですが、こんな感じで日本語(言葉)で考えて実装しやすいように作られてるな〜と思います。

リストに沿って、console.log や alert で、クリックできてるかとか一個ずつ確かめていくのは大事。

HTMLにクラスが付いているかどうかでJSに状態を判断させる。

たとえば「押しました」とか「動いていますよ」「ドロワーはいま開いているか？」など。実際多くの課題で使った命令も .hasClass とか .addClass でした。

ドロワーやスライドショーが横スクロールする動きなどをCSS3で実装すれば、ぐっとJSの実装がシンプルに考えられる！ ただCSS3しらねーんだぞ…ほう、Animate.cssとな！？

この考え方は「Classがどんな意味を持っているか」が大切で、スタイリングのためのものなのか、JS書く人とスタイリングする人が違う場合はお互いの意思疎通に気をつける。たしかにここは、一人で書いていてもグチャグチャにしてしまいそう。

イベント

JSの基本、イベントとは「クリックする」「HTMLの読み込みがおわった」「アニメーションがおわった」「キーが押された」さまざまな場面で発生する。

実戦でさっそく投入したのはデフォルトのイベントをキャンセルするevent.preventDefault();です。これもっと早く知りたかった。

event.○○○○ はJSの解説サイトや本でよく見かけるけどなんぞいな…と思っていたのですが、eventには、たとえばクリックのイベントの概要が取れて、どこをクリックしたのか、おしたキーコードは何番かなどの情報を持たせることができると。console で中身をみていろんなことわかりすぎだろうとびっくりしましたよ。

after JS道場

初めの方はちょっと余裕かましてたところがあったのですが(すみません)、ここにきて知らない話ばっかりで「私なんかコーダーとしてたいしたことないぜ」と思いました。「何を作るか」で講座が進んでいくのはイメージしやすくてありがたかったです。

まずは作ったものを実戦で使ってみたりすることからはじめつつ発展させていくことから始めます。HTMLと同じように、jQueryもJSも変化して行っていて、「モダンな書き方」というのがあるのでそれも追っかけていかないとあかんなあと。それをどうやって追っていってるのかも知りたいです。

この道場に通う前に、少し古い本ですが「すべての人に知っておいてほしいJavascriptの基本原則」という本を 買っておりました。プログラムの基礎から(jQueryも載ってるけど)JSの基礎から網羅されており、デザイナーむけのはずなのに鬼むずい。しばらく(古いけど)この本と、JS道場でとったノートを片手に勉強をつづけます。

すべての人に知っておいてほしい JavaScriptの基本原則