FC2ブログ

記事一覧

JavaScriptの変数、var、let、constについて

JavaScriptでは変数を宣言するキーワードとしてvar、let、constがあります。そのうちlet、constはECMAScript2015(JavaScriptの標準仕様)から用いられたものです。今回はvar、let、constのそれぞれの特徴についてまとめたいと思います。varについてvarで宣言された変数は再宣言、再代入できる変数となります。再宣言とはvar a = 1;var a = 2;このように変数名aという変数を同じ名前で再定義することです。再代入とはvar a =1;a = ...

続きを読む

requestAnimationFrameの利用

requestAnimationFrameについてJavaScriptのメソッドにアニメーション等を作るのに便利なrequestAnimationFrameというメソッドがあります。requestAnimationFramemeメソッドは以前紹介したsetIntervalメソッドと同様に一定間隔で処理を繰り返すメソッドです。setIntervalメソッドとの違いはrequestAnimationFramemeメソッドには処理の間隔の時間を指定する引数はなく1秒間に60回の処理を行うようになっています。Canvasを用いたア...

続きを読む

制御文を用いた配列の要素の操作

配列の要素は前もって用意したものだけではなく、スクリプトで生成する要素もあります。そういった要素を制御文を用いて配列に加えて操作することもできます。このスクリプトはfor文を用いて空の配列aに要素bを5個加えて表示するスクリプトです。pushメソッドで配列aに要素bを順に加えています。それぞれの要素は乱数を用いて生成しています。配列の要素の順番や数を参照して制御文や条件分岐に用いることでさらに自由に配列を操作...

続きを読む

二次元配列とcanvas

複数の配列を一つの配列にまとめるデータの集まりを一纏めに扱うことのできる配列ですが、複数の配列も一つの配列に纏めることができます。つまり各要素が配列である配列として纏めます。複数の配列をまとめた配列は多元配列と呼びます。今回は多元配列のうちの二次元配列について記したいと思います。二次元配列についてvar a =[date1,date2,date3,date4];var b =[date5,date6,date7,date8];var c =[date9,date10,date11,date12];...

続きを読む

SVGのアニメーション

SVGのアニメーションについてSVGは静止画だけではなくアニメーションとして描写を動かすこともできます。SVGのアニメーションにはSMIL(Synchronized Multimedia Integration Language)を用います。SMILとはXMLによって時間による動的な描写やレイアウトなどを記述する言語です。今回はSMILのanimate要素を使ってSVGの描写を動かしたいと思います。animate要素の使い方animate要素は時間経過によってSVGを描写する属性の値を変化さ...

続きを読む