Javascriptとは？書き方など初心者にもわかりやすく解説します！

あらすじ

近年プログラミング言語を語る上では欠かせない言語となったJavascript。

Javascriptでできることはかなり幅広く、他の言語ではなかなか見られない特徴を持っているため、世界中でもっとも使われているプログラミング言語といっても過言ではないくらい人気の高い言語です。

ウェブサイトの動的デザインに加えて、サーバー側でも利用できてしまうのがこのJavascriptを唯一無二の存在にしています。

プログラミング初心者の方で、「どんな言語を学ぼうか。。」と悩んでいるのであれば、迷わずこのJavascriptの学習をお勧めします。

Javascriptとは

Javascriptととは、ウェブサイトにアニメーションや動きを加えることができるプログラミング言語です。

それ以外にもできることがたくさんありますが、（詳しくは次項で解説します）基本的には「ウェブサイトに動きを加えるもの」と考えてもらって問題はないでしょう。

Javascriptでできること

Javascriptでできることには大きく分けて二つあります。

一つ目は、すでに説明した通り、ウェブサイトに動きを加えることです。

そして二つ目は、サーバー側でも利用できることです。

 
それでは詳しく見ていきましょう。

 
まず一つ目の、ウェブサイトに動きを加えることができることについて。
 
Javascriptをウェブサイトに導入することで、

といったことが可能になります。

 
皆さんもウェブサイトに訪れた際に、サイト上部の画像が左右に動いたり、画像が横から出てきたりといったアニメーションを一度は目にしたことがあるのではないでしょうか。

こういった機能のほとんどがJavascriptによって実装されています。

 
そして二つ目が、サーバー側でも利用ができるということ。
 
まずはサーバーについて。

Javascriptはこのサーバー自体を操作することができ、さらにはサーバー構築すらもできてしまうので、革新的な言語であることは間違いないです。
(サーバーサイドでのJavascriptについては後ほどさらに詳しく説明します。)

ウェブページといった、人に見られる部分や、サーバー側などの人に見られない部分両方を一つのプログラミング言語でできるというのは非常に便利であり、Javascriptを他のプログラミング言語とは違う唯一無二の存在にしています。

Javascriptの書き方

Javascriptの書き方には大きく分けて3通りあります。

まず、headタグ内に記述する方法とbody内に記述する方法、外部ファイルに記述する方法です。

CSSのStyleと同じようなものですね。

headタグ内で記述する方法

index.html:

アウトプット:

bodyタグ内で記述する方法

index.html:

アウトプット:

外部ファイルとして読み込む方法

index.html:

index.html:

script.js:

アウトプット:

HTMLやCSSとの違い

さて、Javascriptについて説明してきましたが、HTMLやCSSとはどういった違いがあるのでしょうか。

それぞれについてみていきましょう。

HTMLとは、ウェブページの型を作る言語です。

HTMLについて詳しく知りたい方はこちらの記事もご覧くださいfa-arrow-circle-down

HTML5とは？初心者必見！できることや書き方について解説します！

2019.7.24

あらすじ フロントエンジニアやwebデザイナーは知っていて当たり前といってもいい言語HTML5。 HTML5の5はバージョンを表しており、今現在の最新のバージョンが5となります。 今回はそんなHTML5についてどのようなことができるのか、もしくはどのように書いていけばいいのかを解説していきたいと思い...

CSSはウェブページを装飾する際に使う言語です。

CSSについて詳しく知りたい方はこちらの記事もご覧くださいfa-arrow-circle-down

CSS3とは？初心者必見！プロパティ、セレクタ、バージョン、文法など

2019.8.18

あらすじ CSSとはどのような言語で、どのような働きをするものなのでしょうか。 今回はそんな疑問にお答えするべく、CSSという言語について詳しく解説していきたいと思います。 具体的には CSSとは CSSの文法 CSSのバージョン CSSプロパティの代表例 といった項目に分けてご紹介していきます。...

そしてJavascriptはウェブページに動きを与える言語です。

それぞれを建物で例えると、

となり、一つの建物が出来上がります。

 
これと同じことがウェブページにも言えます。

ほとんどのウェブページはこの3つの言語が元に作られています。

JavaとJavascriptは同じ？

よくプログラミング言語でありがちな間違いが、JavaとJavascriptは同じ言語と思ってしまうことです。

名前は似ていますが、実はこの2つ、全く異なったプログラミング言語です。

Javaとは

Javaとはサーバー側でしか使用できないプログラミング言語で、中身や文法もJavascriptとは全く違うものです。

フロントエンドで使われる言語HTMLやCSSとは違い、PHPやPythonといったバックエンドで使われる言語と同じくくりになります。

フロントエンドのJavascript

先ほども少し出てきたフロントエンドについてまずは説明したいと思います。

フロントエンドのJavascriptにはいくつかのフレームワークがあります。

フレームワークとはプログラミング言語をより簡単かつスムーズに利用するためのテンプレートのようなものです。

Javascriptの中でもとくに下記のフレームワークは非常に人気があり、世界中で利用されています。

バックエンドのjavascript

バックエンドとはサーバー側のことを指し、Javascriptはフロントエンドだけでなくバックエンドでも使用が可能です。

その中で最も有名なのがNode.jsです。

Node.jsはサーバー側で使用できるJavascriptのことを指します。

Node.jsはサーバー自体を作ることもでき、サーバー内の操作もできるので、バックエンドの言語の中でも人気が高いです。

実際にNode.jsを取り入れている会社が

など、そうそうたる面々です。

 

まとめ

いかがだったでしょうか。

Javascriptは今のプログラミング言語では欠かせない存在であり、その有用性の高さから、世界中で使用されています。

この記事を見てJavascriptについて少しでも興味を持っていただけたのなら幸いです。

合わせて読みたい

[初心者用]javascriptを1から学ぶ際におすすめな本(入門書)5選！

2020.4.13

あらすじ みなさんJavascriptというプログラミング言語は耳にしたことがありますでしょうか。 おそらくプログラマーやウェブ業界にいる方だったらほとんどの方が知っているはずです。 memoJavascriptとはプログラミング言語の中でもかなり柔軟性のある言語で、ブラウザ上だけでなくサーバー...