プログラミング

ホームページを作るのに使うプログラミング入門でもある「JavaScript」について5分で解説!

JavaScript初心者

ホームページ作成するのに「HTML」を覚えたら「JavaScript」も使う必要が出てきたでしょ?

ホームページを作るのにJavaScriptは覚える必要あるの?

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

こんな疑問を持つプログラミング初心者や、

ホームページを作りたいあなたのために

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

JavaScript3つの何

JavaScriptは何の略?

JavaScript

ジャヴァ・スクリプト

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

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

べ・つ・も・の!

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

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

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

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

JavaScriptは何で出来てる?

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

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

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

JavaScriptで何が出来る?

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

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

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

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

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

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

HTML初心者
ホームページを作りたいプログラミング未経験者向けに「HTML」について5分で解説!プログラミング初心者や、ホームページ作成に取り組んでいこうとしているあなたが まず最初に聞く単語といえば、「HTML」ですよね。 ...
CSSとは
ホームページを作りたいプログラミング初心者向けに「CSS」について5分で解説!ホームページを作ろうとしているあなたが最初に出会うのが「HTML」、そして「CSS」ですね。 ホームページを作るにはHTMLと...

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

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

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

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

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

jQuery(ジェイクエリー)

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

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

Veu.js(ヴュージェイエス)

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

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

Node.js(ノードジェイエス)

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

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

ユウキ
ユウキ
アプリのプッシュ通知などが得意らしいですが、正直Node.jsはよくわかりませんw

JavaScriptを覚えるメリット

JavaScriptメリット

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

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

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

Webページを作成するあなたが一番はじめに覚える

本格的なプログラミング言語といっても過言ではないですね。

でも先述したような、ライブラリをいきなり取り入れる必要なはく、

必要最低限の簡単なものから始められるのがいいところ。

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

ユウキ
ユウキ
僕もまだまだ理解できてない世界があります。
それだけ、よくできた言語なのだと思います。

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

Webページを作るのに必要

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScriptを体験しよう

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上で適用する方法は大きく2つあります。

  • 外部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内に定義して適用する方法です。

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

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

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

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

<!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を使うのが一般的かな。

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

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

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

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

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

よく使うJavaScriptっぽい処理

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

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

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

alert

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

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

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

confirm

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

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

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

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

onclick

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

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

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

onload

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

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

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

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

open

サブ画面を開きます。

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

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

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

<!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>

 

学習方法

最後にJavaScriptを学習するために優良なサイトを紹介

progateのJavaScript講座

月額1000円ほどで楽しく学習可能。

基礎編だけなら無料で楽しむことも可能です。
https://prog-8.com/languages/es6

リファレンスサイト

HTMLクイックリファレンス

とほほのWWW入門

では、この辺でおわります。

ユウキでした。