【JavaScript入門】JavaScriptってなに

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

など、JavaScriptについて知りたい方向けの内容になっています。

JavaScriptは、ウェブサイトやウェブシステムを作るのに欠かせない言語です。JavaScriptはウェブブラウザ上で動くプログラミング言語です。

私たちが操作する部分(ユーザーインターフェース)を作るために使われたり、ウェブサイトに動きをつけるために使われます。

近年、JavaScriptの需要は大きく伸びており、日本だけでなく世界中の多くの企業やプログラマの間で使われています。

本章で、JavaScriptの概要や特徴、需要について詳しく学びましょう。

JavaScriptの概要

JavaScript（ジャバスクリプト）はウェブブラウザで動くプログラミング言語です。

ウェブブラウザとは、皆さんがインターネットで検索するときに使うSafari（サファリ）や、Chrome（クローム）、IE(インターネット・エクスプローラ)、Microsoft Edge(マイクロソフト・エッジ)などのことを言います。

お使いのスマホで検索するときに、SafariやChromeを使ったことがある人は多いと思います。

インターネットをするときに使うツールをウェブブラウザと言い、ウェブブラウザ上で検索して表示するページをウェブサイトといいます。

そして、その ウェブサイトで動くプログラミング言語 がJavaScriptになります。

JavaScriptはウェブサイトを作るのに欠かせない言語であると解説しました。

では、JavaScriptは普段私たちが使うウェブサイトでどのように使われているのでしょうか。

その仕組みを理解するために、まずはウェブサイトについて学んでいきましょう。

ウェブサイトとは

本章で定義するウェブサイトとは、ウェブブラウザ上で見ることのできるページ を指します。

普段、皆さんがインターネット上で見ているブログ、ニュース記事、会社のホームページ、通販サイトなどを大きく括ってウェブサイトとと言います。

ウェブサイトの仕組み

パソコンやスマホの普及によって、ウェブサイトは私たちの生活に馴染み深いものになりました。

しかし、そのウェブサイトはどのように作られているのでしょうか。

ウェブサイトを構成する大きな要素は次の3つになります。

では、一つずつ見ていきましょう。

HTML

HTML（エイチティーエムエル）とは、ウェブサイトの構造を作るために特化した言語です。

ウェブサイトで表示される全てのものはこのHTMLをもとに作られています。

例えば、「送信する」ボタンをウェブサイト上に置きたい場合は次のように書くことができます。

<button>送信する</button>

このようなコードを書くことによって、ウェブサイトで次のように表示されます。

送信する

では、このコードは一体どこに書くのでしょうか。

HTMLは、「.html」という拡張子をつけたファイルの中で書くことができます。

例えば、「index.html」というファイルを作ってそのファイルをウェブブラウザに読み込ませると自動的にHTMLファイルであると認識し、ボタンを表示してくれます。

CSS

CSS（シーエスエス）はスタイルシートととも言い、ウェブサイトのデザインに特化した言語です。

例えば、先ほどの「送信する」ボタンに色をつけたいときはCSSを使うことができます。

「送信する」ボタンを「赤色」に変えてみましょう。

button{
  background-color: red;
}

このようなコードを書くことによってボタンの背景を赤色にすることができます。

送信する



JavaScript

JavaScriptは、ウェブサイトに動きをつけるための言語です。

例えば、先ほどの「送信する」ボタンに押したときの動作をつけることができます。

ボタンを押したときに、「送信する」が「送信しました」に変わるようにしてみましょう。

const button = document.getElementById("testButton")

button.addEventListener('click', (e) => { 
  e.target.innerText = "送信しました" 
})

実際に次のボタンを押してみてください。

送信する

このように、JavaScriptは私たちがとったアクションに対して動きをつけることができます。

これは、HTMLやCSSだけではできないことです。

上記は単純な例ですが、JavaScriptを使うことによってアニメーションをつけたり、より具体的な動きをつけてウェブサイトをカスタマイズすることができます。

JavaScriptができること

JavaScriptはウェブブラウザで動くプログラミング言語と解説しました。

ウェブサイトに動きをつけて、様々なカスタマイズをすることができます。

しかし近年、JavaScriptや周辺の技術は大きな進化を遂げて、JavaScriptはウェブサイト以外にも活用させることができるようになりました。

JavaScriptを使うと次のような開発をすることができます。

本章では上記の技術について詳しく解説はしませんが、一つの言語でこれだけ多岐に渡って開発できるということを覚えておきましょう。

JavaScriptは覚えやすいの？

多くのプログラミング言語の中でJavaScriptは初心者にとって分かりやすいと言われています。

なぜなら、文法がシンプルで、ウェブブラウザ上で動くので気軽に動作確認をすることができるからです。

実際の現場でJavaScriptは使われているの？

筆者は現役のプログラマですが、今現在でもJavaScriptを多くの現場で使っています。

JavaScirpt周辺の技術の進化は目覚ましいので、これからも多くの企業で使われる言語になるでしょう。

これからウェブプログラマになりたい人は必須の言語になります。

JavaScriptは需要の高い言語

JavaScriptはとても需要の高い言語です。世界中のプログラマの間で人気のあるプログラミング言語です。

stackoverflowというサイトで、人気テクノロジーのランキングでJavaScriptは1位になりました。

https://insights.stackoverflow.com/survey/2020#technology-programming-scripting-and-markup-languages より引用。

また、Nojov によると国内の求人数もJavaScriptが1位になっています。

まとめ

本章では、JavaScriptの概要や特徴について学びました。

最後にもう一度、内容を確認しましょう。

次の章では、JavaScriptを動かすための準備をします。