今回はプログラミングを始めてHTMLやCSSは分かってきたけどJavaScriptてなんだろう？？
こんな悩み持ったことはありませんか？
そんな初心者向けに、JavaScriptとは何ができるのかをわかりやすく解説します
では今回の目標です
- JavaScriptとはどのような言語なのかを理解すること
- JavaScriptはどのようなときに使うのか、イメージをつかむこと
- HTML/CSSとJavaScriptの違いを知ること
まだHTMLとCSSが分からないよって方はこちらの記事から読み進めてください！
それでは行きましょう！
JavaScriptとは？
HTMLとCSSが記述できれば最低限のWebサイトは制作できます。しかしHTMLとCSSだけでは、ユーザーの目を引くような動きのあるWebサイトを制作するのは難しいです。
そこで活躍するのがJavaScriptというプログラミング言語です。
一番身近なのは、WEBサイトを表示するブラウザ上で動くプログラムです。Javascriptが無くてもWebサイトは見ることはできますが、文章や写真をそのまま読むだけで、いろいろな操作ができません。これだと、とても不便ですね。
そこで、プログラミング言語のひとつであるJavaScriptを使用することで、ブラウザ上で画像を拡大表示して見やすくしたり、入力フォームを設置してメッセージを送付できます。
JavaScriptとJavaの違い
さきほど紹介したJavaに関連して、JavaScriptとの違いをまとめました。Javaという共通の用語が含まれているので、似たプログラミング言語と思うかもしれません。ところが実際には全くの別物です
| JavaScript | Java | |
|---|---|---|
| 変数の処理 | 動的 | 静的 |
| 開発の目的 | Webサイトのページ制作をより簡単により早くする | どんなハードウェアでも動作する |
| 利用分野 | Webサイトのページ制作 （Webブラウザ上で動くシステムやサービスなど） | さまざまな大規模システム （業務システム、SNSなどのWeb関連サービス、Androidのスマホ向けアプリなど） |
JavaScriptの特徴
ブラウザさえあればすぐにJavaScriptでWebサイトを制作できる
一般的に、プログラミング言語は実行するための環境が必要です
Web開発で人気のPython、Ruby、PHPなども、それぞれ言語ごとに実行するための環境を用意しなければなりません。しかし、JavaScriptでWebサイトを制作する場合は例外です
なぜなら、私たちが普段から利用しているブラウザ（Google Chrome、Firefox、Microsoft Edgeなど）には、すでにJavaScriptを実行できる環境が用意されているからです
つまり、ブラウザさえあればすぐにJavaScriptでWebサイトを制作できるのです
ブラウザ上でページを表示するとき、JavaScriptを使った場合は以下のような特徴があります。
| JavaScriptを使う場合 | JavaScriptを使わない場合 | |
|---|---|---|
| （例）文章・写真の表示 | 他に変更したり、拡大表示や動かしたりできる | HTMLファイルで指定したまま表示される |
| （例）フォームに文字入力し送信 | 可（送信自体は別のプログラムが担当） | 不可 |
| 主な動作場所 | 利用者のパソコンやスマホのブラウザ | – |
| 便利さ | 圧倒的に便利 | 不便 |
| 複雑さ（学習の難易度） | 複雑（言語の理解が必要） | – |
フロントエンドからバックエンドまで開発できる
フロントエンドは主にHTML・CSS・JavaScriptを使って開発します。
一方でバックエンド（サーバーサイド）開発は、PythonやRubyなど、フロントエンドとは別の言語で開発するのが一般的です。
- フロントエンド＝Webサイトやアプリのうち、目に見える部分
- バックエンド（サーバーサイド）＝Webサイトやアプリのうち、目に見えない部分（ユーザーの個人情報などを保存するサーバー側）
しかし、JavaScriptはバックエンドも開発できます。つまり、JavaScriptを習得すれば、バックエンドもフロントエンドと同じ言語でプログラミングできるということです。
このようにJavaScriptには、1つの言語でフロンエンドからバックエンドまで、一通りの開発を実現できる大きな強みがあります。
バックエンドと聞くとハードルが高く感じるかもしれませんが、JavaScriptの学習を進めればそのハードルは大きく下がるはずです。
3多様なライブラリ・フレームワークがあり、効率よく開発できる
JavaScriptには、便利な機能を1つにまとめたライブラリや、Webアプリを効率よく開発できるフレームワークがたくさん提供されています。
| 代表的なJavaScriptライブラリ | 特徴 |
|---|---|
| jQuery | DOM操作やAjax処理が簡単にできるライブラリ（DOM操作やAjax処理については本教材の終盤でも学習します） |
| React | UI（ユーザーインターフェース、ユーザーが見たり操作したりする画面）の作成に特化したライブラリ |
| Three.js | 3Dコンテンツの制作に特化したライブラリ |
| 代表的なJavaScriptフレームワーク | 特徴 |
|---|---|
| Angular（アンギュラー） | Webアプリを開発するためのフレームワーク |
| Vue.js（ヴュー・ジェイエス） | WebアプリにおけるUIを作成するためのフレームワーク |
これらをフル活用すれば、ゼロから自分でコードを書かなくてもさまざまな機能を実装できます。つまり、初心者でも効率よくWeb開発ができるということです。
JavaScriptでできること
これまで解説してきたように、JavaScriptはWebとの親和性がとても高いうえ、多様なライブラリ・フレームワークによってあらゆる開発ができます。
開発の中でもJavaScriptが特に使われる領域は、「Webサイトへの動きの追加」です。本章の冒頭にも掲載しましたが、まずは、基本的な書き方について説明します。
JavaScriptの使い方
scriptタグを使用して読み込みます。
主に下記の方法で読み込みます。
- 直接ファイルに書き込む
- 外部のjsファイルを読み込む
この２種類を覚えておけば問題なしです。
１：直接ファイルに書き込む
HTML ファイル上に書いた場合、以下のソースコードの赤字の部分(<script>から</script>）までがJavaScriptです目的に応じていろいろなルールがあります。
短い記述の場合などは、このようにHTMLファイルに直接書く事もあります。
- <!DOCTYPE html>
- <html>
- <body>
- <script>
- //ここにJSを書いていく
- </script>
- </body>
- </html>
２：linkタグで外部のjsファイルを読み込む
外部にjsファイルを作成してそれを読み込む方法です
- index.html
- style.css
- main.js
上記のようにjsという拡張子をつける事でjsファイルとして認識してもらえます。上記のファイルを下記のように書くとファイルを読み込む事ができます
- <script src=”main.jp”><?script>
linkタグと使い方は似ています。jsファイルの場合はscriptタグを使用して読み込むというのを覚えていきましょう
JavaScriptの書く場所
JSファイル（例としてscript.js）を作成したとします
HTML内でscriptタグが使える場所は下記の通りです
- headタグ内
- bodyタグ内
上記の２箇所でscriptタグをしようする事ができます。
bodyタグ内に書く場合
- <!DOCTYPE html>
- <html lang=”ja”>
- <head>
- <meta charset=”utf-8″>
- <title>JavaScriptの練習</title>
- </head>
- <body>
- <script src=”script.js”></script>
- </body>
- </html>
headタグ内に書く場合
1つ目の方法と同様に、headタグ内で読み込むこともできます。
- <!DOCTYPE html>
- <html lang=”ja”>
- <head>
- <meta charset=”utf-8″>
- <title>JavaScriptの練習</title>
- <script src=”script.js”></script>
- </head>
- <body>
- </body>
- </html>
1つ目の方法と同様に、以下の基準で読み込む場所を決めましょう
- 画面の表示前にJavaScriptの処理を実行したい場合→
headタグ内 - 画面の表示後にJavaScriptの処理を実行したい場合→
bodyタグ内の最後
一般的にはbodyタグ内の最後に書くことが多いです
書き方の基本ルール
JavaScriptの書き方にはいくつかのルールがあります。基本的なルールは以下のとおりです。
- 大文字と小文字は区別する
- 文末にセミコロンをつける
- 1行コメントは行頭に
//、複数行コメントは/*と*/で囲む
これらのルールを守らないと正しく動作しないこともあります。しっかりと覚えておきましょう
大文字と小文字は区別する
JavaScriptに限りませんが、プログラミングにおいては大文字と小文字をまったく違うものとして区別する点に注意が必要です。
文末にセミコロンをつける
JavaScriptの文末には、;（セミコロン）をつけます。これは文の終わりを意味しています。
1行コメントは行頭に//、複数行コメントは/*と*/で囲む
コメントは、コードの中にメモのような文章を書ける機能です。
一般的に、コードの意図や処理の流れ、機能などを忘れないようメモを残すために使うケースがほとんどです。
まとめ
今回は
- JavaScriptとはどのような言語なのかを理解すること
- JavaScriptはどのようなときに使うのか、イメージをつかむこと
- HTML/CSSとJavaScriptの違いを知ること
を初心者向けに説明しました！
今回はJavaScriptってこんなのなんだという感じで理解していただければ幸いです
JavaScriptは決して難しいプログラミング言語ではなく、ページの制作には大切なものとご理解いただけたかと思います。ぜひ習得して、より利用しやすいWebサイトの運営にお役に立てください
コメント