JavaScript

【超絶理解】JavaScriptとは?『変数』『配列』『連想配列』『関数』の使い方と応用方法を教えます

Javascriptとは?変数、配列、連想配列の基本的な使い方教えます

WEBの勉強をしている方であれば、何度も『JavaScript』という言葉を聞いたことがあるのではないでしょうか?

『いつか勉強しよう』『たぶん理解できないし』など何となく諦めていたり、勉強を先延ばしにしているのではないでしょうか?

ですが、そんなことはありません。誰でも必ず理解できます!今やりましょう!!

今回はウェブのフロントエンドで必ず使われる『JavaScript』について、初心者でも分かりやすく理解できるようにプログラミング初学者が躓きがちな『変数』『配列』『連想配列』『関数』についての概念と応用方法をサンプルコードと共に分かりやすく解説していきたいと思います。

 

 

JavaScriptとは?

『JavaScript』とはウェブサイトのフロントエンドで実行されるインタプリタ方式のプログラミング言語で、ブラウザで手軽に実行できるという特徴があります。

具体的な利用範囲としてはHTMLとCSSと組み合わせることによって動的な動きのあるサイトを制作する場合によく利用されます。

最近では3Dデータの描画、サーバーサイド、スマホアプリ制作で使われる場合もあり、その利用範囲は多岐に渡ります。

ウェブをするなら必須知識!!初心者でも理解できるHTMLとCSSの使い方教えます
WordPressを始めるなら必須知識!!初心者でも理解できるHTMLとCSSの使い方教えます

突然ですが、みなさんはHTML、CSSという言葉を聞いたことはありますか? ウェブについて勉強を始めた方や中学や高校の時に学校で多少触れたとい方であれば、ある程度何に使えるものなのかはご存知かと思いま ...

続きを見る

 

ちょっと解説

インタプリタ方式とはプログラムが機械語に変換されながら実行されるという意味です。

また、別のプログラミング言語であるC言語などはコンパイル方式という方法が使われており、コードが機械語に変換されてから実行されるので速度が高速という特徴があります。

インタプリタ方式は実行速度でコンパイル方式のプログラミング言語には劣るのですが、実行した際にエラー箇所の確認(デバッグ)がしやすいなどの特徴があります。

 

JavaScriptの書き方と用語の解説

まずここでは『JavaScript』の書き方と基本的な用語についての説明をしていきます。

ここで解説することは基本的に他のプログラミング言語にも共通する部分がありますので、『JavaScript』だけというよりはプログラミング全体を理解するつもりで学習することをオススメします。

 

ファイルの拡張子

HTMLの場合は『.html』でCSSの場合は『.css』でしたがJavaScriptの場合は『.js』と拡張子を書いてファイルを保存しましょう。

 

JavaScriptの実行方法

まず『JavaScript』をファイルに記述して実行できる状態にしなければなりません。

そのためにはJavaScriptで記述されたファイルとは別でHTMLで記述されたファイルも必要になります。

上の例のように『index.js』という名前のファイルと『index.html』という名前のファイルを同一の階層に作成して、『<script src="index.js"></script>』という風に記述してJavaScriptファイルを読み込みましょう。

そうすると『index.js』に記述されたJavaScriptを『index.html』を開くことによってブラウザ側で確認できるようになります。

 

ちょっと解説

上の例であげたようにindex.jsには『console.log('JavaScriptの実行方法');』と記述されていますが、これをブラウザで確認するためにはindex.htmlのファイルを開いた状態で、Macなら『command + option + i』、Windowsなら『F12』のキーを押すことによってデベロッパツールが利用できるようになります。

その中にある『Console』という欄にJavaScriptで記述した『console.log』の内容が表示されます。

 

コメントの書き方

『JavaScript』には2種類のコメントアウト(コメント)の方法があります。

一つは『/**/』の中に記述するタイプと『//のように隣接する形で記述する方法があります。

 

変数の書き方

変数とは値を代入できるのようなもので、箱(変数)に値を保存しておいて後からそれを参照する場合などに利用されます。

現在『JavaScript』の変数の書き方は3種類存在します。

ここでは変数の書き方と、代入方法、出力方法について学んでいきましょう。

上の記述例で書いたように『変数宣言キーワード 変数名 = 代入する値;の形になっていることが分かるかと思います。

そのような形にして変数の代入を行い、『console.log(変数名);』でブラウザのコンソールに代入した値が出力されます。

文字を代入する場合は文字列を'' (シングルクォーテーション)』(ダブルクォーテーション)』で囲みます。

また、数字の場合は裸のまま数を記述して代入します。

 

ちょっと解説

変数に値を代入する場合は『=』を使いましたが、よく勘違いされるのが数学の場合『=』は何々と何々が等しい(イコール)という意味を持ちますが、プログラミングでの『=』は代入という意味なので間違いのないように注意しましょう。

 

変数宣言キーワード(var)

『var』での変数宣言は、宣言した変数名と同じ変数名で宣言することが可能で、再代入も可能という特徴があります。

 

変数宣言キーワード(let)

『let』での変数宣言は、宣言した変数名で同じ変数名を宣言することが出来ず、再代入は可能という特徴があります。

 

変数宣言キーワード(const)

『const』での変数宣言は、宣言した段階で変数名が定数として扱われ、宣言した変数名で同じ変数名を宣言することも出来ず、代入された値は再代入不可の状態になるという特徴があります。

 

定数

定数とはプログラム側で定まった固有の名前のことで、その内容を後から変更することや同じ名前で利用することはできません。

例えば『var』『let』『const』などはプログラム側で、定数の扱いになっているので、同じ名前で変数名を書くことは出来ません。

 

変数を使って演算をしてみよう(四則演算)

変数がどのようなものなのかがある程度は理解できたと思いますので、ここでは数字を使って足し算や引き算などの簡単な四則演算をやってみましょう。

四則演算をすることによって変数の振る舞いを理解しやすくなりますので、面倒くさがらずにチャレンジしてみましょう!

 

足し算(加法)

算数でいうところの『1 + 1 = 2』を表現してみましょう。

 

引き算(減法)

算数でいうところの『2 - 1 = 1』を表現してみましょう。

 

掛け算(乗法)

算数でいうところの『2 × 2 = 4』を表現してみましょう

 

割り算(除法)

算数でいうところの『4 ÷ 2 = 2』を表現してみましょう

 

配列の書き方

配列とは変数のように値を保存することができ、その値を複数保持できるという特徴があります。

例えば、『変数の書き方』のところで『変数は箱のようなもの』と説明しましたが、配列はその箱を複数持っておけるというイメージです。

上の例のように、配列の要素一つ一つには番号ふられており、左から順番に『0, 1, 2, 3, 4 ...』のようになっています。

値にアクセスする場合は変数名[添字];』添字ブラケットで囲むように書くことで要素の中身を得ることができます。

 

ちょっと解説

普段数字を数える時は『1, 2, 3, 4, 5 ...』と数えて行くことが当たり前ですが、コンピューターの場合は『0』から数字を数えます。

この振る舞いは他のプログラミング言語でも使われる共通の概念なので、必ず覚えるようにしましょう。

 

多次元配列

多次元配列とは階層構造をもった配列のことです。

例えば配列の中に配列をもつということができ、変数名[添字][添字];』のようにして要素の値にアクセスができます。

 

関数の書き方

関数とは命令をパッケージ化して一つにまとめることによって後から実行できるようにするための機能です。

例えば、プログラムで同じような命令を何度も書いていると良くないので、一つにまとめて実行する場合などに使用されます。

現在JavaScriptには二種類の関数の書き方があります。

上の例であげたように関数を書く場合が『function 関数名() {命令}』の形と『let 関数名 = ()=> {命令}』の形になっています。

 

引数

引数とは関数の実行の際に値を関数内で受け取れる機能のことです。

引数を受け取る時は関数作成時に仮引数を定義してから関数実行の時に引数を渡すようにしなければなりません。

 

戻り値

戻り値とは関数実行の際に『return文』によって返される値のことです。

 

コールバック関数

コールバック関数とはある特定の関数を呼び出すための関数です。

例えば、『A関数』を『B関数』の実行が終わった後に呼び出す場合などに使用されます。

 

連想配列の書き方

連想配列とはオブジェクトのことで『物』のように扱うことができます。

例えば『物』の状態(プロパティー)を定義したり、関数(メソッド)を定義することができます。

上の例のように『let 変数名 = {プロパティー: };』という形で記述します。

オブジェクトのプロパティーの値を得る場合は変数名.プロパティー名の形でアクセスできます。

 

プロパティー

プロパティーとはオブジェクトの状態を表したものです。

 

メソッド

メソッドとはオブジェクトが持っている関数のことです。

 

JavaScriptでHTMLを操作してみよう

ここからはJavaScriptでHTMLを操作する方法を学習していきます。

今まで得た知識を組み合わせながら、実践的な使い方を学んでいきましょう!

 

HTML(DOM要素)を取得してみよう

 

HTMLの内容を変えてみよう

 

Windowオブジェクトの機能を使ってみよう

 

時計を作ってみよう

 

まとめ

今回は初心者でもJavaScriptを理解できるように基本的な書き方や応用方法にして解説してまいりましたが、いかがでしたでしょうか?

一度、記事を読んだだけでは完全に理解できないかと思いますので、何度も読み直して、サンプルコードを実行してみることをオススメします。

HTML、CSSの勉強はある程度しているけどプログラミングの概念が上手く理解できなかったりして前に進めず不安な気持ちに押しつぶされそうになって、『自分にはプログラミングの才能ないんじゃ!?』とか『JavaScript勉強しなくてもHTML、CSSだけできたらいいじゃん』と思っている方がいるかもしれません。

ですが、JavaScriptが習得できなということは今後WEB業界で生き残ることは、まず不可能に近いです。

最初は理解できなくても、色々な書き方を目にするうちに大体『これは、こういう意味かな?』とか『こう書いたら、効率よく書けるよね』などがわかってくるはずです!

ですので、直ぐに諦めずに何度も挑戦して数を重ねていきましょう!!

ココナラで初めてのサイト制作案件を獲得!!【実績ゼロでもできます】

ココナラで初めてのサイト制作案件を獲得【実績ゼロでもできます】

フリーランスになりたいと思って、今までいろんなエージェントやクラウドソーシングに登録したけど実績が無いから、全く案件が獲得できずに困った経験はありませんか?

ココナラを利用すれば、実績ゼロからでもサイト制作案件を獲得することができます。

技術を身に付けたいと思っていても発揮する場所が無かったり、実績作りに困っている方にオススメです。

現在は稼働していませんが、駆け出しの頃は、よくお世話になったサービスです。

ココナラ 売り上げ

  • この記事を書いた人

岡田元輝

大阪に住んでるWEBエンジニア。
高卒でアルバイトを転々とする生活の中、一念発起し独学でプログラミングを習得。
底辺脱出後はWEB制作(フロントエンド / バックエンドの実装)の仕事をして、休みの日は講師業やウェブサービスの運営とブログアフィリエイトで稼ぐ生活をしています。
WEBに関するお困りごとがありましたら、お気軽にお問い合わせください。

-JavaScript

Copyright© WordPressサイトで稼ぐ技術 , 2020 All Rights Reserved Powered by AFFINGER5.