【初心者向け】JavaScriptの学習 はじめの一歩

プログラミング言語JavaScript(ジャバスクリプト)とは何か、プログラミング学習の初心者の方を対象に説明します。

JavaScriptを覚えて、Webページに動きや対話性を付与することは楽しいことでもあります。ユーザ環境に配慮しつつ、上手にスクリプトを使ってみましょう。

新たなコンピューター言語を覚えることは大変なことです。特に初心者にとっては、初めて目にする言葉が続出します。

自分が新しいことにチャレンジすることは、それなりの情熱と覚悟を持って自分なりに努力することも大切なことです。

当記事はあくまでも参考程度でお読みいただければ幸いです。

JavaScriptの基本

JavaSriptとは

  • プログラミング言語(スクリプト言語)の一つ。
  • プログラミング言語Javaとは異なるもの。
  • 実行環境が主にブラウザに実装されている。
  • Webページ内で動的な機能を実現できる技術です。
  • JavaScriptは、現代のWebサービス開発には欠かせません。
  • Node.js(ノードジェイエス)のようなプラットフォームを使えば、サーバサイドの処理も書ける。
  • js(ジェイエス)と略されることがある。

JavaScriptは最も人気のプログラミング言語

私たちが毎日使うスマートフォンに最初からインストールされているプログラミング言語は何でしょうか。その答えは、JavaScriptです。JavaScriptは、スマートフォンだけではなく、タブレットやPC、ゲーム機などにも最初から入っています。

Webサイトの94.9%で使われていて世界で最も人気のあるプログラミング言語のひとつです。

プログラミングナレッジの共有サイト「StackOverflow」で、最も人気のテクノロジーに選ばれました。

Developer Survey Results2017

JavaScriptでできること

JavaScriptが最も活躍する場所といえば、やはりブラウザです。

  • Webページの再読み込みなしで新しいコンテンツを読み込み、サーバにデータを送信
  • Webページの要素のアニメーション、フェードイン・フェードアウト
  • フォーム入力値の動的なチェック
  • 画像のスライドショー
  • ボタンを押したら次の画像を出力
  • ボタンを押したらデータを計算する
  • メニューボタンを押したら滑らかに該当項目へ移動

JavaScriptを使うことで、上記のような処理が可能です。

但し、特定の動作や演出効果を出す命令をまとめたライブラリ(jQueryやBootstrapなどが代表的)が存在しています。こういったライブラリを使っての開発を行うことが多いです。

現在ではJavaScriptの活躍の場はブラウザだけではありません。

Node.jsによるサーバーサイドプログラミングやElectronによるデスクトップアプリ開発、Cordova、Reactnativeによるスマホアプリ開発まで幅広く活用できます。

まとめますと

  • Webサイト開発
  • Webアプリ開発
  • ゲーム開発
  • スマホアプリ開発

とても活用範囲の広い言語といえるでしょう。

JavaScriptの学習方法

JavaScript初心者の方のために、JavaScriptの学習に役立つ情報を紹介していきます。

ここで紹介するようなサービスで学んでいけば、独学でも確実にステップアップしていけるはずです。

興味本位でもいいので、とにかく始めてみましょう。

初心者の学習に役立つサイト一覧

MDN web doc/JavaScriptガイド (Mozilla)

https://developer.mozilla.org/ja/docs/Web/JavaScript

この JavaScript ガイドでは、 JavaScript の使い方を紹介し、この言語の概要を説明します。JavaScript の機能についてもっと知りたい場合は、 JavaScript リファレンス を参照してください。

JavaScript入門 – ドットインストール

https://dotinstall.com/lessons/basic_javascript_v2

3分動画でマスターできる、初心者向けプログラミング学習サイトで有名なドットインストールです。無料会員登録をすると、学習状況を管理できるので便利です。

解説はすべて動画ですので、JavaScriptがまったくわからないという超初心者に向いています。また、動画の教材なのでクライアントサイドでの挙動を確認しやすいです。

JavaScript Ⅰ・Progate

https://prog-8.com/languages/es6

Progateのコースは基礎から実践まで全てオンライン。初心者も独学で学べるレッスンで、未経験者の教育に最適です。JavaScript Ⅰのコース(ES6)がオススメです。

JavaScript入門編1・paizaラーニング

https://paiza.jp/works/js/primer/beginner-js1

paiza会員 になると、 受講状況、進捗度の表示、提出コードの保存、バッジの取得が出来ます動画エリアには 各チャプター約3分の動画 が配置されています。

コードエリアでは自由にコードの記述、実行が可能です。 動画の内容を実際に試してみましょう。

JavaScript入門 – パズルネット智慧

http://www.pori2.net/js/

当サイトでは主に「初めてJavaScriptを触る人」を対象にしています。 JavaScriptの基本と、簡単なソースを解説していきます。 ここで書かれてあることをマスターしたなら、 後は色々なサイトでレベルを磨いていってください。

なお、HTMLの基礎はできていることを前提としています。



書籍などで体系的に学習する

学習方法は様々なものがありますが、体系的にまとまっている本を利用すると、どのように学習していけばいいかの道筋がわかるので、日々の学習の方向性がより正しいものになります。

入門書を中心にオススメの書籍をご紹介します。

確かな力が身につくJavaScript「超」入門

出版社: SBクリエイティブ (2015/10/30)

Amazonリンク

JavaScriptをこれから始める人にも、前に挫折したことのある人にも。
手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、
現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます。

入門者のJavascript

出版社: 講談社 (2014/1/21)

Amazon

本書では、1つ1つ作例を作り、動かしながらJavaScriptの基本を少しずつ学んでいきます。
手順通りにやるだけで、HTMLやCSSの未経験者でもJavaScriptの使い方が必ずマスターできます。

改訂新版JavaScript本格入門

出版社: 技術評論社; 改訂新版 (2016/9/30)

Amazonリンク

ECMAScript2015によって、いっそう安全で便利な言語へと進化をつづけるJavaScriptのプログラミングスタイルを基礎から解説されています。

ライブラリを使ってみる

他の言語と同じく、JavaScriptにもたくさんのライブラリが存在しています。ライブラリを巧みに使うことで、開発効率やスピードは飛躍的に向上します。

ライブラリを使わずにプログラミングすることはほとんどないため、主要なライブラリの使い方を学んでおくとよいでしょう。

初心者の方は、まず「jQuery」を使ってみましょう。
下記の公式ページからjQueryをダウンロードして、あなたのファイルよりも先に読み込ませれば使えます。CDNを参照するのもよいでしょう。

jQueryhttps://jquery.com/

フレームワークを学習する

フレームワークはライブラリの集合体のようなもので、フレームワークに従ってプログラミングすることで、高度なプログラムを少ない手間で構築できます。
代表的なフレームワークはAngular.js」や「React.js」、「Backbone.jsでしょう。

中でも入門者でもはじめられる「vue.js」は最近注目を集めているフレームワークです。シンプルで軽く、オススメです。

それぞれ用途や特色が異なりますので、いろいろなフレームワークを試してみて、感触をつかんでおきましょう。



サイトを構築してみる

最後に、好きなライブラリやフレームワークを使ってサンプルサイトを構築してみましょう。
プログラミング入門者は、まずjQueryを使ってWEBページの画面をリッチにしてみると、JavaScriptライブラリを使うことが楽しくなるでしょう。

面白いサイトが作れたら、ウェブサーバーで公開してみるのもアリでしょう。
現在では月数百円のレンタルーサーバーがありますので、気軽にウェブサーバーを構築できます。学習の最終段階として試してみてはいかがでしょうか?

JavaScriptを始めよう

JavaScriptを始めるのに、必要なものはJavaScriptを実行できるWebブラウザとプログラム編集のためのテキストエディタだけです。JavaScriptを実行することができるWebブラウザとして代表的なものに、Google ChromeとMozilla Firefoxがあります。

Webブラウザさえあれば、JavaScriptを実行できますが、どのようにJavaScriptを実行したら良いでしょうか。PCであれば、JavaScriptコンソールを起動して、その中でJavaScriptを動かすことができます。

Google Chromeの場合

PC版のGoogle Chromeであれば、Webブラウザを起動したら、画面右上のポップアップメニューから[その他のツール > デベロッパーツール]をクリックします。

すると、デベロッパーツールが起動するので、ツールの上部にある[Console]をクリックします。(またはブラウザの表示領域で右クリック > 検証をクリック)

すると、JavaScriptコンソールが表示されます。「>」と書かれた部分にJavaScriptのプログラムを書くことで、プログラムを実行できます。例えば

> a=100
<100
> alert(a+a)

すると’200’とアラートのダイアログボックスが表示されます。

「alert」はアラートを表示するJavaScriptの関数です。

もちろん、文字列も使えます。

> s=”Hello”
< “Hello”
> alert(s)

これで「Hello」が表示されます。

Mozilla Firefoxの場合

Firefoxに搭載された開発ツールが2つあります。Webコンソールとスクラッチパッドです。

Webコンソール

Webコンソールを開くには、ツールメニューにあるWeb開発から「Webコンソール」(ショートカットキーはCtrl+Shift+K)を選びます。現在のWebページについての情報をを表示すると共に一行のコマンドのJavaScriptを実行できます。

スクラッチパッド

スクラッチパッドを開くには、ツールメニューにあるWeb開発から「スクラッチパッド」(ショートカットキーはShift+F4)を選びます。別のウィンドウが表示されますが、これはブラウザ内でJavaScriptを書いて実行できるエディタになっています。スクリプトの保存と読み込みもできます。

どうか、いろいろお試しください。



まとめ

JavaScriptの大まかな説明とその使い道、フレームワークなどについて解説しました。説明だけではなんとも言えないと思うので、ぜひ一度コードを書いてみることをおすすめします。

使い古した言葉ですが、「習うより慣れろ」です。便利で何にでも使うことができる言語なので、ぜひがんばって習得してみてはいかがでしょうか。

今回のJavaScriptはスクリプト言語でした。他のスクリプト言語(Python、Ruby、Perl)とは見かけは異なりますが、相互に影響しあって発展してきました。従って1つのスクリプト言語をある程度マスターすれば、他の言語のマスターは容易になります。

JavaScriptは他のスクリプト言語に比べて、入門者にはちょっと難しいかもしれません。なぜなら、HTML/CSSの知識がないと、なかなか使いこなせないからです。

HTML/CSSを学んだ後にJavaScriptを学習する方は多いのでしょう。ここからは一気に難易度が上がる言語になってきます。「独学では難しいかな?」と感じたらプログラミングスクールの無料体験を受けてみてはいかがでしょうか?

シェアする

  • このエントリーをはてなブックマークに追加