jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.2.10

非プログラマのHTMLコーダーがJavaScriptの基礎を習得するためのステップ

Category:
Column

僕もそれなりにJavaScriptを扱えるようになり、業務でもマネージメントを任されるようになってきたので、いまは後輩に技術習得のためのアドバイスをしたり、ノウハウを伝えることにも興味が出始めています。

先日、コーダーの友人と一緒に小規模な勉強会を開催しました。彼はプログラム経験のない、html/cssを主に扱い動的UI実装はjQueryで補填するタイプのコーダーでしたが、彼にcanvasアニメーションを教えるうえで気づいたことをまとめておきます。

非プログラマがJavaScriptを習得する際にぶつかる壁

いろいろあるとは思いますが、今回の勉強会では以下3点が挙がりました。

  1. jQueryを使う以外にDOMを制御する術を知らない。
  2. 関数や制御構文を使うという発想がすぐに出てこない。
  3. 座標計算が苦手。

1. jQueryを使う以外にDOMを制御する術を知らない。

「jQueryオブジェクトで制御できれば業務上差し支えない。」という意見もあるでしょうし、それについては同意ですが、$.animate()、$.css()、$.show()、$.fadeIn()などといった見た目を制御するメソッドを使いまわしているだけという人もいます。

そのような人が、たとえばjQuery以外のライブラリに手を伸ばそうと思った場合に、また挫折を味わうのではと思います。

たとえばThree.jsでは、ステージを用意し、光源をあて、オブジェクトを配置するといった処理で以下のように記述をします。(threejs.orgの公式ドキュメントから引用)

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var light = new THREE.AmbientLight( 0x404040 );
scene.add( light );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

当然ですがこれはjQueryよりも素のJavaScriptの文法に近いです。
jQueryがないとDOMを操作することもできないというようであれば、上記のコードを解釈することも難しいのではないでしょうか。

2. 関数や制御構文を使うという発想がすぐに出てこない。

これは文法を知ること以上に、発想力の問題と思います。

  • 似たような処理は関数化する。
  • 何度も繰り返す処理は制御構文を使う。

という発想ができれば、あとはfunctionなりfor文なりを覚えて使うだけです。
しかしそもそも職業コーダーであれば、自分が担当する業務のどのタスクでこのような発想をすべきか、それを想像することがまず難しいということもあるでしょう。

3. 座標計算が苦手。

これはプログラマというより、UIを設計するフロントエンドエンジニアに特別求められる要素かもしれません。

例えばabsoluteな要素を配置する場合、親のrelativeな要素を起点にしてcssで位置を指定します。これをanimate()を使って直線移動させるだけならまだいいですが、円軌道や放物線軌道でアニメーションさせたいなどといった場合は詰みそうです。

また複数のオブジェクトを一定間隔に並べていくといった際には、起点からオブジェクト1つごとに座標を更新していくことになりますが、その単純な四則演算にもアレルギーを持つ人がいます。

学習素材としてのcanvas描画

これらの解決には例題をこなしてもらうのが一番です。例題のモデルケースとして今回の勉強会で持ちだしたのは、三角関数を使って円軌道上の一定間隔でオブジェクトを配置するといったものでした。

以下はサンプルです。

See the Pen Bezier Curve Circle by ykob (@ykob) on CodePen.

canvas描画であれば素のJavaScriptで記載できますし、演算も繰り返しも使え、さらにそれがグラフィックとして描画されるので自分が行った処理を視認で直感的に理解しやすい。

勉強会ではこれをさらにアニメーションさせたいと思っていましたが、今回はそこまで至りませんでした。今後も引き続き同じような場を企画していきたいと思います。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.