【プログラミング入門】「JavaScript」について５分で解説！｜プログラミング未経験からITエンジニアになろう

こんにちは！たわし系エンジニアのユウキといいます。

僕は１７年以上プログラミングで飯食っているITエンジニアです。

Webプログラミングの学習で「HTML」を覚えたら「JavaScript」も使う必要が出てきたでしょ？

WebプログラミングでJavaScriptは覚える必要あるの？

ジャバ？JavaScript？って結局なにするもの？

こんな疑問を持つプログラミング初心者や、ホームページを作りたいあなたのために

「JavaScript」について超簡単に５分で解説します。

JavaScript３つの何
JavaScriptを覚えるメリット
JavaScriptを体験しよう

JavaScript３つの何

JavaScriptは何の略？

JavaScript

ジャヴァ・スクリプト

そのままです。略してません。

ちなみに、よく言われるJavaとはまったくの別物。

べ・つ・も・の！

ラーメンとラーメンマンくらい違うよ。

ホームページ上で動くプログラミング言語です。

たわしむし

「ホームページ」と「Webページ」広義では同じ意味やし、
これ以降は「Webページ」で表現するで。

フォームの入力チェックをしたり、サブウィンドウを開いたりWebページ上の動き全般を担います。

JavaScriptは何で出来てる？

JavaScriptはプログラミング言語なので文法があります。

その文法上に、変数・演算子・メソッド（関数）・オブジェクト・プロパティ・イベントハンドラなどがあります。

その組み合わせで、Webページ上で動きを付けることができます。

JavaScriptで何が出来る？

Webページに動きを付けることが役割なのがJavaScriptです。

Webページには「HTML」、「CSS」、それと「JavaScript」がほぼ使われています。

Webページをラーメンで例えると

HTMLで器、麺、スープ、チャーシュー、ネギと材料を表現し、

CSSで黒い器、細麺、豚骨スープ、大きなチャーシュー、白髪ネギと材料に装飾を追加し、

JavaScriptで器から湯げが出て、麺は固め、とろとろのスープ、口どけのチェーシュー、シャキシャキのネギと材料に動きを付けます。

【プログラミング入門】「HTML」について５分で解説！初心者向けに、プログラミング入門として「HTML」について5分で読める程度にまとめました。簡単なサンプル付きです。...

【プログラミング入門】「CSS」について５分で解説！初心者向けに、プログラミング入門として「CSS」について5分で読める程度にまとめました。簡単なサンプル付きです。...

JavaScriptが出来ることを補助するためにたくさんのフレームワークやライブラリィが存在してます。

たとえば、代表的なライブラリィにJQueryがあります。

フレームワークと思ってましたが、Vue.jsがでてきてからは、そうは呼べなくなりました。

その他に、Webページを抜け出してサーバーサイドで活躍するNode.jsもあります。

ここでは簡単にすましておきます。

jQuery（ジェイクエリー）

JavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリのこと。

$を使う記述方法が印象的で処理のショートカット集のようなもの。

Vue.js（ヴュージェイエス）

JavaScriptフレームワークと言われ、表示を担うDOM操作を容易に利用できるようにしたもの。

HTMLタグにディレクティブと呼ばれる「v-」の付いた属性を指定して使うのが印象的です。

Node.js（ノードジェイエス）

サーバーサイドのJavaScript実行環境のこと。

フロント側もサーバー側（バックエンド）も同じ言語で記述できたら楽じゃね？ってのが始まりらしい。

ユウキ

今から覚えるなら基礎になりそうなjQueryがおすすめです。

JavaScriptを覚えるメリット

JavaScriptは手軽に始めれるプログラミング言語

Webページを作成したいあなたは「HTML」を学習しますよね。

そして間もなくJavaScriptを使って動きをつけたくなります。

Webページを作成するあなたが一番はじめに覚える本格的なプログラミング言語といっても過言ではないですね。

でも先述したような、ライブラリをいきなり取り入れる必要なはく、必要最低限の簡単なものから始められるのがいいところ。

JavaScriptは知識が浅くても使えるし、深く潜ればどこまでも潜れてしまうプログラミング言語だと思っています。

ユウキ

僕もまだまだ理解できてない世界があります。
それだけ、良くも悪くも多くのエンジニアに愛されている言語なのだと思います。

「HTML」と同じく、PCがあれば特別なツールやソフトが必要なく学習が可能です。

JavaScriptはWebページを作るのに必要

ほとんどのWebページにJavaScriptが使われています。

これからWebプログラミングを始めようと思っているあなたに、

少なくとも基礎部分は必要な知識になります。

HTMLを学習しつつ、CSSやJavaScriptも合わせて覚えるのが

これからのあなたに必要な学習手順になります。

JavaScriptは入門書、ネット上に情報が豊富

JavaScriptは歴史が長く、書籍やインターネット上にJavaScriptについての情報が豊富にあります。

ぶっちゃけ書籍は買わなくてもいいです。

文法について解説したサイトがたくさんあるので、

ググってあなたにあったサイトを１つお気に入りに追加しておきましょう。

もし買うなら辞書的な書籍があればいいかも

JavaScript逆引きレシピ第2版 [ 山田祥寛 ]

書籍によっては、「それ初心者が覚える必要ある？」って思う入門書があります。

それはあなた向けではないので注意してください。

リファレンスサイトについては、最後にリンクはってます。

JavaScriptを体験しよう

メモ帳とブラウザがあればOK

Windowsならメモ帳、Macならテキストエディット

拡張子を指定して文章を保存できるテキストエディタであればなんでもいい。

ここではWebページ（HTML）上で動かすのを前提で書いてます。

<!DOCTYPE html>
<html>
<head>
<title>こんにちはJavaScript</title>
<script type="text/javascript">
window.onload = function() {
    alert("Hello world!!");
}
</script>
</head>
<body>
<h1>JavaScriptはじめました</h1>
</body>
</html>

このHTMLファイル名の拡張子を「.html」にして保存する。

これをダブルクリックするか、ブラウザで開くと作成したHTMLとJavaScriptをすぐに確認できます。

JavaScriptの基本

JavaScriptをHTML上で適用する方法は大きく２つあります。

外部jsファイルでHTMLに適用
<script>～</script>タグ内に記述してHTMLに適用

外部jsファイルでHTMLに適用

たとえば、

function aisatsu() {
    alert("Hello world!!");
}

「hello.js」でJSファイルを作成します。

そのファイルを読み込むことでHTMLに適用します。

src=”このなかにHTMLから見える相対パスを指定する“

<!DOCTYPE html>
<html>
<head>
<title>こんにちはJavaScript</title>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<h1>JavaScriptはじめました</h1>
</body>
</html>

<script>～</script>タグ内に記述してHTMLに適用

別ファイルにせず、直接HTML内に定義して適用する方法です。

適用方法は２つあるといいましたが、ほぼ両方使うのが基本です。

外部読込分は、共通で使いたいライブラリィなどの読込に使い、

直接書く方は、その画面独自の処理を記述します。

こんな感じで合わせ技になります。

<!DOCTYPE html>
<html>
<head>
<title>こんにちはJavaScript</title>
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
window.onload = aisatsu;
</script>
</head>
<body>
<h1>JavaScriptはじめました</h1>
</body>
</html>

読込順序があるので、外部ファイルを先に記述する点を注意してください。

定義したJavaScriptを実際に動かす方法は、

functionで定義して使う
ページ読み込み時に動かす（ボタンの動作を定義するなど）

これらでJavaScriptを使うのが一般的かな。

ボタン１つの動きを作るのも上の２つどちらでも可能なので、

可読性、保守性、アジャイル性を考えて僕は作ります。

あと好みもありますけど。

JQueryなどのライブラリィを使いだすと、その点は統一されていくかなって感じですね。

自由度がある分、複雑な点でもありますね。

よく使うJavaScriptっぽい処理

簡単に５つほど例を出してみます。

このブログ上で実装するのは難しいので、

先述した方法で実際にファイルを作って試してください。

alert

メッセージ画面を表示します。

登録フォームなどで、「郵便番号は数字で入力してください。」など表示された覚えがあると思います。

サンプルでは画面を開いたときにメッセージを表示しています。

confirm

同じくメッセージを画面に表示します。

alertと違うのは、OK/キャンセルが選べる（日本語のブラウザ）

登録フォームなどで、「登録しますか？」と確認メッセージがでるあれですね。

サンプルでは、ボタンを押したら確認メッセージを表示するようにしています。

onclick

クリック時のイベントを定義します。

HTMLのinputタグに直接定義して使うのが入門編ですね。

サンプルでは、ボタンのイベントを定義しています。

onload

Webページが読み込まれた時のイベントを定義します。

先述のように、window.onloadを使ったり、

HTMLのbodyタグに直接定義して使う方法もあります。

サンプルでは、Webページ読込時にメッセージを表示するように定義してます。

open

サブ画面を開きます。

たとえば、保険サイトで詳細説明リンクがあってクリックすると開く小窓とかですかね。

サンプルでは、確認メッセージのあとにサブ画面を開くようにしています。

この５つを表現したサンプルです。

<!DOCTYPE html>
<html>
<head>
<title>こんにちはJavaScript</title>
<script type="text/javascript">
/* onloadとalert */
window.onload = function() {
    alert("Hello alert!!");
}

/* onclickに定義し、confirmとopen */
function google_open() {
    if (confirm('グーグルを開きますか？')) {
        window.open('https://google.co.jp/', 'google-subwindow', 'width=200,height=200,resizable=yes');
    }
}
</script>
</head>
<body>
<h1>JavaScriptはじめました</h1>
<input type="button" value="ボタン" onclick="google_open()">
</body>
</html>