もじれつとがめん

プログラムの忘備録とゲームとかその他色々。

基本的な文法とかいろいろ

javascriptとは

javascriptとは主にwebのブラウザ上で動作することを目的とした言語らしい。
ただし、流行りだした当初はブラウザ上で右クリック禁止やずっと付きまとう広告等のかなりユーザーからしてみるとうっとうしいものに使用されたため世間からは糞言語呼ばわりされたそうな。。
しかし、GoogleMapの非同期通信で大活躍をしてからというもの手のひら返しで優遇されて現在はwebにはなくてならない存在に。
さらに近年ではNode.jsなるものが出てきて更なる進撃を見せているらしい(自分の中の偏見なのであしからず)

扱い方

変数から連想配列、ファイルの扱いとかふつうに扱うに必要なことをつらつら書いていく。

記述法

基本的にはhtmlファイルの中にscripitタグで囲って記述する方法と、別ファイルとしてスクリプトを書くのかのふた種類がある。

別ファイルの中

別ファイルに記述した場合は、別ファイルにそのままスクリプトを記述するだけ。
特に難しい事はなく、そのまま書くだけ。
ただし、htmlの中でそのファイルの呼び出しだけはしなくてはならない。
私自身はそうしなけらばならない場合を除いてこの方法を使う。
なぜなら可読性が高いし、処理ごとにまとめてファイル化してしまえばよりメンテナンス性が上がるから。

html内に呼び出しの記述をするだけだけど、特別な理由が無い限り一つの場所に纏めて呼び出しした方が余計なバグを生まなくてすむ。
また、大抵はheadタグ内に記述するかbodyタグ終了直後に記述するのが普通。 [html] <html> <head> <script src="jsファイルへのパス"></script> <script src="/hoge/fuga/imo.js"></script> </head> <body> <h1>やっはろー?</h1> </body> </html> [/html] また、この方式はオープンソースのファイルを呼び出す時にも使う。
bootstrapとかtinymceとか使うときもサーバーやローカルにファイルを落としてそのパスを指定する方法と、web上のどっかのサーバーに置かれてるファイルを指定する事も出来る。
もちろんweb上のどっかのファイルを指定した場合、インターネットに接続してないと扱えないしページの読み込む速度も遅くなるので注意する事。

htmlファイルの中

scriptタグのなかで記述する。
こちらも大抵はheadタグの中かbodyタグの終了直後に記述することが多い。
どちらかに統一して記述していくのが基本で、そうしないと非常に可読性が悪い。

[html] <html> <head> <script> var name = "もじれつとがめん"; //idがtitle_nameのタグの中に変数nameを代入する $('#title_name').text(name); </script> </head> <body> <h1>やっはろー?</h1> <span id="title_name"></span> </body> </html> [/html]

この方法で記述するときは、別ファイルに分ける事が出来ない理由がある時か、そもそも分ける必要がない位コードの量がすくない場合でしか私は使わない。
でも、どんなにコード量が少なくても個人的には別ファイルで記述する方が後々助かるだろうしお勧めする。

変数の扱い

javascriptでは、変数はphpperl等の型の宣言が不要な物。
どんな形式の物でも入るので特に悩む必要は無い、、はず。
変数の宣言の仕方は var 変数名 と記述するだけ。だが、スコープもあるので関数を扱う場合には注意する事。
[javascript] //変数の宣言 var name;

//変数の初期化と代入 name = ''; name = 'もじれつとがめん';

//変数の初期化と宣言 var title = ''; var site_name = 'もじれつとがめん'; [/javascript] 変数の宣言をしたら、それ以降は var は不要なので注意。
また、スコープだが基本的には関数内で宣言した変数は関数の外では使用できない。
逆に関数の外で宣言した変数は関数内で使用できる。 そのため、変数の名前がかぶって値がめちゃくちゃにならないように気をつける事。
スコープは初めイメージしづらいと思うので、関数に囲まれてない変数はどこでも使えて、関数内の変数はその中でしか存在しないとだけは覚えておくと楽かもしれない。
どこでも使える変数の事をグローバル変数とも言う。
[javascript] //どこでも使える変数(グローバル変数) var global = 'もじれつとがめん';

//関数の呼び出し(実行) test();

//ログには 'がめんともじれつ'が表示される console.log(global);

//ログには存在しない変数を使おうとした為undifnedと表示されるはず console.log(local); //関数 function test(){ //この関数の中でしか使えない変数 var local = 'モジレツトガメン';

//コンソールログに 二つの変数をつなげて出力する。
console.log(global + local);

//グローバル変数を操作する。
global = 'がめんともじれつ';

} [/javascript]

関数の扱い

javascriptの関数はまぁphpとかperlと似たような扱い。
関数は宣言部分と、呼び出し部分の二つからなる。 普通は宣言より前に呼び出しは出来ないとおもうが、javascriptはソースをいったん全て読み込んだ上で処理を書かれた順番に実行するのでそこらへんは平気。 ただし、関数の中に関数を設定した場合は例外となるので注意。
[javascript]

//実行されずにエラーが帰ってくる imo();

//関数呼び出し //もちろん呼び出しが後でも動作する test()

//関数の中の関数は、上位の関数がよびだされた後なら使用可能に imo();

//関数の宣言 function test(){ //引数なしの関数 var count = 0; while (1){ count++; console.log('現在の数字は' + count); if ( count >= 10 ) break; }

//この関数は直接呼び出せない
function imo(){
    console.log('ポテトはウメェぞ!!!');
}

} [/javascript] 関数を普通に扱うにはこれくらい理解すれば大抵は作れる。
クロージャなるものもあるらしいので、いずれ追記するとしよう。

配列の扱いについて

javascriptの配列はあらかじめ"なんの"配列か宣言しておく必要がある。
連想配列なら"{}"で、普通の配列なら""で変数を初期化するか、変数の宣言時に"new Array()"で初期化する事で対象の変数が配列としての扱いになる。
他言語と違うのはその変数が配列用ので初期化する事でその変数が配列で扱えるところだろう(他言語をよくわかってないので偏見だけど、、)

配列とは

配列について初めての人はそもそも概念が理解できないと思うのでちょっと自分の解釈で解説。

配列の初期化

配列・連想配列と共に宣言と同時に代入するか、空の配列を渡す事で初期化できる。
なんにせよ、初期化してからじゃないと配列は扱えないので記述するときは初期化する事を忘れないように。

初期化には幾つか方法があって、目的によって使い分ける。

new Array

配列を new Array で初期化する方法。 [javascript] //配列として初期化 var array_1 = new Array();

//初期化と同時に要素をつくる // array_2は imo すし 3 ろぼっと を持つ配列 var array_2 = new Array('imo', 'すし', 3, 'ろぼっと');

//初期化と同時に任意の数の空の要素を生成する var array_3 = new Array(25); //array_3の要素数である 25 が表示される console.log(array_3.length); [/javascript] このnew Arrayだが、ぶっちゃけ今はあまり使われてないらしい。
というのも、マシンスペックが無かった時代は配列をあとからpush等で付け足したりすると処理が重くなったためあらかじめ要素を必要な数だけ宣言しておく...
といった背景があった為、よくこの方法で必要な数だけを先に生成していたがマシンスペックが向上してきにする必要がなくなった為あまり使われない宣言の方法になったっぽい。
私もこの方法より後述の方法の方をオススメする。

を使って初期化

配列を を使って初期化する方法。
個人的にはこちらの方法を使用して配列を初期化するのをオススメする。
[javascript] //配列として初期化 var array_1 =
;

//初期化と同時に要素を生成する var array_2 = ['imo', 'すし', 3, 'ろぼっと']; [/javascript] こちらは今の一般的な宣言方法だと、思いたい。
特に要素数を気にしないならこちらをオススメする。

{} を使って初期化

配列を {} を使って初期化する方法。
この方法は普通に配列を使用する場合は使わない。
連想配列を扱い場合のみ使用するもので、普通の配列と違うのは自分でキー、つまり要素を呼び出す時の名前を指定したい時に使用する。
[javascript] //連想配列として初期化 var array_1 = {};

//初期化と同時に要素を生成する var array_2 = {0:'imo', 1:'すし', 2:'3', 3:'ろぼっと'};

//こんな宣言もできる var array_3 = {'susi':'すし', 'num':5, 1:'最初'}; [/javascript] このように要素一つ一つに名前であるキーを命名して要素をつくる。
他の二つの方法と比べるとめんどくさいかもしれないけど、実はこれは連想配列を扱う上では必須なのでキチンと理解しよう。

普通の配列

配列は一つの変数(厳密にはメモリを確保した場所に対してだが)に複数の要素を名前をつけて代入する事。
普通の配列と連想配列の二種類あるけど、厳密には両方とも連想配列になっている。
所謂普通の配列は
[javascript] //配列の宣言と同時に要素を入れてる。 var array_test = new Array('いも', 'susi', 'hoge', 1, 3); console.log(array_test[0]);//いもが表示される console.log(array_test[2]);//susiが表示される console.log(array_test[4]);//数字の 3 いもが表示される

var array_test2 = new Array(20); //array_test2の要素数である、 20 が表示される console.log(array_test2.length); [/javascript]

このように特に連想配列のようなキーなるものを指定せずに生成できる。

しかし、これは厳密には以下の連想配列と同義である。
[javascript] var array_test = {'0':'いも', '1':'susi', '2':'hoge', '3':1, '4':3}; console.log(array_test[0]);//いもが 表示される console.log(array_test[2]);//susi が表示される console.log(array_test[3]);//数字の 1 が表示される

//もちろん要素の上書きも出来る array_test[0] = 'imo';//いも を imo に上書き

[/javascript]

つまり、普通の配列とは自動で数字のキーが連番で割り振られたものとなる。
この連番の数字のキーの事を配列のインデックスと呼ぶ。

なので、普通の配列として扱う場合はjavascript側が勝手にインデックスを付けてくれるので、実は連想配列だと言う事を意識しなくても扱う事が出来るという訳。
ちなみに配列はプログラムを扱う場合には間違いなく絶対覚えるし、なによりこれが無いとお話しにならない。
ループでまわしたり、とりあえず保存したりとまさに基本中の基本。
もし本当にプログラム学び立ての人がこの記事に目を通して理解の手助けになれば幸いです。

連想配列

では普通の配列(そもそも連想配列の略称的な意味で配列なのだけど)の正体でもある連想配列はどういうものかというと [javascript] var array_test = {'hoge1':'ほげ1', 'imo':'いも', 'sport':'ダンス', 'num':1, '1':'数字'};

console.log(array_test['hoge1']);//ほげ1 が表示される console.log(array_test['imo']);//いも が表示される console.log(array_test[1]);//数字 が表示される

//要素の上書き array_test['sport'] = 'バスケ'; [/javascript] このように扱う。
要素のキーは数字でも文字列でなら一部の単語(そもそもシステムで使用されるような単語)をのぞいて何でも指定できる。
そしてキーは必ずシングルクォートかダブルクォートで囲う事。
数字は別に囲わなくても良いけど、あえて明示的にする事で不要なミスを防ぐ事が出来るので是非やってみよう。
そして指定したキーは中身である要素をよびだすのに使うので、中にある要素が一目でわかる命名にしないとコードをいじる他人も自分にも被害が及ぶので注意する事。
まぁそもそも変数の命名の気をつけるべきだけどね。

複雑な配列である多次元配列たち

これまで紹介した配列は キー:要素 の単純な形式だが、本来の連想配列の用途として複雑な関係にあるデーターを分かりやすく纏めるのに使われるが、大きなデータや大量の要素を持つのが想定される場合その関係が結びついている場合はデータの細かい単位一つ一つで配列を作っていったら途方も無いし管理も難しいし、なにより本当にその結びつきが絶対なのか証明が出来ない。
その為に配列の中に更に配列を作る事で要素同士の結びつきを証明すると同時に管理もしやすくするのが、多次元配列である。

多次元配列の扱い方

多次元配列は簡単に表すと、配列の要素の一つに配列を入れるという物で宣言のやり方や要素の代入もそんな感じで扱う。
また、多次元配列にも配列のインデックスのみで扱うものと、連想配列のキーを指定して扱う二つがある。

配列のインデックスを利用した多次元配列

先ほど紹介した普通の配列を多次元で扱う。
[javascript] //宣言だけ //配列の要素が配列の二次元の配列 var array_1 = [ ['imo', '男爵いも'], ['windows', 'mac', 'unix'] ];

//男爵いも が表示される console.log(array_1[0][1]);

//unix が表示される console.log(array_1[1][2]); [/javascript] このように大元になる配列の要素を更に配列にする事で、多次元にする事ができる。
呼び出しも配列の中の配列を指定するには配列のインデックスで指定していく。
でも、多次元の配列にするならこのようなインデックスで扱う多次元配列はオススメしない。
可読性が最悪だし、正しいのかも分かりづらいと思うからだ。 多次元配列を扱うなら、後述の連想配列の方が良い。

また随時追記していく予定。流石に量があるからね...