Javascript

CoffeeScriptでプライベート変数を定義する方法

CoffeeScriptのプライベート変数は、コロンではなくイコールで 下記は、人間に自己紹介させるクラスです。_nameはプライベート変数にしてあります。CoffeeScriptでは、プライベート変数はクラス定義の直下に書きます。プラベートメソッドの場合は、変数の値…

JavaScriptで座標を配列とオブジェクト、どちらで管理した方が処理が早くなるか実験

オブジェクトより配列を使ったほうが、計算が早くなると思いましたが実際は違いました。C言語の時は、プリミティブ値が連続的に配置された集まりだったから配列の走査が速いのかもしれません。JavaScriptだと配列はArrayオブジェクトなので、なるべくオブジ…

vuejsのグラフサンプルであるレーダーチャートの座標計算を読み解く

vue.jsの公式サンプルであるレーダーチャートの仕組みを見ていきます。 これはpolygonというsvgの多角形を描画する要素に、各頂点の座標を渡すことで描画しています。正多角形ではなく、各ステータス値によって頂点を変動させます。重要なのはこの頂点の座標…

TodoMVCのBackbone.js版はどのようにtodoを新規作成して描画しているのか

様々なJavaScriptフレームワークを使って、同じTodoアプリを作る企画TodoMVCをご存知でしょうか?今回はBackBone.js版のソースコードを読み解いていきます。全てを追うのではなく、タスク名を入力して新規タスクがどのように作られるかを掴んでいきましょう…

開いているタブからタイトルとリンクをmarkdown形式で取得するChrome Extensionを作成してみた

現在開いているタブのタイトルとリンクをmarkdown形式でクリップボードにコピーするエクステンションを作りました。必要なファイルは下記の3種類です。 icon用の画像 js/backgound.js manifest.json Chrome extensionを作成するのは今回が初めてです。その際…

gulpのbrowserifyとwatchifyの違いを実際に使いながら理解する

gulpはgruntに比べて記述がわかりやすいです。ですが、情報量はgruntの方が多い感じがしました。gulpは外部モジュールのオプションに何があるのか、どう使えばいいのかがわからなかったのですがgithubのリポジトリを見ればちゃんと書いてありました。今回は…

CoffeeScriptでクラスを作り、コンパイル後のjsファイルを読み解く

CoffeeScriptで手続き的に記述していたプログラムを抽象的にするために、いくつか関数化を試みていました。ですが、関数名に悩むのでクラスにすることに。けど、JavaScriptでのクラスも経験が全然ないので、CoffeeScriptをコンパイルしてできたjsファイルを…

アニメーションの速度がどんどん加速してしまう。

物体を回転させるアニメーションを作っていたのですが、何か挙動がおかしいことに気が付きました。時間が経つごとに回転の速度が加速していき、そのうち動きがカクカクになってしまいます。おそらく、回転速度が速くなりすぎてカクカクになっているかと思い…

物体が前後に長く歪んで見える

立方体や球を作成した時に、すごい違和感を感じました。なんか長さがおかしく感じるのですよ。下記に画像を載せておきます。 アスペクト比を間違えると画面が歪む 原因は画面のサイズとアスペクト比が合っていないことでした。私は現在、ブラウザウィンドウ…

JavaScriptとJavaでは整数の割り算結果が違う

JavaScriptとJavaで整数の割り算の結果が異なることを知りました。てっきりJavaScriptでも小数未満切り捨てが行われるかと思っていました。 実験用ソースコード Java public class Test { public static void main(String[] args) { System.out.println(54 /…

ライトを作成なくてもメッシュモデル(物体)が表示されてしまう

Three.jsはライトを追加しないと画面が真っ暗になってしまうと解説を読んだのですが、何故かライト(光源)を1つもsceneに追加していないのにメッシュモデルが表示されてしまう現象が起きました。原因はマテリアルにありました。 光の影響を受けないマテリア…

tree.jsのメッシュのpositionとはどこを表すのか

ソースコードはgithubで公開しています。 tree.jsで立方体を作る際に、幅・高さ・奥行きを決めるのですが、これらの数値はどこから測られるのか、よく分からなかったので確かめてみました。 座標をすべて0にして試してみる 10cmの立方体と、その立方体の高さ…

JSで○×ゲームをつくってみる1

プログラムは使って覚えた方がいいと思いますが、いきなり大きいものに取りかかると挫折するので、簡単なものを作って覚えていくことにしました。今回はJavaScriptで○×ゲームを作っています。demoの公開の仕方がよくわからないので、とりあえずjsdoitという…

enchant.jsを学ぶ前に3つのオブジェクトを知ろう

JavaScriptのライブラリenchant.jsはご存知ですか?ゲームがより簡単に作れるようになるライブラリです。今回、enchant.jsを学ぶ前に知っておいたいいこととして、独自のオブジェクトを3つまとめてみました。enchant.jsの全体の動きは3つのオブジェクトを理…