• 更新日: 2017年06月12日

基礎から抑える！初心者のためのJavaScript入門

基礎から抑える！初心者のためのJavaScript入門

WEBページ制作を行う上で欠かせないのが、JavaScriptの存在。初心者の方にとっては「少し敷居が高い」というイメージがあるかもしれません」。

しかし、ご心配なく！実はJavaScriptはシンプルで、基礎は他のプログラミング言語とあまり変わりません。今回はそんなJavaScriptを概要からおすすめ書籍、学習サイトまでを解説していきます。

目次
  1. JavaScriptとは
  2. JavaScriptの特徴
  3. JavascriptとjQueryの違いとは？
  4. HTMLとJavaScriptの関係
  5. JavaScriptはこんな人におすすめ
  6. フロントエンドエンジニアを目指す人
  7. デザイナーを目指す人
  8. JavaScriptでのコメントの表記方法
  9. 簡単なJavaScriptを打ってみよう！
  10. JavaScriptの基礎を覚えよう
  11. 変数とは
  12. 変数の宣言と代入
  13. 変数名の書き方と使い方
  14. 演算子とは
  15. 様々な演算子
  16. 配列とは　
  17. jQuery
  18. jQueryとは
  19. よく使われる例
  20. jQueryとプラグイン
  21. JavaScriptをはじめよう！
  22. 入門者におすすめの本
  23. 入門者にオススメの無料講座
  24. JavaScriptのスーパーテクニックを拝見する
  25. MacでJavaScriptを使う場合
  26. まとめ

JavaScriptとは

JavaScriptの特徴

JavaScriptは200種類以上あるプログラミング言語の一種で、Webページに様々な機能を付加する事ができます。例えば[ボタンクリック][マウスオーバー]のようなユーザの動きに応じたWebページ機能を作れるのは、JavaScriptならではでしょう。

しかしその反面、セキュリティが甘いなどのデメリットもあります。HTMLやCSSのソースコードがブラウザの「ソースコード表示」などから閲覧できるように、JavaScriptのコードも同じく閲覧することができてしまうのです。なので、ユーザ認証機能のような具体的な処理内容が見られたら困るものはJavaScriptで実装しないようにします。

20150927_6a

JavascriptとjQueryの違いとは？

JavascriptとjQueryはセットで学ぶことが多いのですが、違いを理解しないまま学習を進める人が多いようなので解説しておきましょう。

wikpediaによると以下のように書かれています。

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。 ... 様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。 wikpedia

つまり「Javascriptを少ない記述で書ける」ようにするのがjQueryだということ。jQueryで実現できることはJavascriptでも実現が可能です。

詳しくはこちらをご覧ください。 jQueryとは？基礎知識について徹底まとめ

HTMLとJavaScriptの関係

一つのWebページを作る上で、HTMLとJavaScript、それからCSSには密接な関係があります。 それぞれの役目を確認して、各言語の関係を把握しておきましょう。

■HTML■
文字や画像、動画、リンクの設定
言語の開発管理：W3C

■CSS■
ページ全体のレイアウト、文字や画像、動画の装飾など
言語の開発管理：W3C

■JavaScript■
文字や画像を動かしたり、閲覧者数などの統計を取ったりする自動計算に
言語の開発管理：ECMAScript

これらの関係を”ドア”に例えてみると分かりやすいかもしれません。 HTMLはドアの板で、CSSは取っ手や材質などの装飾、JavaScriptは蝶番やバンパーのような可動部分 、それでドア全体をWebページ、こうするとなんとなくイメージ頂けるのではないでしょうか？

JavaScriptはこんな人におすすめ

プログラミング言語は多く、学ぶ言語を迷ってしまいますよね。そこで、こんな人にjavascriptはオススメだというパターンを2種類用意しました！

もしココに当てはまるようならjavascriptを学ぶと自分のやりたいことができるかもしれませんよ。

フロントエンドエンジニアを目指す人

image

1つはこれからエンジニア（フロントエンドエンジニア）を目指す人です。フロントエンドとはWebブラウザ側（クライアント側）のことをいいます。簡単に言ってしまえば今あなたが見ているこの記事もフロントエンドです。

javascriptはHTML/CSSの操作を「動的」に行うことが可能なので、これからフロントエンドエンジニアになりたい人、キャリアアップしたい人にオススメ。

自社サイトやアプリの利便性向上のために、ボタンやメニューに機能を付けることが可能です。

デザイナーを目指す人

image もう1つはデザイナーを目指す人にオススメ。

自社のWebサイト運営の際に、適切な位置に適切な効果を施し、ユーザーの心理的負担を軽減することができます。

Webサイトの目立たせたい所に「アニメーション」や「複数枚の画像スライドして表示する」などの効果も追加することができるので、ユーザーの利便性を上げることができます。

Webサイトのユーザーの利便性を上げることは非常に大事なので、デザイナーの方でjavascriptがかけると非常に役立つでしょう。

JavaScriptでのコメントの表記方法

JavaScriptでのコメントは「//」(二重スラッシュ)から始まるものと, - 「/」(スラッシュ・アスタリスク) - 「/」(アスタリスク・スラッシュ)
で囲む2種類があります。

<script>
    // 1行用のコメントはこのように書きます。
</script>

<script>
    /*
　　複数行のコメントはこちら。
　　間にある内容がコメントになります。
    */
</script>

簡単なJavaScriptを打ってみよう！

では実際にJavaScriptを打ってみましょう！まずはテキストエディタを開いて下記のソースコードを打ってみましょう。打てたらファイル名を「hello.html」とし、保存です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>課題</title>
</head>
<body>
    <script>
        document.write('Hello World');
    </script>
</body>
</html>

保存できたらhtmlファイルを開きましょう。ブラウザが起動して「Hello World」の文字が見えれば成功です！ 20150927_7

JavaScriptの基礎を覚えよう

JavaScriptの基礎は他のプログラミング言語とほぼ共通なので、変数や演算子などの基礎的な事を覚えれば他にも応用が効きますよ！

変数とは

変数とはデータを入れる箱のようなものです。この箱はさまざまなデータの出し入れに使用します。20150927_8

変数の宣言と代入

JavaScriptの変数は、利用する前に宣言をする必要があります。宣言方法はvarの後ろに半角スペースを挟んで変数の名前を書く、です。


// 変数intを定義
var int;

代入は右辺に代入したい値を「＝」を付けて書きます。これで変数の中に値「８」がセットされます。


// 変数intに値を代入
int = 8;

もちろん、宣言と代入を同時に行う事もできます。より効率的に書くならこちらの方が良いですね。


// 変数intを定義し値を代入
var int = 8;

そして変数を使う時は変数名を直接書きます。こうすると変数の中身を参照する事ができ、例えば同じページでいくつも同じ値を使いたい時に便利です。もし値の中身が書き換えないといけない場合、変数を使っていなければ全部の箇所を書き換えないといけないですものね。できればやりたくないこの作業を変数が肩代わりしてくれます。


// 変数の内容を表示
document.write(int); //8と表示される

変数名の書き方と使い方

JavaScriptにおける変数の書き方は下記の通りで、変数には好きな名前をつける事ができますが「何の為の変数なのかぱっと見てわかる名前」にするのが良いでしょう。

  • var宣言を行う
  • 名前に利用できるのは英数字か_(アンダースコア)、$(ドル)で数字が使えるのは2文字目以降
  • あらかじめJavaScriptで予約されている名称（予約語）は名前に利用できない(※1)- データ型宣言は必要ない
  • 変数名が長くなる場合、単語の区切りとして_(アンダースコア)を入れるか単語の始めのみ大文字にする(※2)

※1　予約語例：if、for、float、class、new、true、var

※2　_(アンダースコア)を入れた場合は蛇がにょろにょろしてるように見えるので「スネークケース」、単語の始めのみ大文字はラクダのコブのように見えるので「キャメルケース」と呼ばれています。

var test_print; // スネークケース
var testPrint;  // キャメルケース

演算子とは

算数で足し算のときには+(プラス)、引き算のときには-(マイナス)など、記号を使って演算していたと思いますが、このような演算内容を指示する記号のことを演算子と呼びます。ちなみに演算子の考え方も、他のプログラミング言語とほとんど変わりません。

様々な演算子

算術演算子

+(加算)、-(減算)、*(乗算)、/(除算)、%(剰余)があり、計算に利用します。算数と同じ感覚で使って貰えればOKですよ！

Point:剰余計算の使い所は？

偶数奇数の判定や3の倍数を特定する時に使います。偶数奇数判定は例えば動的に表を作る場合などで奇数列にだけ背景色をつけたい…という場合に役立ちますよ！20150927_5

Point:「＋」は文字列結合にも使われる

文字と文字や文字と変数を結合したい場合にも使用します。同じ記号を使うので混乱しがちですが、やってくれる事は全く別と覚えておきましょう。


    var price = 100;
    var tax = 8;

    // 算術演算子として利用している例
    document.write(price + tax); //「108」と表示される

    // 文字列結合として利用している例
    document.write('合計金額は' + price + '円です。'); //「合計金額は100円です」と表示される

代入演算子

「=」は代入演算子と呼ばれ、「=」の右側にある値を「=」の左側に書かれた名前の変数に代入します。

インクリメント演算子とデクリメント演算子

++(インクリメント)は変数の値を１つ増やし、(デクリメント)は変数の値を１つ減らします。インクリメント演算子は加算子、デクリメント演算子は減算子とも呼びます。

比較演算子

数値や変数を比較するときに用い、条件が成立した際はtrue、成立しない場合はfalseとなります。

20150927_4

論理演算子

AND、OR、NOTなど、条件を複数組み合わせたり否定したりするときに使う演算子となります。

20150927_3

配列とは　

さきほど、変数はデータを入れる箱のようなものと例えましたが、配列はその箱をたくさん入れることのできる大きい箱、と例えると分かりやすいかもしれません。

下記に配列のイメージと実際のJavaScriptコードをご紹介します。
■配列のイメージ■ image

■配列のサンプルコード■
（ファイル名： js-arrays.html）

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>配列</title>
</head>
<body>
   <script>
       // 配列宣言　fruitsという大きい箱
       var fruits = new Array();
       
    //小さい箱の宣言 fruits[0]にはapple、fruits[1]にはgrapeなど
       fruits[0] = 'apple';
       fruits[1] = 'grape';
       fruits[2] = 'melon';
       
    //箱に対する命令（文字の出力）
       document.write(fruits[0]);
       document.write(fruits[1]);
       document.write(fruits[2]);
   </script>
</body>
</html>

■結果■ image

このように、配列とは複数の箱を1つにまとめて扱うことができるようになります。

■配列が使われる事例■
配列で、大きい箱に小さい箱を入れることができることは分かりましたが、「で、なんなの？」と思う方もいらっしゃると思います。

配列が利用される実例としては、Webショッピングなどの商品管理にあります。 配列を使って商品データを管理すれば、消費税が変わった時の価格表示や値引きセールなども直ぐに対応できます。

ここまで変数や演算、配列といったJavaScriptの基本文法をいくつかご紹介させて頂きました。次は、実際のWeb開発現場でよく使われるjQueryというツールについてご紹介したいと思います。

jQuery

image

画像出典：jQuery

jQueryとは

jQuery（ジェイクエリー）は、Web用のJavaScriptコードを簡単に記述できるようにしたオープンソースのツール（ライブラリ）になります。 HTMLとCSSの知識があれば、誰でもすぐに利用できる特徴があります。

例えば、JavaScriptを使って背景色を変える場合、以下のようなコードになります。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://bitcoin-with.com/codecamp/javascript/style.css">
<script>
function changeBackground(color) {
   document.body.style.background = color;
}
</script>
</head>
<body onload="changeBackground('red');">
JavaScriptで背景色を変更
</body>
</html>

jQueryを使うとJavaScriptのコード量が省略されて、HTMLコードもすっきりします。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://bitcoin-with.com/codecamp/javascript/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("body").css("background", "blue");
});
</script>
</head>
<body>
jQueryで背景色を変更
</body>
</html>

今回は背景色の変更という簡単な命令でしたが、画像に動きをつけたり、動きのあるグラフを制作するなど複雑な命令にはjQueryが便利に働いてくれます。

よく使われる例

Webやアプリでよく使われているjQueryの機能をいくつかご紹介します。

画像や動画の拡大表示
HTMLだけで画像を表示する場合は、決まったサイズ（600px × 600pxなど）でページ内に表示するか画像データのリンクを貼って大きい画像を表示する、という2種類の選択になります。 ところがjQueryを使うとリンク先に飛ばなくても、同一画面内に大きい画像を表示することができるようになります。 ショッピングサイトや写真紹介など、たくさんの画像を掲載する場合に役立ってくれます。

参考／http://sorgalla.com/lity/

グリッドデザインに
スマホ対応のWebサイトの中には、グリッドデザインというレイアウトを採用しているものもあります。 通常ページのレイアウトはCSSで組みますが、jQueryを使って簡単に済ます、という手段もあります。

参考／http://kombai.github.io/freewall/

動きのあるチャートに
進捗などを表現する管理アプリやポイントサービスなどでよくみる「動くチャート」。 こちらも一からプログラムを組むとなると大変ですが、jQueryを使うと簡単にモダンデザインのチャートを利用することができるようになります。

参考／https://kimmobrunfeldt.github.io/progressbar.js/

jQueryとプラグイン

先ほどご紹介したjQueryの機能は、実は jQuery + プラグイン で動いています。 jQueryというベースの上に、プラグインという道具がのって、はじめて動きます。

現在jQuery用プラグインは、2500以上公開されており、jQueryの公式サイト*から用途別に確認することができます。 中には有料のプラグインもありますが、有志による無料もたくさんあります。

より詳しくjQueryについて知りたい方は、以下の記事を参考にしてみて下さい。

WEBサイトに動きをつけたい方必見！jQuery入門講座

jQueryとは？基礎知識について徹底まとめ


JavaScriptをはじめよう！

image

入門者におすすめの本

今回は変数や演算、配列といったJavaScriptの基本的なことをお伝えさせて頂きましたが、「もっと体系的に学びたい」という方もいらっしゃると思います。 JavaScript初心者向けの参考書をいくつかご紹介させて頂きます。

  • いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門
    HTMLやCSSをちょっと知っているなら、この本をオススメします。JavaScriptの基本的なことを理解し、体験することができます。
    Amazonへ（SAMPLEコード）

  • 3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス)
    2010年出版の本になりますが、『【神本】日本国内で出版した「JavaScript入門書」全ての頂点に君臨する伝説の入門書』と言われるほどナイスな本になります。サンプル・コードもシンプルで分かりやすいですね。
    Amazonへ（SAMPLEコード、目次）

  • スラスラわかるJavaScript
    JavaScript以前にWebとかHTMLとかよく分からないし、という方にオススメの一冊になります。レビューによると「読みやすい」「イラストが多くて分かりやすい」と好評です。
    Amazonへ（SAMPLEコード）

入門者にオススメの無料講座

「今すぐにJavaScriptはじめたい」、そんなワガママもオンラインの無料講座で解決できます。代表的なオンライン無料講座をご紹介させて頂きます。

  • ドットインストール
    JavaScriptの基本文法からサンプルゲームのチュートリアルまで、たくさんの講座が登録されています。

月額料金(¥980)のプレミアムプランに加入すると動画の文字起こしやソースコードが閲覧可能です。

  • Schoo
    SchooにもJavaScriptの講座は多数登録されていて、自分にあった先生の講座を受けることができます。

過去の生放送授業の録画は月額料金(¥980〜)の有料プランに加入すると閲覧が可能です。

  • UDACITY
    英語ベースのサイトにはなりますが、半分のレッスンは日本語化され、もう半分はYouTubeの自動翻訳でレッスンを理解することができます。実際にJavaScriptを使ってプロフィールページを作成したり、ブラウザのJavaScriptエラー機能を学ぶことができます。一見の価値ありです！

JavaScriptのスーパーテクニックを拝見する

コツコツ JavaScriptを勉強するのもいいですが、「こんなのできたらええなぁ」と思うような夢を見ることも必要でしょう。参考となるJavaScriptのスーパーテクニックを集めたサイトをご紹介します。

  • AWWWARDS - jQuery
    世界中のWebデザイナーが参考にするAWWWARDSのjQuery（JavaScript用ソフト）特集ページでJavaScriptのスーパーテクニックを拝見できます。

  • CODEPEN - JavaScript
    こちらは投稿型プログラミングお披露目サイトで、「えっ、JavaScriptでこんなこともできるの？」と、多くの方がJavaScriptのスーパーテクニックに感動すると思います。コードもダウンロードできますので、自分なりにアレンジできますね。

  • JS13KGAMES
    こちらはJavaScriptを使ったゲームコンテストのサイトになります。 過去の作品を見ても、「すごい」の一言です。
    アプリ指向でJavaScriptを検討している方は必見ですね。各作品は、GitHubでコードも見れます。

MacでJavaScriptを使う場合

ご存知の方もいらっしゃるかもしれませんが、Mac PCはJavaScriptを使って様々なアプリケーションを自動化することができます。 例えば、定型文のメールを送りたい時は、下記のようなコードをスクリプトエディタに書いて起動すると、アプリが自動で立ち上がります。

image

また標準のテキストエディットからもJavaScriptは記述できますが、ちょっと設定を変更する必要があります。

■MacのテキストエディットからJavaScriptを書くための設定■

  1. ツールバーのフォーマットをクリックし、標準テキストにするをクリックします。 image
  2. ファイルを保存する際に、ファイル名を英語、拡張子を.htmlとします。
    （例：js_demo.html）
  3. 保存したファイルをダブルクリックするとSafariが起動し、HTMLコードとJavaScriptコードが読み込まれ、結果が表示されます。 image

このように標準の状態でもJavaScriptは書けますが、編集やエラーチェックなど作業効率を考えるとオススメできません。 AtomやSublime Textなど使いやすいエディタを使って、コーディングすることをオススメします。

今注目のテキストエディタ「Atom」の使い方と便利機能まとめ

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

まとめ

今回はJavaScriptの基礎をご紹介しましたが、いかがでしたか？上記のレッスン内容はCodeCampの教科書でも紹介されており、CodeCampではこういった基礎からしっかり進めていくうえ、わからない所は気軽に講師に聞けるので初心者の方も安心して学習を進めて頂けます。

無料体験レッスンではCodeCampのレッスンを無料でご受講頂けますので、ぜひ一度ご受講されてみてください！

 

プログラミング初心者の方にはこちらも人気です！

編集部オススメの今話題の記事はこちら！

オシママサラ
この記事を書いた人
オシママサラ

人気記事

  1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    プログラミング学習
    プログラミングスクール・サービス
  2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    受講生インタビュー
  3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    講師インタビュー
  4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    Python
    プログラミング書籍・参考書
  5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
    【PHP入門徹底ガイド】初心者のための学習ロードマップ
    PHP
    プログラミング入門
  6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    Python
    HTML
    CSS
    お役立ち情報
    アプリ学習入門
  7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
    【Twitter×Python】自分専用のエゴサーチボットを作る方法
    Python
  8. Webデザインから見たSEO
    Webデザインから見たSEO
    Webデザイン入門
    Webデザインお役立ち情報
  9. 未経験からのWebデザイナー転職を有利にする資格４選
    未経験からのWebデザイナー転職を有利にする資格４選
    Webデザインお役立ち情報
    転職
まずは7日間お試し！人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp
プログラミング講座を無料で試す