html、cssと学んで一通りサイトが作れるようになったら、次に学ぶべき言語はJavaScriptがオススメ。
プログラミング言語はフロントエンド側とサーバーサイド側で使う言語が別れている。
それらを簡単にいうと、フロントエンド側は画面に表示される表側。
サーバーサイド側はデータの処理や保存などをする裏側のこと。
JavaScriptはフロントエンド側のプログラミング言語の一種で、他のプログラミング言語と比べて学習ハードルが低い。
それに、実行した結果がすぐ確認できるので実感しやすい。
これらが初心者にオススメな理由だ。
逆にサーバーサイド側のCとかJavaといった言語を最初に学ぶとハードルが高くなり、挫折しやすい。
ちなみに、JavaScriptはhtmlやcssの知識が必要になるので、もし知らない場合は以下の記事を参考までに。
今回の内容
JavaScriptとは
シンプルにいうと、ウェブサイトに変化を加えることができる言語。
htmlとcssだけで書かれたウェブサイトは表示されたら、それ以上何も変化がない。
しかし、そこにJavaScriptを足すことによって表示されている文字を変えたり、写真をスライドさせることができる。
サイトを見始めて数秒経った後に小さなウインドウが画面に出てきて、
「メールマガジン登録をしてもっと最新情報を知りませんか？」みたいなものもJavaScriptで表示されるようになっている。
JavaScriptは現在のウェブサイトには欠かせないものなのだ。
学習に必要なもの
HTMLとCSSを書くのに必要なものと同じ。
- ブラウザ
- Google Chrome
- Safari
- Firefox
- テキストエディタ【全て無料】
JavaScriptを書く場所
2種類の方法がある。
HTMLに直接書く
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptを書く場所</title>
<script>
alert('テスト');
</script>
</head>
<body>
</body>
</html><script>…</script>で囲まれた部分がJavaScriptで書く部分。
ここでは<head>内に書いてあるが、<body>内に書くこともできる。
ちなみに今回のプログラムはalert('○○');といって、ダイアログボックスを表示させることができる。
専用ファイルを作って読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptを書く場所</title>
<script src="style.js"></script>
</head>
<body>
</body>
</html>6行目でJavaScriptファイルを読み込ませる。
alert('テスト');JavaScript専用ファイルにコードを書く。
結果は先程の方法と同じになる。
ちなみにJavaScriptの拡張子は○○.js。
実際に書いてみる。
今回は例として文字をクリックするとダイアログボックスが表示させるコードを書いてみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p id="text">ボックス表示</p>
<script>
document.getElementById('text').onclick = function() {
alert('クリック完了');
};
</script>
</body>
</html>このプログラムをブラウザで表示して、「ボックス表示」という文字をクリックするとダイアログボックスが出てくる。
JavaScriptは必要不可欠
今やほとんどのウェブサイトにJavaScriptが使われている。
プログラミングを学び始める人にとって前準備がいらず、とっつきやすい言語でもあるからだ。
また、JavaScriptを覚えれば他のプログラミング言語を覚えるときに応用が効く。
なので、覚えておくことで損することはまずない。
JavaScriptをラクにするライブラリ
世の中にはものすごく頭のいい人がたくさんいる。
そういった人が作ったライブラリというものを活用することでJavaScriptが飛躍的にラクに書けるようになる。
ライブラリとは簡単に言うと、たくさんのコードの集まりのこと。
よく使う処理や機能があらかじめひとまとめになっており、自分で一からコードを書かずに済む。
有名なライブラリとして、jQuery、React、Vue.js、Angularなどがある。
JavaScriptに慣れてきたらそういったライブラリを活用してみるのもオススメ。
早く覚えるにはどうしたらいいか
よく「プログラミングを覚えるにはどうすればいい」という疑問があるが、
書いていれば勝手に覚えるとしか答えようがない
冷たく感じるかもしれないが、プログラミングができる人はとにかく書いている。
実際、とにかく書くしかない。
ランニングを始めるときに、走り方を全て勉強してから走る人がいるだろうか。
まずは走ってみるだろう。
走り方などは後からでいい。
よく考えたらわかるようにプログラミングも同じ。
あーだこーだ言わずに、まずは書く。
うまくいかないことの方が断然多いが、その都度調べたり聞いたりして超えていくしか道はない。
