WEB

【初心者向け】JavaScript無料学習(前編)

【※ 当記事は2020年7月2日時点の情報です】

ペイヴメント(@pavement1234)です。

エンジニア
エンジニア

JavaScriptの基礎を知りたい。

こんな悩みを解決します。

環境

Windows10 Home(64bit)1903

短時間で読めるようにJavaScriptで出来ることを広く浅くご紹介します。【前編】ではJavaScriptの歴史の紹介、カンタンな実行方法、基本的な文法をご説明します。

JavaScriptの歴史

JavaScriptはNetscape Communication社によって1995年に世の中に発表されました。最初はLiveScriptという名前だったそうですが、Netscape Communication社と業務提携していたサン・マイクロシステムズ社が開発したJavaの名前をもらい、JavaScriptになったとのこと。

私がプログラマーになった1999年当初は個人ホームページが大流行していてJavaScriptが積極的に使われていましたが、Internet ExplorerとNetScape NavigatorでJavaScriptの言語仕様に差異(方言)があったり、セキュリティ上問題となるJavaScriptが埋め込まれたWEBサイトが増えたりと、評判は良くなかったと思います。

しかし2005年にAjaxAsynchronous JavaScript + XML)が登場し状況は一変します。Ajaxで実現された最も有名なアプリはGoogle Mapです。Asynchronous という言葉の通り画面遷移しなくてもWEBブラウザとWEBサーバが非同期通信してページを更新することが可能となり、動きが多いのに待ち時間を感じさせない(ノンブロッキングな)WEBページが増えていったのです。最近ではNode.jsを使ってサーバサイドでJavaScriptを実行したり、ElectronというJavaScriptで作られたアプリケーションワークでAtomというデスクトップで動作するエディタが作られたりと、目覚ましい進化を遂げ今に至ります。

≫参考:JavaScript(Wikipedia)

JavaScriptの実行方法

主に3種類の方法でJavaScriptを実行できます。

<script>タグでHTMLに直接埋め込む方法

type1.htmlというファイルを作成 エディタ(UTF-8が指定できるもの)で以下の内容を入力し保存。

type1.htmlをブラウザで開くと以下のメッセージが出ます。alertという関数でポップアップメッセージを表示させています。

JavaScriptファイル(*.js)をHTMLから参照する方法

type2.htmlいうファイルを作成。エディタで以下の内容を入力し保存。

type2.jsいうファイルを作成。エディタで以下の内容を入力し保存。

 

type2.htmlをブラウザで開くと以下のポップアップメッセージが出ます。

サーバサイドで実行する方法

Node.jsというソフトを使うとサーバサイドでJavaScriptを実行することが可能です。(ローカルPCにNode.jsサーバを立てることもできます)。

 

type3.jsいうファイルを作成。エディタで以下の内容を入力し保存。これがJavaScriptで書いたWEBサーバプログラムです。たったの5行。

 

このプログラムをローカルPCにインストールしたNode.js(nodeコマンド)で以下のように実行すればWEBサーバとして動作しますので、ブラウザを立ち上げアドレスバーにhttp://127.0.0.1:1234と打ってリターンするとHello Node.jsと表示されます。

Node.jsについて詳しく書いてあるページを見つけました 大枠を知るのに大変役立ちます。

≫とほほのNode.js入門

冒頭にも書きましたがNode.jsとChromium(Google CromeとかOperaもベースにしてるオープンソースブラウザ)をベースとしたElectronというマルチプラットフォーム対応のアプリ開発環境があります。HTML、CSS、JavaScriptでアプリ開発できるとのこと Atom、Skype、VSCodeはElectronで作られてるそうです(AdobeのBlacketもNode.jsとChromiumを使っていて似た感じです)。

≫参考:Electron(ソフトウェア)(Wikipedia)

※Node.jsについては別の記事を書く予定です。

基本的な文法

基本的な文法はC言語に似ている気がします。

コメント

スラッシュを2つ繋げたもの(//)がコメント開始マークです。以降コメントとみなされます。

演算

まず数値の計算方法をご説明します。calc.htmlというファイルを作成。エディタで以下の内容を入力し保存。

calc.htmlをブラウザで開くと以下のポップアップメッセージが出ます。1+2+3+4+5+6+7+8+9+10という足し算が計算され55と表示されました

足し算(+)、引き算(-)、掛け算(*)、割り算(/)、剰余(%)などを演算子と呼びます(もっと沢山ありますが詳細は割愛します)が、演算子には優先順位があって足し算より掛け算が先に計算されたりします。たとえば(1+2*3)を計算をすると(1+(2*3))と計算され7になります。足し算を先に行って欲しいなら((1+2)*3)という式にする必要があります(9になりますね)。

次に文字列の連結をご紹介します。string.htmlというファイルを作成。エディタで以下の内容を入力し保存。

string.htmlをブラウザで開くと以下のポップアップメッセージが出ます。‘abc’’def’という文字列が連結され’abcdef’と表示されました。

文字列はシングルクォーテーション(’)ダブルクォーテーション(”)のどちらかで文字を囲うことで定義できます。文字列の中にシングルクォーテーション(’)もしくはダブルクォーテーション(”)を入れることもできます。シングルクォーテーション(’)を文字列に入れる場合は文字列自身はダブルクォーテーション(”)で囲います(逆も然り)。

変数宣言(プリミティブ型、オブジェクト型)

まずプリミティブ型数値型、文字列型、真偽値型、undefinedなど)についてご説明します。プリミティブ型は基本データ型とも呼ばれ、シンプルな値を保持します。primitive.htmlというファイルを作成。エディタで以下の内容を入力し保存。

primitive.htmlをブラウザで開くと以下のポップアップメッセージが出ます。1つ目のalertで数値型、文字列型、真偽値型が表示され、2つ目のalertで値を代入していない変数を表示しようとしたためundefinedが表示されました。

次にオブジェクト型Object、Function、Array、String、Boolean、Number、Math、Date、RegExp、Error、nullなど)についてご説明します。オブジェクト型は複合データ型とも呼ばれ、プロパティとして複数のプリミティブ型を持つことができます。組み込みのオブジェクト型だけでなく、自作オブジェクトを作ることもできます。

object.htmlというファイルを作成。エディタで以下の内容を入力し保存。

object.htmlをブラウザで開くと以下のポップアップメッセージが出ます。1つ目のalertで数値オブジェクト型、文字列オブジェクト型、配列オブジェクト型が表示され、2つ目のalertでnull(nullはオブジェクトです)を代入した変数を表示したためnullが表示されました。

 

 

 

 

 

【注意点1】

プリミティブ型のコピーは値渡しです。

str2に別の値を入れてもstr1の”1234”は影響を受けません。

一方、オブジェクト型のコピーは参照渡しアドレス渡しみたいなもの)なので、コピー先のプロパティが変更されるとコピー元のプロパティも影響をうけます。具体的にはこんな感じです。

arr2に別の値を入れるとarr1も同じ値になります。

条件分岐(if、else、switch)

まずはif文、else文です。

condition.htmlというファイルを作成。エディタで以下の内容を入力し保存。

condition.htmlをブラウザで開くと以下のポップアップメッセージが出ます。

次にswitch文です。

switch.htmlというファイルを作成。エディタで以下の内容を入力し保存。

switch.htmlをブラウザで開くと以下のポップアップメッセージが出ます。

ループ(while、for)

まずはwhile文です。while.htmlというファイルを作成。エディタで以下の内容を入力し保存。

while.htmlをブラウザで開くと以下のポップアップメッセージが出ます。

次にfor文です。for.htmlというファイルを作成しエディタで以下の内容を入力し保存。

for.htmlをブラウザで開くとwhile.htmlのときと同じポップアップメッセージが出ます。一般的にはwhileよりforの方が使われるケースが多いと思います。

関数定義

さて、最後は関数定義です。function.htmlというファイルを作成 エディタで以下の内容を入力し保存。

function.htmlをブラウザで開くと以下のポップアップメッセージが出ます。今回作成したのはaddという関数です。引数(パラメータ)にaとbを入力するとa+bの加算値が返却されるカンタンなものです。

まとめ

これで簡単なJavaScriptのプログラムが書けるようになります。後編はもう少し踏み込んだ内容に進みます。

≫【初心者向け】JavaScript無料学習(後編)

ITスキルを身につけると条件の良い転職が可能になる

ITスキルを身につけると条件の良い転職が可能になります。当ブログがそのキッカケになったら幸いです。


ABOUT ME
ペイヴメント
ペイヴメントのエンジニア塾(当ブログ)では20年以上の経験から得られたプログラミング系ノウハウについてベテランにも満足して頂けるような内容の濃いコンテンツを初心者にも分かりやすい形で日々発信しています。【経歴】ベンチャーのソフトハウスで4年勤務後、精密機器メーカーのソフト開発部門に勤務し今に至ります。
error: Content is protected !!