JavaScriptの基本的な書き方2つ｜できることや勉強方法についても紹介

Javascript
プログラミング言語

公開日時: 2021-02-17 　更新日時: 2021-10-07

この記事でわかること

システム エンジニア: JavaScriptの基本が知りたいです。

プロジェクト マネージャー: JavaScriptでできることや勉強方法を紹介しますね。

JavaScriptでできること7選

はじめに、JavaScriptでできることを7つ紹介します。画像の拡大、Googleマップの組み込み、アクセス分析サービス、送信前の記入漏れチェック、メイン画像の画面スペースで多くの情報を伝えること、マウスの動きでメニューの表示を制御できること、アプリの開発ができることについて、説明します。

1：画像拡大をしてくれる

JavaScriptで画像の拡大が可能です。

画像の拡大をしたい場合は、scale()というメソッドを使用します。例えば、画像を垂直方向に2倍、平面方向に2倍にしたい場合、

scale(2, 2)

1	scale(2, 2)

こちらのコードで可能です。

2：Google マップをページに組み込める

JavaScriptでGoogleマップの埋め込みが可能です。

その際HTMLやCSSへの書き込み、そしてGoogle Map APIのAPIキーが必要になります。Google Maps JavaScript APIを読み込む際に、パラメータのキーにGoogle Map APIのAPIキーを指定します。

<script>
    function initMap() {
        var latlng = new google.maps.LatLng( 34.808502, 135.639683 );//中心の緯度, 経度
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,//ズームの調整
          center: latlng//上で設定した中心
        });
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
      }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[取得したAPIキー]&callback=initMap"></script>

function initMap() {

var latlng = new google.maps.LatLng( 34.808502, 135.639683 );//中心の緯度, 経度

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 14,//ズームの調整

center: latlng//上で設定した中心

});

var marker = new google.maps.Marker({

position: latlng,

map: map

});

}

</script>

[取得したAPIキー]の部分にGoogle Map APIのAPIキーを指定します。

3：アクセス分析サービスが利用できる

JavaScriptで、Google Anyliticsなどのアクセス分析サービスの解析用タグを埋め込めます。基本的にWebページ内に指定されたタグを記述するだけで解析できるので、とてもお手軽です。

また、Webページへの1日のアクセス回数やその層などを分析することで今後どのようにWebサイトを作りこんでいけば良いか戦略を立てるための材料になります。例えば、

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');

ga('send', 'pageview');

このような記述をWebページに埋め込みます。

4：送信前の記入漏れをチェックしてくれる

JavaScriptでテキストなどを送信する前に記入漏れのチェックが行えます。これにより、ユーザーの誤送信を防ぎます。

メソッドはcheckForm()やcheck()を使用します。

5：メイン画像の画面スペースで多くの情報を伝える

JavaScriptで画像をスライドさせ、次々にメイン画像を次々に切り替えさせることが可能です。これにより、画像スペースの有効活用が可能です。

もし実際に記述する場合は、jQueryというJavaScriptライブラリで実現させます。その際はHTMLとCSSも変更する必要があります。

6：マウスの動きでメニューの表示を制御できる

JavaScriptで、クリックを押すことでメニューを表示させたり、画像などのマウスカーソルを合わせるとメニューが表示されるように実装できます。

実装の際には、HTMLとCSSも編集してクリックメニューの形を作る必要があります。

7：アプリの開発ができる

JavaScriptでWebアプリやスマホアプリ、ゲームなどが開発できます。アプリはJavaScriptのみでも作成可能で、必要であればHTMLやCSSなどの他の言語とも組み合わせることができます。

また、開発の際にはJavaScriptのライブラリに対する知識は欠かせないため、確認しながら開発しましょう。

JavaScriptの基本的な書き方2つ

JavaScriptの基本的な書き方には2つあります。HTMLファイルとjsファイルを作成しHTMLを参照する方法と、HTMLファイルの中で書く方法について、説明します。

HTMLファイルとjsファイルを作成しHTMLを参照する

JavaScriptを外部ファイルから取り込めます。その場合HTMLファイルとは別にJavaScriptが記述されたjsファイルを作成します。

もしHTMLファイルと同じ場所に「Sample.js」というファイルを格納している場合、

&ltscript src="Sample.js"&lt/script&gt

1	&ltscript src="Sample.js"&lt/script&gt

を記述することでJavaScriptが参照されます。基本的にbodyタグの途中で記載が入ることは少なく、bodyタグの直前か最後の部分に記述されることが多いでしょう。

こうすることでHTMLファイルの記述が減り、簡潔でコードが読みやすくなります。

HTMLファイルの中で書く

HTMLファイルの中に直接書き込むことでもJavaScriptを使用できます。直接書く場合は&ltscript&gtから&lt/script&gtの間にJavaScriptを記載します。

また、HTML5とHTML4以前とで記載内容に違いがあり、HTML5では<script>にtype属性を書く必要がなくなっています。

JavaScriptのforとは？

JavaScriptで同じような処理を何度も繰り返したい時はどうすれば良いのでしょうか。10回行うとして、同じ内容を10回記述するのは効率が悪いものです。そんな時はfor文を使えば解決します。

for文はJavaScriptに限らず多くの言語にある機能ですが、JavaScriptならではのルールもあります。この記事では基本から応用まで詳しく紹介するのでぜひご覧ください。

1：for文の基本を知る

JavaScriptのfor文は以下のように記述します。

for (var i = 0; i < 3; i++) {
    alert (i);
}

for (var i = 0; i < 3; i++) {

alert (i);

}

これを実行すると、alertによるポップアップウィンドウが3回出て来て、それぞれには0・1・2と表示されています。for文によって繰り返し処理が実行されたのです。

for文の文法は以下の通りです。

for (初期化処理; 繰り返す条件式; 変数の加減処理) {
繰り返し処理
}

for (初期化処理; 繰り返す条件式; 変数の加減処理) {

繰り返し処理

}

これを上のサンプルに当てはめると、変数iを0で初期化し、iが3よりも少ない間、i++によりiを1ずつ加算しながら繰り返すというfor文になります。

2：for文は省略ができる

for文の初期化処理・条件式・加減処理はそれぞれ省略が可能です。例えば、

var i = 0;
for (; i < 3; i++) {
    alert (i);
}

var i = 0;

for (; i < 3; i++) {

alert (i);

}

は同じ結果になります。また、

var i = 0;
for (; i < 3;) {
    alert (i++);
}

var i = 0;

for (; i < 3;) {

alert (i++);

}

もやはり同じ結果になります。そして、

var i = 0;
for (;;) {
    alert (i);
    if (++i >= 3) break; // iが3以上の場合はbreakで抜ける
}

var i = 0;

for (;;) {

alert (i);

if (++i >= 3) break; // iが3以上の場合はbreakで抜ける

}

も同じ結果です。条件式がない場合はずっと終わらず、無限ループになります。breakというキーワードがありますが、これを実行するとforループから抜けることができます。breakで抜けないとループがずっと終わらないので注意しましょう。

3：二重ループができる

for文は二重ループも可能です。以下のJavaScriptサンプルをご覧ください。

for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        alert('i=' + i + ' j=' + j);
    }
}

for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

alert('i=' + i + ' j=' + j);

}

実行すると、「i=0 j=0」「i=0 j=1」・・・「i=2 j=2」と9回表示されます。入れ子のループが実行されているのがわかると思います。このサンプルに以下のようなbreakを追加してみましょう。

for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        if (j==1) break;
        alert('i=' + i + ' j=' + j);
    }
}

for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

if (j==1) break;

alert('i=' + i + ' j=' + j);

}

これを実行すると内側のループはjが1になったら1つ外側に抜けるので、「i=0 j=0」「i=1 j=0」「i=2 j=0」と3回ポップアップが出て終わります。

4：breakにはラベルを付けられる

上のJavaScriptサンプルではbreakで抜けましたが、一つ外のループではなく、その外側に抜けて二重ループを終わらせたい場合はどうすればいいのでしょうか。その場合は以下のようにbreakにラベルを付けます。

outside: for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        if (j==1) break outside;
        alert('i=' + i + ' j=' + j);
    }
}

outside: for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

if (j==1) break outside;

alert('i=' + i + ' j=' + j);

}

実行すると「i=0 j=0」だけが出て終わります。i=0でj=1の時にbreakで外側のfor文のoutside:ラベルの所にいって、それで処理が終わるからです。ラベルはこのようにループが入れ子の時に利用してください。

5：continueを使う

JavaScriptにはbreakとは別に、continueがあります。これは以下のように使用します。

for (var i = 0; i < 3; i++) {
    if (i == 1) continue;
    alert (i);
}

for (var i = 0; i < 3; i++) {

if (i == 1) continue;

alert (i);

}

実行すると、0と2が表示されて終わります。1がスキップされました。そのように、continue処理をスキップする機能があります。forループでcontinueが呼ばれると、ループのそれ以後の処理が飛ばされて次のループに移るのです。

6：continueにはラベルが付けられる

continueにもbreakと同様にラベルを付けられます。以下のJavaScriptサンプルをご覧ください。

outside: for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        if (j==1) continue outside;
        alert('i=' + i + ' j=' + j);
    }
}

outside: for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

if (j==1) continue outside;

alert('i=' + i + ' j=' + j);

}

実行すると、「i=0 j=0」「i=1 j=0」「i=2 j=0」と表示されます。jが1になると外側のfor文の次のループに移行しています。ラベルを外したり、continueをbreakに変えたりして結果を比較すると理解しやすいでしょう。

7：オブジェクトの中身を取り出せるfor～in文がある

JavaScriptのfor文には、オブジェクトの中身を手軽に取り出せるfor～in文があります。以下がそのサンプルです。

var human = {
    name:'一郎',
    age: 30,
    work:'会社員'
}

for (var key in human) {
    alert(key + ' ' + human[key]);
}

var human = {

name:'一郎',

age: 30,

work:'会社員'

}

for (var key in human) {

alert(key + ' ' + human[key]);

}

humanにはname・age・workの3つのプロパティを持つオブジェクトが入っています。for～inですべてのプロパティを取り出すことができます。実行するとプロパティネームと値の3つの組み合わせが全て表示されます。

8：for～inの注意点

for～inには一つ注意点があります。上のサンプルのfor～inの前に以下の1行を追加してみましょう。

Object.prototype.func = function() {};

1	Object.prototype.func = function() {};

実行すると、humanのプロパティの中身を表示した後に「func function() {}」が出てきます。オブジェクトを拡張してfuncと言うメソッドを追加したことで、それまで表示されてしまうのです。しかしこれは意図した動作でないことも多いでしょう。

9：出したくないものを出さない方法

上の問題を解消するには、オブジェクトのhasOwnPropertyメソッドを使用すると良いでしょう。サンプルのfor～inの箇所を以下のように直してください。

for (var key in human) {
    if(human.hasOwnProperty(key)) {
        alert(key + ' ' + human[key]);
    }
}

for (var key in human) {

if(human.hasOwnProperty(key)) {

alert(key + ' ' + human[key]);

}

これでkeyで指定されたプロパティのみが表示されるので、funcは出て来なくなります。

10：for～of文を使う

次はfor～of文を解説します。以下のJavaScriptサンプルを実行してみてください。

var ary = ['太郎', '次郎', '花子'];
 
for(var value of ary) {
    alert(value);
}

var ary = ['太郎', '次郎', '花子'];

for(var value of ary) {

alert(value);

}

実行すると太郎・次郎・花子と3つのポップアップが表示されます。for～ofはこのように配列の各要素に処理を行いたい時に使うことができます。ただしfor～inのようにオブジェクトには使用できません。

11：配列を普通のfor文で扱う

for～ofを使わずに普通のfor文で配列の全要素に対して処理を行う場合は、以下のようにします。

var ary = ['太郎', '次郎', '花子'];
 
for(var i = 0; i < ary.length; i++) {
    alert(ary[i]);
}

var ary = ['太郎', '次郎', '花子'];

for(var i = 0; i < ary.length; i++) {

alert(ary[i]);

}

配列の長さは「配列変数.length」で取得できます。これで上のfor～ofを使ったサンプルと同じことができます。このやり方の方が他のプログラム言語と近いのでしっくり来る人も多いでしょう。

12：forEachを使う

最後はforEachを解説します。これもfor～ofと同じく配列で使用できるのですが、使い方が違います。

var ary = ['太郎', '次郎', '花子'];
 
ary.forEach(function(value) {
    alert(value);
});

var ary = ['太郎', '次郎', '花子'];

ary.forEach(function(value) {

alert(value);

});

forEachは配列変数のメソッドとして提供されています。コールバック関数を登録することで、配列の全要素に対して処理ができます。なおforEachではbreakやcontinueは使用できません。

13：forEachには3つのパロメーターがある

forEachのコールバック関数では3つのパラメータを利用できます。

function( value, index, array )

1	function( value, index, array )

valueが要素の値、indexが要素の番号、arrayが対象の配列です。以下はindexを使用しています。

var ary = ['太郎', '次郎', '花子'];
 
ary.forEach(function(value, index) {
    alert(index + ' ' + value);
});

var ary = ['太郎', '次郎', '花子'];

ary.forEach(function(value, index) {

alert(index + ' ' + value);

});

実行すると、「0 太郎」「1 次郎」「2 花子」と表示されます。

SE
for分を使い分けることで、様々な繰り返し処理が可能になるんですね。

PM
この3つのfor分が基本になりますので、自分なりに応用してマスターしてください。

javaJavaScriptの基本を勉強する方法2つ

JavaScriptの勉強方法には本を利用する方法と学習サイトを利用する方法があります。また、学習サイトの中でも今回はUdemy、Schoo、CODEPREP、Progate、ドットインストールについて、説明します。

勉強法にお困りの方は、ぜひ参考にしてみてください。

本を利用する

JavaScriptを勉強するための教本は数多く出版されています。教本を選ぶ際は、自分がJavaScriptをどれだけ理解しているかによって選びましょう。

初学者にはノンプログラマのためのJavaScriptはじめの一歩、中級者の方にはJavaScript本格入門、上級者にはEffective JavaScriptなどがおすすめです。また、基本的に初学者の方は文字が並んでいる本よりコードのサンプルや図解の多い本を選ぶことで楽しく学んでいけるでしょう。

学習サイトを利用する

JavaScriptの勉強方法には、学習サイトを利用する方法もあります。ここからJavaScriptが学べるサイトのUdemy、Schoo、CODEPREP、Progate、ドットインストールについて、説明します。

1：Udemy

Udemyは、有料のプログラミング学習サイトです。JavaScript学習用のコースも用意されています。

JavaScriptの基本や概念から最新技術を使用したアプリ作成まで幅広く学べます。また内容に納得できない場合、どのコースでも30日間返金保証付なので安心して受講できます。

出典：JavaScriptのすべてのコース｜Udemy
参照：https://www.udemy.com/ja/topic/javascript/

2：Schoo

Schooも有料のプログラミング学習サイトで、JavaScript入門などの授業が開講されています。

基本的な入門講座のみならず、実践的なアプリ制作の講座やバグ修正方法の講座など幅広く用意されています。また、生放送の講座も無料で受けることができます。

3：CODEPREP

CODEPREPはプログラミング系の教本を無料で読むことができるサイトです。

全てのブックが無料で読めます。JavaScriptについても基本操作のブックやポップアップの作り方などの実践的なブックまで幅広く取り揃っています。

4：Progate

Progateは、学校や企業でも採用されているプログラミングオンライン学習サービスです。

JavaScriptについて何の知識もない方でも、本格的に学習するための必要な知識が得られます。また、JavaScriptの新バージョンであるES6と旧バージョンのES5両方に対応しています。今から勉強をはじめる方はES6を、旧バージョンを使用している方はES5を勉強しましょう。

5：ドットインストール

ドットインストールは、動画を見ながらプログラミングを学習できるサイトです。

無料で利用できます。はじめてJavaScriptの基本を学ぶ方のためのレッスンから実践的なタイピングゲームを作るためのレッスンなどまで用意されているため、幅広い段階の人におすすめできます。

システム エンジニア: JavaScriptについて様々な勉強方法があるのですね。

プロジェクト マネージャー: はい。JavaScriptについて勉強して理解を深めましょう。

JavaScriptのfor文を繰り返し処理に活用しよう

JavaScriptのfor文について解説しましたがいかがでしたでしょうか。まず、JavaScriptのforについて説明してから、forの基本文からforEachの3つのパラメータについて解説しました。

この記事を参考に、実際にJavaScriptのfor文のコードを書いて理解を深めてみてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptの基本的な書き方2つ｜できることや勉強方法についても紹介

JavaScriptでできること7選

1：画像拡大をしてくれる

2：Google マップをページに組み込める

3：アクセス分析サービスが利用できる

4：送信前の記入漏れをチェックしてくれる

5：メイン画像の画面スペースで多くの情報を伝える

6：マウスの動きでメニューの表示を制御できる

7：アプリの開発ができる

JavaScriptの基本的な書き方2つ

HTMLファイルとjsファイルを作成しHTMLを参照する

HTMLファイルの中で書く

JavaScriptのforとは？

1：for文の基本を知る

2：for文は省略ができる

3：二重ループができる

4：breakにはラベルを付けられる

5：continueを使う

6：continueにはラベルが付けられる

7：オブジェクトの中身を取り出せるfor～in文がある

8：for～inの注意点

9：出したくないものを出さない方法

10：for～of文を使う

11：配列を普通のfor文で扱う

12：forEachを使う

13：forEachには3つのパロメーターがある

javaJavaScriptの基本を勉強する方法2つ

本を利用する

学習サイトを利用する

1：Udemy

2：Schoo

3：CODEPREP

4：Progate

5：ドットインストール

JavaScriptのfor文を繰り返し処理に活用しよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptのライブラリ5選

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

jQueryのon loadとは？jQueryのon loadは適切に使おう！

JavaScriptのconstとは？varの使い方やvar・let・constを使わなかった場合を解説

JavaScriptのonloadについて解説します