きょうは JavaScript について学びます。
JavaScript は、Web ブラウザとメモの書けるテキストエディタさえあれば、プログラミングできる言語で、特別なものは何もいりません。
このことからはじめてプログラミングを学ぶ方にピッタリな言語です。
JAVA とはまったく違う言語です。Google map のように動きのあるページを作れるのです。
では、どのようにして作るのでしょうか？ それが問題ですよね。
きょうはあなたと、その JavaScript について学習します。
JavaScript は 初めの内はなんとかできるのですが、その内にっちもさっちもいかなくなります。次から次へと押し寄せる波を一人でバケツをもって掻き出しているいるみたいです。最後はかなりフラフラだった私は三重県津市在住のそこそこ年取っている男性です。
１．JavaScript とは何か？
目次の「閉じる」をクリックしてみてください。動きますね？
私は、HTML を学びつつ CSS も飲み込みんで作っていたのですが、そのうち「動きのあるサイト」にも興味を示すようになりました。あちこちのサイトへ出向いてはコピーして、自分なりにアレンジしていたものです。
そのうち Web 制作の仕事がしたくてクラウドソーシングで探してみたのですが、HTMLとCSS と JavaScript の３つがセットになっているので、どうしてもこの３つを同時に学習する必要に迫られたのです。それでも仕事を獲得するのは並大抵ではないことに気づかされます。
現状ではあなたが目にする Webサイトのほとんどは、もう HTMLだけでは制作されていません。
１．JavaScript の特徴
クライアントサイドとサーバーサイドの両方で使用される柔軟なスクリプト言語です。コンピュータが理解できる形に自動的に変換してくれるものです。その変換作業をしなくてもいい分、実行速度が遅くなりますが、作成や修正を簡単に行うことができます。Ruby や Perl と同じです。
主にWeb開発で利用されますが、最近ではデスクトップアプリケーションやモバイルアプリケーションなど、さまざまなプラットフォームで使用されています。
動的なプログラミング言語
実行時に変数やオブジェクトの型を判断します。これにより、柔軟なプログラミングと素早い開発が可能です。
イベント駆動型のプログラミング言語
ユーザーのアクションやウェブページのロードなどのイベントに対応して動作します。これにより、対話的なウェブページやリアルタイムのアプリケーションを作成できます。
オブジェクト指向プログラミング（OOP）の機能を備えています
クラス、オブジェクト、継承、ポリモーフィズムなどのOOPの概念を使用して、再利用可能なコードを作成できます。
ブラウザの API やライブラリと組み合わせて使用することができます
例えば、DOM（Document Object Model）を操作するための API ※や、Ajax 通信を行うためのライブラリなどがあります。
マルチプラットフォーム対応
さまざまなデバイスとブラウザで動作するため、幅広いユーザーに対応できます。
高い拡張性とカスタマイズ性
サードパーティのライブラリやフレームワークを使用して、機能を拡張したり、開発プロセスを効率化したりすることができます。
これらの特徴により、JavaScript は広く使われる言語であり、ウェブ開発の中核的な役割を果たしています。
API って何？
APIは、Application Programming Interfaceの略称
ソフトウェアアプリケーション同士が情報や機能をやり取りするためのインタフェースを提供します。異なるソフトウェアコンポーネントやシステム間でデータや機能を共有するための手段です。ソフトウェア開発者は、APIを使用して他のアプリケーションやサービスの機能を呼び出したり、データを取得したり、処理したりすることができます。
APIは、さまざまな形式で提供されることがあります。一般的なタイプには、ウェブAPI（Web API）、ライブラリAPI、オペレーティングシステムAPI、データベースAPIなどがあります。ウェブAPIは、Webサービスやクラウドサービスとの通信に使用され、データや機能をリクエストおよびレスポンスの形式で提供します。
APIは、プログラムやアプリケーションの機能を再利用したり、異なるシステム間での連携を容易にするために広く使用されています。例えば、ソーシャルメディアプラットフォームのAPIを使用すると、外部のアプリケーションがユーザーのプロフィール情報を取得したり、投稿を作成したりできます。
APIは、ソフトウェア開発者にとって非常に便利なツールであり、アプリケーションやサービスの拡張性や統合性を向上させるのに役立ちます。
APIは、ソフトウェアアプリケーション同士が情報や機能をやり取りするためのインタフェースを提供するのね。
OOP って何？
Object-Oriented Programming（オブジェクト指向プログラミング）の略称
OOPは、ソフトウェア開発のためのプログラミングパラダイム（方法論）であり、プログラムをオブジェクトとして捉える考え方です。
従来の手続き型プログラミングでは、プログラムを手続きや関数の集まりとして捉えますが、OOPではプログラムを相互に連携するオブジェクトの集まりとして捉えます。オブジェクトは、データ（属性や状態）と操作（メソッドや関数）を組み合わせたものです。
OOPの主な概念には以下のようなものがあります:
クラス（Class）
オブジェクトの設計図や定義を表現したものです。クラスはオブジェクトの属性と操作を定義します。
オブジェクト（Object）
クラスのインスタンスです。オブジェクトはクラスの属性を持ち、クラスで定義された操作を実行することができます。
カプセル化（Encapsulation）
オブジェクトの内部の状態を隠蔽し、外部からのアクセスを制御する仕組みです。オブジェクトは自身の内部の状態を管理し、外部からは公開されたインタフェースを通じて操作されます。
継承（Inheritance）
クラスの階層構造を定義することで、既存のクラスの属性や操作を継承し、拡張や修正を行うことができます。これにより、コードの再利用性や保守性が向上します。
ポリモーフィズム（Polymorphism）
異なるクラスのオブジェクトが同じメソッドを持つことで、異なるオブジェクトを同じように扱える仕組みです。これにより、柔軟なプログラムの拡張や変更が可能になります。
OOPは、ソフトウェアの設計や開発において、コードの再利用性、保守性、拡張性を高めるために広く使われています。また、実世界の問題やシステムをモデル化しやすくし、より自然な方法でプログラムを構築することができます。
OOP って「クラス」や「オブジェクト」のことをいうのね。
スクリプト言語（Scripting language）
スプリプと言語って？
コンピュータプログラムを実行するためのプログラミング言語の一種です。スクリプト言語は、通常は解釈型の言語であり、スクリプト（プログラムの一連の手順や命令の集まり）を実行するためのランタイム環境が必要です。
この言語は、大きなアプリケーションやシステムを開発するための一般的なプログラミング言語（例：JavaやC++）とは異なり、小規模なタスクや自動化された処理、スクリプトとしての動作を目的としています。スクリプト言語は、スクリプトファイルを作成し、それを実行することによって動作します。
スクリプト言語は、簡潔な構文と高い可読性を持ち、一般的にはコンパイルの必要がないため、開発効率が高いとされています。また、スクリプト言語は通常、他のプログラミング言語とのインタラクションや拡張性に重点を置いています。
代表的なスクリプト言語には、JavaScript、Python、Ruby、Perl、PHPなどがあります。これらの言語は、ウェブ開発、自動化、データ処理、システム管理などの様々な用途で広く使用されています。
スプリプと言語はコンパイルの必要がないのね。
API（Application Programming Interface）
ソフトウェアアプリケーションが他のアプリケーションやシステムと相互作用するためのインターフェース API は、異なるソフトウェアコンポーネントやサービスが互いに通信し、データや機能を共有するための契約やセットのことを指します。
API は、開発者がアプリケーションやサービスを利用する際に、予め定義されたルールやメソッドを使用して相互作用する手段を提供します。これらを通じて、開発者は外部のソフトウェアやサービスの機能やデータにアクセスしたり、要求を送信したり、応答を受け取ったりすることができます。
API は通常、リクエストとレスポンスの形式で情報をやり取りします。リクエストは、特定の操作や要求の内容を示し、レスポンスは、その要求に対する結果やデータを返します。APIは、ウェブAPI（Web API）として提供される場合もありますが、他の形式（例：ライブラリやフレームワーク内のAPI）でも使用されます。
API はさまざまな目的で使用されます。例えば、ソーシャルメディアプラットフォームのAPIを使用することで、外部アプリケーションがユーザー情報を取得したり、投稿を作成したりできます。決済ゲートウェイの API を使用することで、オンライン決済を処理するアプリケーションが支払い情報を送信したり、取引を確認したりできます。
API はソフトウェアの相互運用性を高め、開発者が既存のサービスや機能を活用するための手段を提供します。また、APIの提供側は、外部開発者が自社のサービスを拡張し、統合することを容易にすることで、エコシステムの拡大やビジネスの成長を促進することができます。
2．JavaScript は HTML に直接書き込む
初心者の私にはうってつけの言語です。
JavaScript を実行するための<script>タグは、HTML のどこに書いてもかまいません。一般的には<head>タグの中に書かれることが多いです。ただし、Webページの読み込み時にスクリプトを実行したい場合は、必ず<body>タグよりも先に記述します。
そのコードの違いから最初はうち間違いをするかもしれません。Web ブラウザとメモ帳さえあれば、プログラミングのできる言語で、特別な開発環境を用意したり、アプリを購入する必要もありません。
「JavaScript は知らないし、HTML や CSS もよくわかってない」方もいらっしゃるかもしれません。そこで、本ブログでは、HTML や CSS の基礎知識をとりいれながら、JavaScript の基本から実践までを学んでいこうと思います。
JavaScript は当時はそれほど有名ではなくむしろ邪魔くさい言語として評価されていました。そこへGoogle がマップや Gmail などで、画面の地図移動やリアルタイムメール送受信などで息を吹き込み、今や JavaScript だからこその世界を築いています。
さらに、JQuery のような JavaScript フレームワークの登場で、スマホサイトなどが初心者でも手軽に作れるようになりました。
JavaScript は今後もさらに発展していくでしょう。
2．HTML で表現できることには限りがあるので JavaScript
HTML に追加することにより、大きな力になるのが JavaScript です。
Web サイトを装飾するだけでなく、HTML5 に JavaScript を組み合わせることで、動きのある Web アプリを構築できます。
１．JavaScript を書く場所
まずは、VSC を開き、エクスプローラーから「フォルダを開く」をクリックします。
デスクトップから新しいフォルダを作成します。名前は適当でいいです。MyJS とでもしておきます。「index.html」というファイルを作っていきます。そしてエクスプローラーをクリックしてサイドバーを隠します。
それでは、html を書いていきます
<!DOCTYPE html>
HTMLのタグではありませんが、先頭にまず DOCTYPE 宣言です。「<!DOCTYPE html」と記されている文書タイプが「html」であるという意味です。
<html lang=”ja”>
html 要素内で使われている言語はja、つまり日本語ですよという意味です。
<head>要素と<body>要素を書いていきます。
<meta charset=”utf-8″>
日本では、「UTF-8」「Shift_JIS」「EUC-JP」の3つがよく使われている文字コードです。なお、HTMLでは UTF-8 を使用することが推奨されています。
最初の文字を入力するだけで、候補がズラーと出るので便利です。候補から打ちたいコードを選べば、終了タグまでおまけについてきます。はかどりますね。
<title>タイトルをつけます
<style>
「.box{」はクラス属性のばあい、「.」をつけます。あとは、広さ、高さ、背景色、cursor:pointer
はマウスカーソルをリンクポインタに指定することです。
<div class=”box”>
<div>は囲った部分をブロックレベル要素としてグループ化することができるタグです。align属性で水平方向の位置やスタイルシートをつけたりすることができます。
「保存」を確認してから、「<>index.html」をドラッグしてブラウザに貼り付けると・・・
表示されました。skyblue をクリックしたら pink に変わります。
JavaScript を実行するための <script> タグは、基本的には HTML 文のどこに書いても構いません。一般的には <head>タグの中に書かれることが多いようです。ただし、Web ページの読み込み時にスクリプトを実行したい場合は、必ず <body>タグよりも先に記述します。
このように書いて「ja.html」で保存します。これをブラウザで表示すると
表示できました！
JavaScript コードを書く場所は、いくつかの方法で指定できます。
一般的な場所を示します。
HTMLファイル内の<script>要素
HTMLファイル内で<script>要素を使用してJavaScript コードを埋め込むことができます。<script>要素内に直接 JavaScript コードを記述するか、外部の JavaScript ファイルを指定することができます。
外部のJavaScriptファイル
JavaScript コードを別のファイルに保存し、HTML ファイルから参照することもできます。外部の JavaScript ファイルを使用する場合は、<script>要素の src 属性にファイルのパスを指定します。
JavaScriptの開発環境や統合開発環境（IDE）
より複雑な JavaScript プロジェクトでは、統合開発環境（IDE）やテキストエディタを使用して JavaScriptコ ードを作成することが一般的です。Visual Studio Code、Atom、Sublime Text などのテキストエディタは、JavaScript コードの作成に適しています。
これらは JavaScript コードを書く一般的な場所ですが、実際の開発環境やプロジェクトの要件に応じて、より詳細な設定や構造を使用することもあります。
ここが JavaScript を書く場所なのね。
３．JavaScript は HTML や CSS の要素を動かせるソフト
JavaScript は <body></body> の中に書きます。
まず、「‘use strict’;」と入力します。JavaScript 上のエラーを検出してくれるのです。要素を指定したいときは、「id」をつけておきます。ここでは「target」とつけておきます。
document.getElementById(‘target’).addEventListener(‘click’,())=>{
document.getElementById(‘target’).style.background=’pink’;
});
document というのは文書全体のことで、EventListener とは「何かが起きたら何かをする」ということで、click したら pink に変えてね、という意味です。
以後は関数で、矢印はアロー関数と呼ばれています。
１．JavaScript でエラーしたときの対処
JavaScript では大文字小文字を区別するので、例えば ById を byId としたらどうなるか？
クリックしてもウンともスンともいいません。そこで、chrome のデベロッパーツールをつかいます。
クリックしたら、下の consore です。右側に「〇行目がおかしいよ！」という風な文字が出ます。
そこで、先ほどのページに戻り、見直し修正します。
も一度 chrome にもどるとエラーメッセージが消えています。
そこでクリックするとちゃんと動きます。
２．JavaScript でオンラインショッピングサイト
「学習がはじめやすい」ことや、フロントエンド（Webページを記述するエンジニア）だけでなくフレームワーク（アプリケーションを開発するとき、その土台として機能させるソフトウェア）を利用すればバックエンドにも対応できます。
ユーザーとやりとりすることをフロントエンド、その入力データや指示をもとに、処理を行って結果を出したり、保存したりする処理をバックエンドといいます。
商品を検索し、カートに入れ、配送情報を入力し購入ボタンを押す。サーバーというコンピュータのデータを呼び出し、商品検索を行い、購入ボタンを押す。ブラウザがフロントエンド、データベースがバックエンドとなります。
ゲーム開発もできます。スライドする動き、メニューバーの出し入れ、ポップアップの表示など、さまざまな場面で使われます。特別な開発ツールなどはまったく必要とせず、テキストエディタさえあれば作れるのです。
３．JavaScript をブラウザ上で動作
サーバーでの処理を必要とせず、Web サイト制作者が必要に応じてさまざまな機能を追加していけるというところがあります。
フォームや、SNS など Facebook や、twitter、ブログなどの管理機能には、HTML,CSS,Javascript
に加えて、システムの動作を設計する言語、バックエンドと呼ばれる言語を習得する必要があります。(HTML,CSS などはフロントエンドと呼ばれます)
４．JavaScript はハイブリッドアプリ
CSS と組み合わせて、iOS でも Android でも使える「ハイブリッドアプリ」が開発できます。Web ページ制作に、ひとつの用途だけではなく、さまざまなことに広く利用、応用できる性質があります。
外部ファイルとして別に記述し、それを呼び出すということもできます。外部ファイルとして保存したファイルの拡張子は js です。
これは JavaScript のファイルだとすぐわかるためです。
JavaScriptで書かれた簡単なサンプルコードです。この例では、ボタンをクリックするとメッセージが表示されます。
このコードをHTMLファイルに保存し、ブラウザで開くと、ボタンが表示されます。ボタンをクリックすると、アラートダイアログが表示され、”ボタンがクリックされました！”というメッセージが表示されます。
あとがき
JavaScript は一つのサイト内でもいたるところに活用されていますので、エンジニアやプログラマーを目指す人には必須です。開発環境を準備する必要がない分、学習開始が楽です。サーバーサイド開発まで踏み込むと習得が急激に難しくなります。
Webデザイナーになりたいなどであれば、HTML、CSS と Javascript は覚えておきたい言語です。エンジニアやプログラマーを目指す人には必須です。Web・スマホアプリの開発に使用する場合、それだけ求人数や受託案件も増えます。
「手本どおりに書いたのにうまくいきません！」とおっしゃる方がいますが、スペルミス、記号違い、記述漏れ、記述箇所が違う、全角スペースが混ざっているなど、自分で気づいていない記述ミスがほとんどです。
誰でも最初はそんなものです。私もセミコロンの書き忘れで一日つぶしたこともありましたよ。まずはこれらのリストと照らし合わせながら、自力で解決を試みてください。
誰かに教わるよりも、自分で解決した方が知識として定着しやすいです。ひと休憩はさんで見てみると、間違いに気づきやすかったりもしますね。エラーとうまく付き合って、スキルアップしていきましょう！
JavaScript について悩みや疑問がありましたらご自由にコメント欄に投稿してください。（コメント欄はこの記事の最下部です）。いただいたコメントはすべて拝見し、真剣に回答させていただきます。
コメント