【Javascript】ジャバスクリプトの基本文法【初心者向け】

web制作の現場で昨今非常によく使われているJavascript。

jQueryという非常に便利なツールが登場し、今ではjavascriptを使っていないサイトはほとんどないのではないかというほど、非常によく使われているプログラミング言語です。

今回はそのジャバスクリプトについて概要と基本文法について書いてみようと思います。

参考文献：

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) 中古価格 ￥1,738から (2018/8/17 22:20時点)

Javascriptってそもそもどういうもの？

Javascriptとは、ブラウザを操作するプログラミング言語です。

用途としてはHTMLやCSSだけでは、HTMLやCSSだけでは表現できないデザイン、仕様を実現するためにしばしば使われます。

ブラウザを操作するとは・・・？

HTMLやCSSは、重要な特徴があります。（あまり意識しないことかもしれませんが・・・）

それは、

一度ブラウザに読み込まれたら変化することはない

ということです。

リロードするかページ遷移するかしない限り、一度読み込まれたHTML、CSSは変わることはありません。

これに対し、ジャバスクリプトは、HTMLやCSSのような静止したデータをリアルタイムでみるみるうちに変化させることが可能となります。

例えば、特定の同種類の要素の高さをそろえることができます。


<p class="height_equal">テキストテキストテキストテキストテキストテキスト</p>

<p class=”height_equal“>テキストテキストテキストテキストテキストテキストキストテキストテキストキストテキストテキストキストテキストテキストキストテキストテキスト</p>

<p class=”height_equal“>テキストテキストテキストテキキストテキストテキストキストテキストテキストキストテキストテキストキストテキストテキストキストテキストテキストキストテキストテキストキストテキストテキストキストテキストテキストキストテキストテキストストテキストテキスト</p>

のような要素があったとき、ウィンドウの幅に応じて、自動的に改行されてしまった時、それぞれの「テキストテキスト」は高さが異なる状態になってしまいます。

このような場合、とあるJavascriptを使うことによって、「height_equal」というクラスがついた p タグのうち、最も高い高さを持つものの高さを「style=”height:○○○○px”」をpタグの中にリアルタイムで挿入してくれる、という使い方ができます。

→【超常用】要素の高さを揃えるtile.jsの使い方（javascript実践）

他にも、クリッカブルマップをレスポンシブ対応することも可能です。

→【jQuery】クリッカブルマップをレスポンシブ対応させるjs「jQuery RWD Image Maps」の使い方

このようにJavascriptはブラウザで動作し、HTMLやCSSを自由自在に追加・変更することができるプログラミング言語なのです。

Javascriptの基本文法

ジャバスクリプトの基本文法は以下の通りだ。

（オブジェクト）.（メソッド）(（パラメータ）);

例えば、

console.log('テキスト出力あああああああ');

と書けば、ブラウザのコンソールに「テキスト出力あああああああ」と表示される。

ジャバスクリプトに限らず、コンピュータを動かすには「○○は××しなさい」というように命令する必要があります。

ただし、漠然と「××しなさい」と命令しても、「誰が」それをすればいいのか、コンピュータには理解できません。

そのため「エラー」（え？俺に言ってるわけじゃないんでしょ？）と返事が返ってきます。

上の例で言うなら、

• 「誰が」が「console」
• 「××しなさい」が「log( )」
• 「何を」が「’テキスト出力あああああああ’」

となり、javascriptを無理やり日本語に翻訳するなら、

console は、「テキスト出力あああああああ」を、logしなさい

となる。

そして、それぞれを

• 「console」という「オブジェクト」
• 「log」という「メソッド」
• 「’テキスト出力あああああああ’」という「パラメータ」

という言い方をします。

ぶっちゃけ、「Javascriptを勉強する」というのは、「オブジェクト」と「メソッド」と「パラメータ」の種類と組み合わせを覚えることと同義です。

余談

偉そうに書いといてなんですが、、、かく言う私もジャバスクリプトに関してはほぼ素人なので今勉強しているところであります。

Google先生に聞けばjQueryの情報はいくらでもありますし、そのおかげでJavascriptを使いこなすことはまだできない私でも、スライダーやドロップダウン、ポップアップウィンドウなどのリッチな動きが実現できる時代になりました。

しかし、web制作に関わる者として、jQueryやJavascriptの中身を知らずに使うのは無責任というか、脳停止というか。。。

とにかくどげんかせんといかん！！！！

と思った次第であります。

私も頑張るのであなたもがんばってください！！

このサイトは私、管理人が自分のためのアウトプットの場として、また、この記事を見つけてくださったあなたの役に立つために作りました。

少しでもあなたのお役に立てれば幸いです。

これからも役に立つ情報を発信してまいりますので今後ともよろしくどうぞ！！

参考：

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) 中古価格 ￥1,738から (2018/8/17 22:20時点)