こんにちは。コンサルロケッツのコーディング担当、4号機です。
今回はまじめモードで、ウェブ制作に役立つ情報をお届けしたいと思います。
自分がこのウェブ業界に入って約7年、本格的にコーダーとして働いて早5年目になります。
コーダーはHTMLやCSSの知識もさることながら、やはりJavaScript(JS)が書けてこそ一人前。
けれど・・・書けない・・・むずかしい・・・
そうなんです。JSはHTMLやCSSとは違って「プログラミング言語」のひとつ。
HTMLやCSSとは全然別の脳みそを使わなければ、上手く書くことができません。
自分も「よし今年こそはJS勉強しよう!」と意気込みながら、毎年気づけは紅白歌合戦を観つつ、むしゃむしゃミカンを食べる体たらく。
日本人に生まれてよかったという幸せを感じながらも、ミカンをひと房、またひと房と頬張るたび、確実になにかを失っているような感覚。
・・・だめだ!!今年こそミカンを美味しく食べたい!
そして紅白で安室ちゃんの勇姿を見守るんだ!!
というわけで、今年も残すとこをあと僅か。
この記事では、JS初心者のぼくが、JS初心者のみなさんと同じ目線に立ちながら、
「今年こそ美味しくミカンを食べるぞ!」と意気込みながらお送りします。
▼目次
・ざっくり!そもそもJavaScriptってなに?
・JavaScriptはどう使うのか?を知ろう!
・プログラミング的思考は日常にありふれている!
・超かんたん!jQueryのススメ
・さいごに 〜下手でもいいから書いてみる!〜
■ざっくり!そもそもJavaScriptってなに?
JavaScript(JS)は主にウェブブラウザで動く「プログラミング言語」のひとつです。
たとえば画像が自動で切り替わったり、タブで表示を切り替えたり、カウントダウンタイマーだったり、あとはGoogleMapなんかもJSの技術を応用したものとして知られています。
とにかくJSは「動的なウェブサイトを作成する」ためには必要不可欠な技術といっても過言ではないでしょう。
単にHTMLとCSSだけでは、特に動きのない「ただ表示されている」だけのウェブサイトとなります。
※最近では簡単なものであればCSSのみでも動きを付けることが出来ますが。
しかし、そこにJavaScriptが加わるだけで一気に「リッチ」な印象のウェブサイトを作ることができるようになります。
たとえばそれは「魔法のよう」に、自由自在に思い描いたデザインを表現できるツールなのです。
■JavaScriptでなにができるのか?を知ろう!
ではつぎに、ウェブサイトにおけるJSの「仕事っぷり」を見てみましょう。
・・・はじめに結論から述べると、ウェブサイトにおけるJSはおおよそ
1:要素を取得して
2:なんらかの処理を定義して
3:しかるべきタイミングで処理を実行する
という流れを辿ります。
たとえば「div要素をクリックすると文字が大きくなる」という仕組みを作ってみます。
まず、HTMLを下記のように用意します。
<div id="sample"> <p>クリックで文字が大きくなるよ</p> </div>
これは簡単ですね。
ただ<div>の中に<p>で囲ったテキストを入れているだけです。
つぎにJSですが、このように記述します。
(function () { var elm = document.getElementById('sample'); function test(){ elm.style.fontSize = "50px"; } elm.addEventListener('click', test, false); }());
ひとつひとつ見てみましょう。
まずはこちら。
var elm = document.getElementById(‘sample’);
これは、先ほどのHTMLの<div>要素(id=”sample”)を、変数elmに代入しています。
JSにおいて「=」は一般的な「等しい」の意味では使用しません。
ここでは「代入(代入演算子)」と呼ばれ、右辺を左辺に代入する目的で使用されます。
つまり、ここでは先のid=”sample”の要素一式が、変数elmに入ったことになります。
つぎはこちら。
function test(){
elm.style.fontSize = “50px”;
}
ここではtest()という関数(function)を定義しています。
関数とは「なんらかの処理」を行うための「魔法のブラックボックス」です。
このコードでは「変数elmのフォントサイズを50pxにする」という処理を関数test()という名前で定義しています。
ここまでのコードで「要素を取得(id=”sample”)」して「フォントサイズを変更する」という処理が出来上がりました。
つまりこういうことです。
1:要素を取得して(id=”sample”)
2:なんらかの処理を定義して(フォントサイズを変更)
3:しかるべきタイミングで処理を実行する(???)
最後に、どのタイミングでその処理を実行するのかを決める必要があります。
それがこちら。
elm.addEventListener(‘click’, test, false);
ここではaddEventListener()というメソッドを使用します。
※ここでいう「メソッド」とはJSがもともと用意してくれた関数(処理のまとまり)だと思ってください。
かんたんに言うと、addEventListener()とは「言ってくれたらそのタイミングで実行しまっせー」というメソッドです。
そしてカッコの中を見てみると、なにやらカンマ区切りで3つの何かが入っていますね。
この「何か」をプログラミング界隈では「引数(ひきすう)」と呼びます。
第一引数には’click’とあります。つまり「クリックしたときに実行しまっせー」というものです。
第二引数にはtestとあります。つまり「クリックしたときにtestを実行しまっせー」というものです。
第三引数はfalseとなっていますが、ここでは特別な理由がない限りfalseで大丈夫です(興味があれば調べてみるのも面白いかも)。
まとめると・・・
elm.addEventListener(‘click’, test, false);
「elmをクリックしたときにtestを実行しまっせー」というものです。
もう、おわかりですね。
1:要素を取得して(id=”sample”)
2:なんらかの処理を定義して(フォントサイズを変更)
3:しかるべきタイミングで処理を実行する(クリックしたとき)
これで、立派なJSのコードが完成しました!
参考:addEventListener type一覧と各ブラウザ対応
■プログラミング的思考は日常にありふれている!
このように、JSの仕事とはHTMLの要素を取得して、なんらかの処理を、しかるべきタイミングで実行するよう指示を出すことです。
先ほどの例では簡単なお題に沿って説明しましたが、仮に規模の大きな処理であっても、基本的には同じような仕組みの積み重ねです。
AをBした時に、Cする。
Cした後に、AをDする。
Dした後、AをBに戻す。
しかし、この考え方!慣れない!頭が混乱してしまうことこの上なし!
プログラミング言語でつまづく大きな理由のひとつは、このような「プログラミング的思考に慣れない」というものかもしれません。
しかし!言っても普段、私たちも日常でこのような思考を無意識裡に働かしながら生活しているものなのです。
たとえば「明日もし雨が降ったら、買い物には行けないので、今日のうちに買い物を済ませよう」。
ありますよね、こういうシーン。
これを、JavaScriptで書くと、このようになります。
(function () { if (明日雨が降るなら) { 今日買い物に行く。 }else if(明日雨が降らないなら){ 明日買い物に行く。 } }());
ifとは「もし〜ならば」の条件分岐を定義する文です。
またelse ifでは、ifで定義した条件とは異なる条件を定義することができます。
ほかにも、日常でこのようなシーンがあるかと思います。
「明日までに仕事が終わらなければクビになってしまう・・・」
「先週のコンパで会った女の子で、とりあえず連絡のついた子をだれでもいいから誘って飯行って、そのあとムフフ」
「オレ・・・この戦争が終わったら・・・あの子に思いを告げるんだ・・・」
これらにも全て、プログラミング的な思考が働いています。
プログラミングを書くとは「○○を○○した時、○○する(しよう)」という普段私たちが使っている思考の形を、より明示的にコードとして表すことなのです。
■超かんたん!jQueryのススメ
とは言え、プログラミングになれるには、とにかくコードを書くことが一番の近道!
そこでおすすめなのが「jQuery」です。
jQueryとは、JavaScriptのライブラリ(より扱いやすくしたもの)です。
例えるなら「中華調味料の元」みたいな感じです。
麻婆豆腐を作ろうと思って、いちいち調味料を全て揃えるのは面倒ですよね。
けれども「麻婆豆腐の元」があれば、それひとつで大幅に手間を減らすことができます。
初学者の方であればJavaScriptとjQueryの違いがイマイチわかっていないケースもあるかと思いますが、jQueryとは「中華調味料の元」だと思っていれば(たぶん)大丈夫です。
では具体的にどう便利なのかを見て見ましょう。
先ほどのJSのコードを参照してみましょう。
(function () { var elm = document.getElementById('sample'); function test(){ elm.style.fontSize = "50px"; } elm.addEventListener('click', test, false); }());
これを、jQueryで書くと、このようになります。
(function () { var elm = $('#sample'); function test(){ elm.css('font-size', '50px'); } elm.on('click',function(){ test(); }); }());
どうですか?JavaScriptで書いたコードと同じ挙動が実現できたとおもいます。
同じ動きにもかかわらず、コードがなんだかスッキリしたような気がしませんか?
たとえばJavaScriptでidを取得する場合は
var elm = document.getElementById(‘sample’);
と書く必要がありましたが、対してjQueryでは
var elm = $(‘#sample’);
これだけで十分なのです。
つまり、JavaScriptよりも完結に、かつわかりやすくコードを書くことができるスグレモノなのです!
とはいえ、jQueryはライブラリに依存するため、スピードや新しい技術に追いつかないという欠点もあります。
しかしながら、特別な理由がない限りjQueryを使用して、まずは「プログラミングの書き方」を学ぶということが大切だとおもいます。
JavaScriptでは冗長となる文も、jQueryでは先のように完結に記すことができ、初心者にもわかりやすい記法となっています。
ネイティブのJavaScirptはその後で改めて学習するのも、私はアリだとおもいます。
※jQueryを使用するにはあらかじめjQueryを読み込んでおく必要があります。
https://jquery.com/
■さいごに 〜下手でもいいから書いてみる!〜
いかがだったでしょうか?
これまでHTMLとCSSのみで、JavaScriptはプラグインだけ・・・
というコーダーさんにとって、JSが少しでも身近に感じられたなら嬉しいです。
かくいう自分も、まだまだ勉強中で分からないことばかり。
しかし、プログラミングを覚えるうえで大切なのは
「下手でもいいから、とりあえず書いてみる!」
ということだと思います。
初めのうちはコードのキレイ・きたないは関係なく、ただただ「動けばOK」なコードで大丈夫!
ガチのプログラマーさんに「そのコードは汚すぎてマジでナイわ・・・」と言われてもめげないこと!
そして、自分の意図通りに動いたときの「感動」を忘れないこと!
そうして一歩一歩ステップアップしていけば、きっとそう遠くないうちに、ちゃんとしたコードで、大きなものが作れるようになるはずです。
では、今年こそミカンを美味しく食べましょう!