初心者でも分かる解説。JavaScriptってなんだ? jQueryとは?

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
JavaScript image

JavaScriptの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。

JavaScriptは、HTML, CSSと並んで、Webサイト作成にはなくてはならない技術です。

これを読めば、JavaScriptの役割、jQueryのことも分かります。

『いまさら見直すのは恥ずかしい』という人にもオススメです。

今回は、JavaScriptの書き方とか具体的な手法は一切ありません。ただただ『JavaScriptってなにもの?』だけの話です。

役に立つかと言われれば、雑学に近いです。でも、ウェブサイトの技術の中でのJavaScriptの役割がはっきりと分かりますので、最後までお付き合いください。

JavaScriptとは?

JavaScriptは、リッチなWebサイトを作成するのに必要なプログラム言語です。

(『リッチな』の意味は後で説明します。)

Ecma International(エクマ・インターナショナル)という電子通信に関する標準化団体がECMAScript(エクマ・スクリプト)として、標準化作業を進めています。

標準化作業は、標準仕様の策定と勧告です。

ブラウザを開発している各社は、この標準仕様に従ってブラウザに実装します。

ただし、ECMAScriptは、独自の機能拡張を禁止していないので、Googleやマイクロソフトなどは、自社のJavaScriptプラグインで独自の機能を実装することもあります。

策定
どのような機能をつけるのか考えて、実装して、テストする。
既存機能の拡張や削除もある。
勧告
完成した新機能などの仕様を発表して、各ブラウザの開発元に対応するように促す。

JavaScript, HTML, CSSの立ち位置

JavaScriptの組織の話をしましたが、さらに『JavaScriptとは?』を続けると、一部分の話になるのであまり良くありません。ここはあえてWebの全体像を話します。

JavaScript, HTML, CSSは、Webサイト作成では、

  • フロントサイド
  • フロントエンド

と言われます。

Webサイトは、見る側(ブラウザ)と見せる側(Webサーバー)が情報をやり取りすることでページが表示されます。

フロントエンドは見る側、ブラウザの技術になります。

  • ボタンやチェックボックスを表示(HTML)
  • 文字を大きくしたり色を変える(CSS)
  • コンテンツをマウスで動かす(JavaScript)

などできますよね?

これらは全部、ブラウザが処理をしてユーザーに見せています。()内は何が仕事をしているかです。

ブラウザは優秀なんです。JavaScript, HTML, CSSの3つの仕事をこなしているのだから。

JavaScriptの機能、HTML, CSSとの関係

ブラウザからリクエストを受けて、Webサーバーから送られるデータはすべて構造文書(文字列)です。それがHTMLです。

(画像や動画などは、文書内のurlからさらにリクエストを送信して取得します。)

HTMLをそのまま表示すると、分からない人には意味不明な、構造化されたデータが表示されるだけです。

HTMLの内容は、ブラウザを右クリックして、『ソースコードを表示』で見ることができます。

HTMLは、『家の土台と骨組み』です。一応、キッチン、リビング、収納、トイレ、バスルームなど、決められたところに配置はされてますがそれぞれの姿形は見えません。

HTMLは、コンポーネント(文字・ボタン・テキストボックスなど)の種類と配置を決めています。

一方、家の屋根、外壁、内装など、住めるような形に肉付けするのはCSSです。

CSSは、コンポーネントのサイズ・色・形などの装飾を担当します。

そして、家だけ立派にしても豊かな生活はできません。家具・家電など生活の『動き』を用意する必要があります。それがJavaScriptです。

JavaScriptは、コンポーネントに動きをつけて、リッチなWebサイトに仕上げます。

  • クリックしたら色を変える
  • ドラッグ&ドロップでコンポーネントを動かす

など多彩です。最近はWebアプリと言って、Webサイトをアプリケーションとして使うことができます。Webアプリのタッチ(マウス)操作の中核がJavaScriptです。

下のコンテンツはちょっとしたJavaScriptの動きです。

スマホ・タブレットなら、タッチしてそのまま指を動かす(フリック)と、『サンプル』が指についてきます。

PCのマウスなら、クリックしてそのまま動かす(ドラッグする)と、『サンプル』がマウスについてきます。

上下はスクロールで動きづらいです。これはバグです。あくまでサンプルなので完璧にはしていません。
サンプル

このように、JavaScriptはユーザーの操作に関連することをフロントサイドで担当します。

JavaScriptライブラリについて

JavaScriptには、いろいろな種類のライブラリがあります。それらのほとんどは、無料で使えます。(ライセンスはあります。)

代表的なものだけいくつか紹介します。

jQuery

JavaScriptをかんたんに実装するためのライブラリです。もとのJavaScriptよりもかんたんな書き方を提供します。

おそらく1番有名で、使うことも多いライブラリです。

Angular

Angularは、以前はAngularJSと呼ばれた、Googleとコミュニティーが開発したフロントサイドのフレームワークです。オープンソースなので、誰でも自由に使えます。

フレームワークとは、プログラムの型(フレーム)のことで、基本的な機能はすべてフレームワークで用意されています。

開発者は、オリジナルの機能だけを作れば良いので、開発が楽になります。

ここ5,6年でもっとも注目されているライブラリの1つです。

名前から『JS』がなくなったのは、推奨プログラム言語がTypeScriptになったからです。

TypeScriptは、JavaScriptと同じECMAScriptをもとに作られたプログラム言語なので、JavaScriptで書いてもほとんどは正常に動きます。

ただし、jQueryとの併用はできません。

Node.js

サーバーサイドのプログラムをJavaScriptで作るためのフレームワークです。

リッチなWebサイトを作るには、サーバーサイドでプログラムを書く必要があります。代表的なプログラム言語は、PHPやJavaなどです。

今でもそうですが、フロントサイドとサーバーサイドでは、必要な技術が違います。それぞれ専門の技術者がいるのが当たり前です。

そうなると、1つのWebサイトを作るのに最低2人の専門家が必要です。もしくは、かけ持ちで両方できる、スーパーな人を連れてくるかです。

これをもっと効率的にするために、フロントサイドの技術(JavaScript)で、サーバーサイドのプログラムも作ってしまおうと開発されたのがNode.jsです。

これで、フロントサイドの技術者だけでWebサイトが作れるようになりました。

また最近では、フロントエンド開発環境の作業を自動化する、タスクランナーなどのツールもNode.jsのnpmパッケージをベースに作られていることが多いです。(Gulp, webpack, etc...)

最近のWeb開発ではタスクランナーの導入が必須になってきているので、どちらかというと、こちらの方がNode.jsに触れる機会は多いでしょう。

まとめ

JavaScriptは、Webサイトの中核の技術です。Webサイト作成で本格的なプログラミングをするのに、最初に使うプログラム言語でもあります。

Webデザインに関わる人、Webデザイナーを目指す人は、HTMLやCSSとは違って、必ず習得する必要はありません。しかし、もっとも身近なプログラミング言語なので、かんたんなものは作れると良いです。

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!