- ベストアンサー
アートでJavaScriptを学びたい
- フロントエンドに精通したい方におすすめなJavaScriptの学習方法とは？jQuery依存から脱却し、アプリ開発にも役立てたい方必見。
- JavaScript学習のモチベーションを高く保つためには、アニメーションやインタラクティブな作品を作るというアート系のアプローチが有効です。
- 元デザイナーやコーダーがJavaScriptを習得する方法や勉強法についても紹介します。
- sn41
- お礼率45% (5/11)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
一端の情報系の学生ですが、失礼いたします。 ■前置き 確かに既存のライブラリは便利であればあるほど自由度が低くなります。 アニメーションひとつにしても速度関数の種類で動作感が変わりますよね。 モチベーションについてですが、技術習得を中心にして実装するのと、実装を中心にして技術本をコンサルトするのとは真逆ですが、私は後者です。 そして、後者の場合、実装中の疑問をその都度グーグルで検索すれば事足りる、というのが現代の現状です。（基礎的なことをしっかり知るためには書籍が頼れるかもしれません。） 私は心が折れそうなときは、イメージの最終形態に少しでも近づけるよう、フリーの画像や効果音をあさりに出かけます（パソコンの中で）。 ■結論 アートのサイト：わかりません 書籍：基礎がわかる書籍（アートをやりたいということでクラスの作り方をしっかり解説している書籍の中からレベルを選んでいただけるといいと思います。アートは存在する物体とクラスを綺麗に結びつけると途端に書き易くなります。） 勉強法：作りたいアートの最終形態をイメージして、実装中に出た疑問をその都度グーグルで調べる ■以降、Javascriptでアートしか作成しない私がアートを作成する際にすることを記します。参考までに。 イメージ → 概念構成 ← プログラム まず、作品の最終形態をイメージします。何を作りたいか。 なにが作れるのか、は「Javascriptの仕様的に無理だ」と挫折してからでいいのでとにかくイメージします。 そしてそのイメージがどんな要素で成り立っているのかを考えます。クラスの構成につながります。 最後にその構成を基にしてプログラムを書きます。 私が過去に作成したライントレーサのJavascriptを例に説明いたします。 ・イメージ まずライントレーサ、黒い線を引いたらロボットがその上を走る、そしてそのロボットはセンサー３つを持っていて、それぞれのセンサーが黒い線の上にあるのか、白い地を感知しているのか、取得している。ロボットはそれをもとに移動するが、移動のパターンは直進、左回転、右回転に絞ろう。 ・概念構成 レールが存在する ロボットが存在する ＞センサーが存在する ＞＞センサーの値が黒か白かを取得する関数が存在する ＞センサーの値をもとにロボットを動かす関数が存在する ※後の拡張のし易さにもつながります。 これを時間をかけて考えることは、後の実装の手早さでモトが取れるので、いくら時間をかけてもかまわないと思います。私はノートとボールペンでアイディアを書いています。 ・プログラミング function RAIL(){ } function ROBOT(){ this.sensors = []; // 配列 for(var i=0; i<3; i++){ this.sensors[i] = new SENSOR(); } this.MoveBySensors = function(){...} } function SENSOR(){ this.GetValue = function(){...} } ※アートで100行を超えるちゃんとしたものを作ると、このクラス構造をいかに綺麗に作るかが問題になります。 すみません、クラス（構造体？）を理解されている前提で話していますがご存じなければグーグル（基礎により書籍のほうが良いかもしれません）でお願いします。 Javascriptのクラスは関数とごっちゃになるかもしれない特殊なものではありますのでご注意ください。 ■技術的なアドバイス 経験則ですが、物体と結びつけたクラスに、位置や速度の値を持たせることに加え、位置を実際にプラウザに反映させるメソッドを持たせるとよいと思っています。 this.position = new VEC2(100, 200); // 二次元ベクトル this.elm = document.getElementById("div_abc"); this.View = function(){ this.elm.style.width = this.position.x; this.elm.style.height = this.position.y; } といった感じで。 二次元ベクトルのクラスは自分で定義しました。 だいたい要素の位置情報に関しては（私は）これで安定しています。 数日後の参考までに。 ■そして そしてですが、こうしてワクワクしながら作品を作っているうちにJavascriptはマスターできるでしょう。
その他の回答 (2)
- Ogre7077
- ベストアンサー率65% (170/258)
楽しいものを作っていたら、いつの間にか習得できた、が理想だと思います。 アートっぽい楽しいもので、素の JavaScript+HTML5 で実現でき、プログラミングが比較的簡単な題材として「フラクタル図形の描画」をオススメします。とくにマンデルブロイ集合の描画はロマンを掻き立ててくれるでしょう。 検索すればいろいろ実例が出てきますが、解説どおりに実装しても習得できたとは言い難いため、以下のヒントだけで実装してはいかがでしょうか。 描画ボタンをクリック時 http://www.ajaxtower.jp/js/event/index2.html フォームから入力値を読み取る操作 https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement 計算式 http://ja.wikipedia.org/wiki/マンデルブロ集合 canvas 要素の操作 https://developer.mozilla.org/ja/docs/Web/HTML/Canvas/Tutorial ちなみに、私のアイコンは上記の要領で4時間程で描画した画像です。 楽しかったです。
- b0a0a
- ベストアンサー率49% (156/313)
アニメーションやインタラクティブなものは コードが複雑で量も多くなりがちで難しいです 加えて数学や専門的な知識が必要になることもあります それに、基本的なことが分からなければ当然応用はできません 英語法の基礎をやらずして英会話ができるかというのと同じです つまり結局、まずは入門書に書いてあるようなことをやるのは変わらないのです とはいっても、入門書の内容を最初から最後までなぞる必要はないです 入門書は流れの参考程度にして、沢山の入門サイトを利用して断片的に勉強し、 実際に自分の興味があるものを作ろうとしてみて、 わからない知識はその都度ググればいいと思います つまり自主的に学ぶということです とりあえずさらっとサンプルを全部見てどんなことができるのかを知っておいて、 必要だ、または興味があると思うものをやっていけばいいです
お礼
b0a0a様 ご回答ありがとうございます。 確かにまず基本的なフローをおさえられないと、 簡単な部分でも躓いてしまいますね。 今までの勉強法として、書籍を一冊一冊読んでいましたが、 重複する部分もだいぶ見えてきましたので、必要なポイントのみを 拾い読みして、手を動かす比重を高めていこうと思います。 ジェネレーティブアートは最終目標として、まずは 簡単なアニメーションから入っていこうと思います。
お礼
Ogre7077様 ご回答ありがとうございます。 「楽しいものを作っていたら、いつの間にか習得できた」 まさにこのパターンが理想だと思います。 （プログラミング学習において、 ・技術自体を習得する為に学習する ・作りたいものがあって、それを達成するために必要な情報を集める だと、後者のほうが圧倒的にモチベーションが高まりますよね） 参考例もありがとうございました。 こちらを参考に実装方法を自分なりに考えて見ようと思います。