ホームページを制作する上で、HTML・CSSとともに欠かすことができないのがJavaScriptの存在です。

しかし、HTMLやCSSのようなマークアップ言語と違ってプログラミングって少し難しそう……と思っている人も多いのではないでしょうか。実は、JavaScriptは非常にシンプルで、基礎的な部分は他のプログラミング言語と同じところも多いのです。

そこで今回は、JavaScriptの基礎を初心者向けに解説します。

目次

  1. JavaScriptとは？
  2. JavaScriptの強み
  3. JavaScriptの記述方法
    1. インラインで記述する場合
    2. 外部ファイルで読み込む場合
    3. JavaScriptの記述場所
  4. JavaScriptの変数・演算子
  5. JavaScriptの関数
  6. もう少し詳しくJavaScriptを学びたい場合には？
    1. ドットインストール
    2. schoo (スクー)
    3. CodeCamp
  7. まとめ

JavaScriptとは？

JavaScriptは何百種類もあるプログラミング言語の一種で、ホームページに様々な動きや機能を付加することができます。
JavaScriptはフロントエンド言語(クライアントサイド言語)の一種で、サーバーをとおすことなく、ブラウザだけでプログラミングを実行することが可能です。

fb.png

JavaScriptはいたるところで使われています。
例えば、ユーザー登録の際にメールアドレスが正しい形式で入力されているかを調べたり、ページ遷移の際に次のページが読み込まれるまでローディング画像を表示したりします。

security.png

一方で、JavaScriptは他の言語に比べてセキュリティが甘いということも言われています。その理由はHTMLやCSSのソースコードと同じように、JavaScriptのソースコードもブラウザの機能を使って簡単に閲覧できてしまうからです。
そのため、セキュリティに関わる具体的な処理手順を覗かれてしまっては困る場合には、JavaScriptだけではなくバックエンド言語を使ってサーバー経由で処理するようにします。

JavaScriptの強み

もしかしたらお気付きかもしれませんが、例えばパスワード欄に有効な文字が入力されてるかどうかを判別するプロセスは、ブラウザではなくサーバーによっても処理できるはずです。
PHPやRuby、PythonやGo言語を使っても処理することができます。それでもJavaScritを使う理由は、どこにあるのでしょうか。

JavaScriptの強み、それは*「即時性」*です。

time.png

サーバーで処理をする場合、ユーザーが送信ボタンを押して、サーバーがそのデータを受け取ります。そして、サーバーがプログラムによって判別してエラーをブラウザに返す、という一連の処理と、それにかかるタイムラグが発生します。
しかし、JavaScriptを読み込んでいれば、パスワードに使える有効文字として認めていない文字をユーザーが入力しようとした瞬間に、小さなポップアップを表示して、すぐにユーザーにエラーを伝えることができます。

JavaScriptの記述方法

JavaScriptの概要を学んだところで、読み込み方法や記述場所について確認していきましょう。

JavaScriptは、書いた言語をそのまま読み込ませて動かすことができるインタプリタ型言語です。C言語のように、一度コンパイル(コンピューターにも理解できる言語に翻訳すること)をしないと作動しないコンパイラ型言語と違い、JavaScriptはそのまま動かすことが可能です。

インラインで記述する場合

それでは、JavaScriptを実際に入力してみましょう。
インラインでJavaScriptを記述する時には、scriptタグの中に書きます。

<script>
　　// ここにJavaScriptの処理を書きます
</script>

昔は

&lt;script type="text/javascript"&gt;

とtype属性を記述していましたが、HTML5ではデフォルトのtype属性がJavaScriptなので、特別に記述する必要がなくなりました。

外部ファイルで読み込む場合

次に、外部ファイルからJavaScriptを読み込む方法を確認していきましょう。

外部ファイルの場合、CSSであればlinkタグのhref属性にファイルパスを記述して読み込みを行っていました。一方、JavaScriptの場合はscriptタグにsrc属性をつけて、その値にファイルパスを記述します。JavaScriptのファイル拡張子は「js」となります。linkタグと違ってscriptタグは閉じタグが必要になるので注意しましょう。

例えば、hello.jsを読み込むには、下記のようなコードを書きます。

<script src="hello.js"></script>

JavaScriptの記述場所

CSSの場合にはheadタグの中に書くという文法ルールが決まっていましたが、script要素の場合はHTML中のどこに書いてもいいことになっています。大きくわけると、『head要素の中』、『body要素の中』、*『bodyタグの閉じタグの直前』*です。

しかしながら、この「記述場所」というのはユーザビリティを考えた時には、非常に重要です。最近では、JavaScriptは*『bodyタグの閉じタグの直前』*に書くというのが、コーディングの作法になっています。

なぜかというと、ブラウザは一度JavaScriptを読み込んで処理している間は他のレンダリング(HTML要素の表示処理)を中断するという仕様になっているからです。

例えば、以前はhead要素にJavaScriptを書く方のほうが多かったのですが、JavaScriptを読み込んだタイミングではページを構成している他のHTML要素の読み込みが終わっておらず、通信制限などでページの読込スピードが遅くなってしまうとユーザーがホームページを離脱する原因となってしまいます。

loadtime.png

もちろん、head要素にJavaScriptを書くというのが間違いというわけではありません。場合によってはページを読み込ませる前にJavaScriptを読み込ませる必要があるかもしれません。
しかし、ユーザビリティ向上のために、特別な理由がない限りはbodyタグの閉じタグの直前に書いておくのがよいでしょう。

JavaScriptの変数・演算子

JavaScriptでは他のプログラミング言語と同じように変数や演算子などを使うことができます。

variant.png

変数とは、データを出し入れすることができる箱のようなものです。JavaScriptで変数を利用するには、事前に宣言をしておく必要があります。

変数を宣言するには、変数(variable)を意味するvarのうしろに半角スペースを置いて変数名を書きます。

// 変数ageを定義
var age;

変数に数字や文字をセットする(代入する)には、変数の後ろに「＝」をつけて書きます。

// 変数ageに値をセット
age = 24;

また、変数は複数同時に宣言したり、代入しながら宣言したりすることもできます。

var age = 24, sex = 'male', country = 'jp';

JavaScriptでは、あらかじめJavaScriptで定義されている予約語(ifやfor、classやvarなど)以外であれば好きな名前を付けることができます。
また、他の言語では「整数型」「日付型」「文字列型」など、データ型の宣言が必要ですが、JavaScriptではデータ型宣言の必要がないのも特徴です。

演算子については、他のプログラミング言語同様、JavaScriptでも「+(足す)」「-(引く)」「*(掛ける)」「/(割る)」「%(余り)」といった演算子や、「>=(以上)」「==(等しい)」といった比較演算子、「&&(AND)」「!(NOT)」といった論理演算子も利用することができます。

JavaScriptの関数

JavaScriptでは、他の言語と同じように関数を使うことができます。

関数とは、入口と出口の付いた機械のようなものです。例えば、「数字が2倍になる」という機械があるとすれば、このようなイメージになります。

function.png

一度機械の設定さえしてしまえば、どんな数字を用意しても同じルールでアウトプットされます。上記例のように、「数字が2倍になる」という関数をJavaScriptで書くと、このようになります。

function twice(x){
　　var y = x * 2;
　　return y;
}

JavaScriptで関数を使うには、関数を意味するfunctionと半角スペースに続いて、関数名を付けていきます。名前の次に書いてある(x)というのは、関数の入口で、ここにこの関数専用の変数を用意します。

この関数の入り口専用の変数のことを、引数(ひきすう)と呼びます。引数にはvarを付ける必要はありません。もちろんvarで宣言する時と同様、引数も複数設定することができます。

また、「{」は関数の始まり、「}」は関数の終わりを意味し、この「{」と「}」に挟まれた部分が関数になります。

「return」は値を返すためのもので、xを2倍した変数yを返すという関数になります。

もう少し詳しくJavaScriptを学びたい場合には？

ここまでJavaScriptの基本中の基本について見てきましたが、JavaScriptは他のプログラミング言語と同じような文法を使うので、すでに何らかの言語を学んでいる人にとっては学習障壁が低いかもしれません。

しかし、*「プログラミング経験が全くないのだけれど、もう少し詳しく学ぶにはどうすればいいの？」と思っている方や、「初心者だけど、なるべく時間も費用もかけずに学習したい」*と思っている方もいらっしゃるのではないでしょうか。

次に紹介する3つのサービスは、特に初心者の方にもオススメです。

1. ドットインストール

dotinstall.jpg
（画像引用：http://dotinstall.com/lessons/basic_javascript_v2）

ドットインストールは、短い動画でプログラミングを学ぶことができる動画サービスです。1つの動画が3分以内と、スピード感を持って学習することができるのが特徴です。

ドットインストールの「JavaScript入門」は全24回。2時間ほどあれば、JavaScriptの概要をひと通り押さえることができます。

2. schoo (スクー)

schoo.jpg
（画像引用：https://schoo.jp/class/category/programming?course_tag_ids=44）

schoo(スクー)はプログラミング以外にも、語学やビジネスなども学習できる動画学習サービスです。

schooには様々な先生がいるので、JavaScript入門講座だけでもいろんな教え方を体験することができます。自分に合った教え方の先生を見つけてみるのもいいかもしれません。

3. CodeCamp

codecamp.jpg
（画像引用：http://bit.ly/2ivkcYo）

CodeCampは、オンライン上でマンツーマンでレッスンを受けることができるプログラミングの個別指導サービスです。自分のペースで学ぶことができるだけではなく、レッスンは毎日7時～23時40分まで開講しているので、忙しい社会人でも確実にプログラミングを習得することができます。

JavaScriptに慣れてきたら、jQueryやReact.js、Node.jsのようなフレームワークも自分のペースで学習することが可能です。

まとめ

もはやほとんどのホームページで欠かすことのできないJavaScript。
HTMLやCSSだけでは印刷物のように静的な動きしか作れなかったホームページも、JavaScriptを組み込むことによって、ダイナミックな動きを実装することが可能になります。

今回は、JavaScriptの特徴や概要、学び方についてまとめていきました。JavaScriptを体系的に学んでいくことでフォームの入力チェックやクッキーの利用など、もう少し複雑な処理を実装することもできます。

JavaScriptは、他の言語に比べて歴史も深いので、無料から利用できるリソースも豊富にあります。ぜひ初心者の方も挑戦してみてください。

CSSを応用する

CSSで見出しをデザイン！コピペできるおしゃれな見出しデザインまとめ

CSSで見出しをデザイン！コピペできるおしゃれな見出しデザインまとめ

ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていたりしていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるCSSの見出しを紹介した記事をまとめました。