JavaScriptとは？JavaScriptの基本

JavaScriptとは？

フロントサイドと言われてもピンとこないと思いますが、ユーザーがボタンを押した時のポップアップやユーザーの入力が正しいかどうかのチェックなどサーバーにリクエストを飛ばす前の処理を担います。

また、Ajaxという技術を使えば画面をリロードせずにサーバとの通信を行うことも可能で、リアルタイムに変化するリッチなユーザー体験をもたらす技術として多くのWebサイトで使用されています。

JavaScriptはフロントエンドだけの技術？

上では説明の便宜上クライアントサイドで動くスクリプト言語として説明しましたが、最近ではnode.jsなどサーバーサイドで動作するものも出てきています。

フロントエンドとサーバー両方を JavaScriptで書くことが可能で学習コストが下がるので、徐々にサーバー側を JavaScriptで実装するプロジェクトも出てきています。

JavaScriptの例

冒頭にも説明したように JavaScriptはクライアントサイドで動くので特別な環境の、準備は要らず、ブラウザとメモ帳があればプログラムを書けてしまいます。

1番簡単なJavaScriptを動かしてみるやり方の一つはHTMLのbodyタグにJavaScriptを埋め込む方法です。

実際の開発ではあまり良い方法ではありませんが、ちょこっと、確認する程度でしたらこの方法で構いませんが、実務ベースではhtmlからjavascriptファイルを読み込む形で行います。

htmlに以下のようなタグをbodyタグの直前に埋め込むことでjsファイルを読み込みます。

<script type="text/javascript" src="js/index.js"></script>

以下にログインフォームのバリデーションを行う処理を書いてみます。

// フォーム送信時に実行される関数を登録
document.querySelector('#login-form').addEventListener('submit', () => onSubmit())


// フォーム送信時に実行される関数
const onSubmit = () => {
	// バリデーションを行う対象のDOMを取得
	inputs = document.querySelectorAll('.form input')

	// バリデーションを実行
	inputs.forEach( input => {
		const validator = input.attributes['data-validator'].value
		if(!validate(validator, input.name, input.value)){
			// バリデーション結果が不正だったら、送信をストップ
			event.preventDefault();
		}
	})
}

// 正規表現
const EMAIL_REGEXP = /^.+@.+\..+$/
const PASSWORD_REGEXP = /^[0-9a-zA-Z]{6,9}$/



// 実際にバリデーションを行っている部分
const validate = (validator, name, value) => {
	if(!validators[validator](value)){
       document.querySelector(`.${name}-error-message`).classList.remove('hidden')
       return false
	}
	return true
}


const validators = {
	email: (value) => !!value.match(EMAIL_REGEXP),
	password: (value) => !!value.match(PASSWORD_REGEXP),
}

実際のログインフォームはこちら

ここではコードの解説はしませんがコードの雰囲気だけ読み取って頂ければと思います。 javascriptはユーザの入力に対してイベントを登録することができるのが特徴で、今回の場合はフォームの送信時に定義した処理を実行させていますが、他にもユーザがボタンをクリックした際、ユーザがフォームの値を変更した際などに任意の処理を実行させることができます。

JavaScriptのフレームワーク

ある言語を語る上で、その言語で書かれたライブラリやフレームワークの存在はかかせませんが、JavaScriptはフレームワークの開発がさかんで、おそらく1番使用されているであろうユーティリティライブラリのJQuery,仮想DOMを、利用して動的な表現を得意とするReact,Vue.js,フルスタックなフレームワークであるAngularなどもあります。

JQueryは広く普及しているフレームワークではありますが、最近多くのスタートアップ、ベンチャーではReact,Vue, Angularなどが多く用いられています。フロントエンドエンジニアを目指されている方はReact, Vue, Angularいずれかのフレームワークを学ばれると良いかと思います。

オンラインブートキャンプ フロントエンドコース

まとめ

• JavaScriptはクライアントサイドで実行されるスクリプト言語
• 最近はNode.jsなどの技術も出現し、サーバーサイドの、実装に使われることもある。
• 環境構築がほとんどいらず最低限ブラウザとメモ帳があればプログラムを書くことも可能。
• React, Vue, Angularなどのフレームワークが、出現し多くのスタートアップ、ベンチャーで人気の言語となっている。