.NET開発者のためのブログメディア
JavaScriptの基本的な書き方2つ｜できることや勉強方法についても紹介
目次
JavaScriptでできること7選
はじめに、JavaScriptでできることを7つ紹介します。画像の拡大、Googleマップの組み込み、アクセス分析サービス、送信前の記入漏れチェック、メイン画像の画面スペースで多くの情報を伝えること、マウスの動きでメニューの表示を制御できること、アプリの開発ができることについて、説明します。
1：画像拡大をしてくれる
JavaScriptで画像の拡大が可能です。
画像の拡大をしたい場合は、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キーを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
[取得したAPIキー]の部分にGoogle Map APIのAPIキーを指定します。
3：アクセス分析サービスが利用できる
JavaScriptで、Google Anyliticsなどのアクセス分析サービスの解析用タグを埋め込めます。基本的にWebページ内に指定されたタグを記述するだけで解析できるので、とてもお手軽です。
また、Webページへの1日のアクセス回数やその層などを分析することで今後どのようにWebサイトを作りこんでいけば良いか戦略を立てるための材料になります。例えば、
|
1 2 3 4 5 6 7 8 |
(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」というファイルを格納している場合、
|
1 |
<script src="Sample.js"</script> |
を記述することでJavaScriptが参照されます。基本的にbodyタグの途中で記載が入ることは少なく、bodyタグの直前か最後の部分に記述されることが多いでしょう。
こうすることでHTMLファイルの記述が減り、簡潔でコードが読みやすくなります。
HTMLファイルの中で書く
HTMLファイルの中に直接書き込むことでもJavaScriptを使用できます。直接書く場合は<script>から</script>の間にJavaScriptを記載します。
また、HTML5とHTML4以前とで記載内容に違いがあり、HTML5では<script>にtype属性を書く必要がなくなっています。
JavaScriptのforとは？
JavaScriptで同じような処理を何度も繰り返したい時はどうすれば良いのでしょうか。10回行うとして、同じ内容を10回記述するのは効率が悪いものです。そんな時はfor文を使えば解決します。
for文はJavaScriptに限らず多くの言語にある機能ですが、JavaScriptならではのルールもあります。この記事では基本から応用まで詳しく紹介するのでぜひご覧ください。
1：for文の基本を知る
JavaScriptのfor文は以下のように記述します。
|
1 2 3 |
for (var i = 0; i < 3; i++) { alert (i); } |
これを実行すると、alertによるポップアップウィンドウが3回出て来て、それぞれには0・1・2と表示されています。for文によって繰り返し処理が実行されたのです。
for文の文法は以下の通りです。
|
1 2 3 |
for (初期化処理; 繰り返す条件式; 変数の加減処理) { 繰り返し処理 } |
これを上のサンプルに当てはめると、変数iを0で初期化し、iが3よりも少ない間、i++によりiを1ずつ加算しながら繰り返すというfor文になります。
2：for文は省略ができる
for文の初期化処理・条件式・加減処理はそれぞれ省略が可能です。例えば、
|
1 2 3 4 |
var i = 0; for (; i < 3; i++) { alert (i); } |
は同じ結果になります。また、
|
1 2 3 4 |
var i = 0; for (; i < 3;) { alert (i++); } |
もやはり同じ結果になります。そして、
|
1 2 3 4 5 |
var i = 0; for (;;) { alert (i); if (++i >= 3) break; // iが3以上の場合はbreakで抜ける } |
も同じ結果です。条件式がない場合はずっと終わらず、無限ループになります。breakというキーワードがありますが、これを実行するとforループから抜けることができます。breakで抜けないとループがずっと終わらないので注意しましょう。
3：二重ループができる
for文は二重ループも可能です。以下のJavaScriptサンプルをご覧ください。
|
1 2 3 4 5 |
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を追加してみましょう。
|
1 2 3 4 5 6 |
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にラベルを付けます。
|
1 2 3 4 5 6 |
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があります。これは以下のように使用します。
|
1 2 3 4 |
for (var i = 0; i < 3; i++) { if (i == 1) continue; alert (i); } |
実行すると、0と2が表示されて終わります。1がスキップされました。そのように、continue処理をスキップする機能があります。forループでcontinueが呼ばれると、ループのそれ以後の処理が飛ばされて次のループに移るのです。
6：continueにはラベルが付けられる
continueにもbreakと同様にラベルを付けられます。以下のJavaScriptサンプルをご覧ください。
|
1 2 3 4 5 6 |
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文があります。以下がそのサンプルです。
|
1 2 3 4 5 6 7 8 9 |
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行を追加してみましょう。
|
1 |
Object.prototype.func = function() {}; |
実行すると、humanのプロパティの中身を表示した後に「func function() {}」が出てきます。オブジェクトを拡張してfuncと言うメソッドを追加したことで、それまで表示されてしまうのです。しかしこれは意図した動作でないことも多いでしょう。
9：出したくないものを出さない方法
上の問題を解消するには、オブジェクトのhasOwnPropertyメソッドを使用すると良いでしょう。サンプルのfor～inの箇所を以下のように直してください。
|
1 2 3 4 5 |
for (var key in human) { if(human.hasOwnProperty(key)) { alert(key + ' ' + human[key]); } } |
これでkeyで指定されたプロパティのみが表示されるので、funcは出て来なくなります。
10：for～of文を使う
次はfor～of文を解説します。以下のJavaScriptサンプルを実行してみてください。
|
1 2 3 4 5 |
var ary = ['太郎', '次郎', '花子']; for(var value of ary) { alert(value); } |
実行すると太郎・次郎・花子と3つのポップアップが表示されます。for～ofはこのように配列の各要素に処理を行いたい時に使うことができます。ただしfor～inのようにオブジェクトには使用できません。
11：配列を普通のfor文で扱う
for～ofを使わずに普通のfor文で配列の全要素に対して処理を行う場合は、以下のようにします。
|
1 2 3 4 5 |
var ary = ['太郎', '次郎', '花子']; for(var i = 0; i < ary.length; i++) { alert(ary[i]); } |
配列の長さは「配列変数.length」で取得できます。これで上のfor～ofを使ったサンプルと同じことができます。このやり方の方が他のプログラム言語と近いのでしっくり来る人も多いでしょう。
12：forEachを使う
最後はforEachを解説します。これもfor～ofと同じく配列で使用できるのですが、使い方が違います。
|
1 2 3 4 5 |
var ary = ['太郎', '次郎', '花子']; ary.forEach(function(value) { alert(value); }); |
forEachは配列変数のメソッドとして提供されています。コールバック関数を登録することで、配列の全要素に対して処理ができます。なおforEachではbreakやcontinueは使用できません。
13：forEachには3つのパロメーターがある
forEachのコールバック関数では3つのパラメータを利用できます。
|
1 |
function( value, index, array ) |
valueが要素の値、indexが要素の番号、arrayが対象の配列です。以下はindexを使用しています。
|
1 2 3 4 5 |
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のfor文を繰り返し処理に活用しよう
JavaScriptのfor文について解説しましたがいかがでしたでしょうか。まず、JavaScriptのforについて説明してから、forの基本文からforEachの3つのパラメータについて解説しました。
この記事を参考に、実際にJavaScriptのfor文のコードを書いて理解を深めてみてください。
