【JavaScriptステップアップ講座 第１回】jsの基本
今日からJavaScriptを基礎から学ぶ「JavaScriptステップアップ講座」を更新していきたいと思います。
私は勧められてPr〇gateでjsを勉強しようと奮闘したことがあります。でもこれはプログラミング言語を少なくともひとつは知っている人向けだな、と思いました。あくまで個人の感想に過ぎませんが、「変数」「配列」などど言われても、それがどう具体的に役に立つのか、イメージできないからです。結果的にこの勉強は悔しいですが挫折したと言っていいでしょう。
そんな経験から、私は同じような経験をお持ちの方、またこれからJavaScriptを勉強したいという方向けに自己流で講座を更新していくことにしました。HTMLとCSSができる、じゃあ今度は動きをつけたい！と思うのは自然なことです。そこでJavaScriptが登場するわけですが、ここで紹介するのは「HTML5とCSS3が中級者以上理解できる」という方向けだと思っています。ここにハードルを持ってくるのは、私自身がHTML,CSSをある程理解しないとまったくjsは手が付けられないと感じたからです。HTML,CSSは初心者でも理解しやすいので、いろんなサイトで独学で勉強できるだけの情報がそろっています。まずはそちらからやってみるのもいいと思います。
では、記念すべき第１回。JavaScriptの基本知識です。
JavaScriptの基本の考え方
３つのステップで要素を変化させることができます。簡単なHTMLとCSSを使った例を用いて理解していきましょう。ベースとなるHTMLは以下です。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScriptステップアップ講座第１回</title> <style> .myclass{ color: #000000; } </style> </head> <body> <div id="myid"> <p class="myclass">本文です。</p> </div> <script> </script> </body> </html> |
３つのステップとは以下に挙げるものです。
①どの要素を
②どのタイミングで
③どう変化させるか
まず①の「どの要素を」というのは指定の仕方がいくつかありますが、現在主流かつ使用頻度の高いものを以下に挙げます。必ずscriptタグの中に書きましょう。
JavaScript
|
1 2 3 |
console.log(document.querySelector('#myid')); //id名myidを取得しコンソールに表示 console.log(document.querySelector('.myclass')); //最初のclass名myclassを取得しコンソールに表示 |
コンソールはデベロッパーツール（要素の検証）の中にあります。エラーなく表示されているでしょうか？エラーがでると赤い背景になにやら変な文字が出ます。取得した要素が表示されていれば取得は成功です。
②の「どのタイミングで」の説明は次回にします。何も書かないと読み込まれた直後に変わります。今回は「本文です。」の色を赤色に変えてみます。その前に覚えるのが「変数」です。
変数とはデータを入れておく箱のようなものです。今回は指定した要素を入れて使います。こうすることでその後の記述が簡単になり、繰り返し同じことを書かなくて済みます。変数の宣言はletを使うのが現在主流のようですがvarでも行けます！ここではletを使っていきます。
|
1 |
let myP = document.querySelector('.myclass'); //myPという変数を作りクラス名.myclassを代入 |
イコール（=）は代入を意味します。この状態でコンソールに出力するには変数名（この場合myP）をそのままconsole.log();のかっこの中に入れるだけです。
③の「どう変化させるか」を指定します。今回は文字の色を赤色に変えます。JavaScriptでCSSの内容を変えるのは.style.というようにドットでつなげて命令を書きます。
|
1 |
myP.style.color = "#ff0000"; //myPのCSSのcolorを赤色に変える |
先ほども書いたとおり、このままでは画面を読み込んだあとすぐに色が赤色に変わるため、CSSで書いたのかJSで書いたのか区別がつきません。これJavaScriptで書いた意味あるの？という疑問が浮かんでしまいます。
そこで次回は変数にイベントを登録して、クリックしたら赤色に変えてみます。またマウスを乗せたり、離したりすることでも変化させてみようと思います。
以上です。お付き合いいただきありがとうございました。
（ここまで書くのに空いた時間を使って２週間以上かかってしまった・・・間違いなどあればご指摘いただけたら嬉しいです。）