1日で習得する JavaScript 入門 研修コースに参加してみた

Learning Topics 編集部

今回参加したコースは 1 日で習得する JavaScript 入門 です。

Modern JavaScript -開発環境編 コースでは最新の環境を触りましたが、今回は1日で基礎から学ぶ内容です。

最近のBFFなどフロントに比重が置かれたアーキテクチャ、SPAなどリッチなアプリケーションの開発の隆盛を受けたのか、1日間のコースでも満員でした!!

参加してみると、従来のイメージにあるような Web ページに動きをつけるだけの JavaScript だけでなく、JavaScript の適用範囲が広がり大規模開発でも使えるようなエコシステムを備えるようになったため、基礎から学ぶと言っても、とっっっってもボリューミーでした。

普段はバックエンドや API を書いているエンジニアの方が、フロントを触り始めるにはちょうど良い難易度でした。

では、どんな内容だったのかレポートします !!

コース情報

講師紹介

自己紹介をまったく行わないスタイルの 米山 学さん が登壇され、まずは今日やることを紹介いただきました。

米山 学

現場で困らないよう、一次情報にこだわったコンテンツと “動かして学ぶ” ことにこだわる人気トレーナー。
Java はもちろん、 Python やモダン JavaScript、 AI など最新テクノロジにも対応

• JavaScriptは範囲が広く、奥が深いので1日で習得はできない
• 今日を取っ掛かりにして学習を継続してほしい

また、教室で確認すると、はじめてJSを触るという人もいらっしゃったので、基礎的な内容からスタートしました。

JavaScript のこれまで

• 1995 年に NetScape Navigator (当時有償) というブラウザソフトで動くプログラミング言語として開発された
• 10 日間で開発された (!? やっつけ??)
  • 結構品質の評価は厳しかった
  • 当時の開発者からは “おもちゃ” という感覚
• 今はもっとも人気があって、普及している
• 今はもうブラウザだけで動くプログラミング言語ではない
  • サーバーやデスクトップでも動くようになった

Java との関係

• なーーーーーーーーーーーーーんも無い
• Java の開発主体だったサン・マイクロシステムズと NetScape 社が仲良くしていて、「 Java という名前を使ってよいよ」という許諾を得て、 JavaScript になった (!!)

JavaScript の暗黒時代

• 開発者から “おもちゃ” という低評価だったこと
• プラスして、 NetScape 以外のブラウザソフト開発会社が JS を実行できるエンジンを次々と開発
  • 結果、ブラウザ間の互換性が壊れた
  • その他 HTML や CSS 標準仕様を追加拡張しはじめた
  • セキュリティ上の問題も浮上
    • XSS, CSRF など
• 結果、どんどん使われなくなった

モダン時代

• 2004年～2005年ぐらいから Google や Yahoo!! などインターネットの巨人たちが Ajax など JS を使ってリッチに表現できる技術を開発
  • Ajax
    • もともとリクエストとレスポンスは 1:1 でやると http で決められている
    • リクエスト/レスポンスがあるたびに画面全体を書き換える
    • ユーザーの動作とは別に JS が先にリクエストを出してレスポンスを取得しておく
    • Google Map は先読みしながらレスポンスを取得している
    • その他の Ajax の活用例: インクリメンタルサーチ
      • 例えば検索窓で入力し始めたら JS がリクエストを飛ばして変換予測候補を出している
  • ブラウザの JS 実行エンジンが早くなった
    • Chrome の V8
  • jQuery
    • かつて世界で最も人気のある1万サイトが70%を使っていた
    • 最近はオワコン。。
    • Angular ( google )，React ( Facebook ), Vue (元 Google の人が開発) が主軸に
• HTML5 の登場
  • ただコンテンツを表示する訳ではなく、 JS の API をいっぱい用意した
• Node.js が登場
  • V8 を拡張してサーバーでも動く JS が登場
• EcmaScript6 ( ES 6 ) で標準化と進化が進む
  • なお、ES 6 以前とは まったく違うので注意
  • いまある JS コードは ES 6 以前なので、開発するときに注意

“ネスケ” で通じてしまう年代ですが、そもそも JS の開発期間が 10 日間とは驚きです。

また弊社は、 JS の暗黒時代に e ラーニングをスタートしていたので、 OS や IE のバージョン指定がかなり厳しかったことを思い出しました。確かに互換性が無くてツライ状況でしたが、ターゲットとなるブラウザを決め打ちできたので、牧歌的な時代だったのかも知れません。

そういえば、 SEカレッジでも jQuery 登場にあわせて、コースを多数展開したことがありました。jQuery UI 懐かしい。

補足:ライブラリとフレームワークの違い

• Library
  • 部品の集合。部品そのものは Compornent 。
  • 必要なときに使う
  • 自分のアプリケーションがライブラリを呼び出して使う
  • 自由度が高い
  • 反面、自分で考える範囲が多くなる
• Framework
  • 土台、枠組み
  • フレームワークから自分のアプリケーションが呼ばれる
  • あまり考えなくてよい
  • 反面、自由度が低い
  • 自分で書かなくても利用できるものが増えた

JavaScriptの特徴

• 順次実行されるインタープリター形式の高級言語
• 動的型付けで弱い型付け
  • バグが潜みやすい
  • ES 6 以降はやや強い型付けになっている
    • TypeScript ( MS が開発) という JS 拡張言語 ( altJS ) で書かれるようになっている
    • 強い Type (型) を推奨し、ネイティブの JS コードにコンパイルする
    • .NET や Angular でも採用されている
• オブジェクト指向と関数型どっちの特徴も取り入れている
• プロトタイプ･ベースを対応 (<-> クラスベース)
  • クラスが存在しないオブジェクト指向 (!?)
  • プロトタイプでオブジェクト指向を実現
    • ES 6 からクラスを定義するような書き方ができるようになった
    • 今後はこっちの書き方がいいでしょう
    • Java っぽい書き味
  • 関数型は Scheme, オブジェクト指向は Self がモデル
• つまりは変テコ (!!!!)

これで後方互換性を担保しているのだからすごいです。。 v8 すごい。また開発環境をスグに用意できるのが、とても良いところです。

JavaScript を学習するには

• 言語を勉強するには MDN がオススメ
  • 本家の Ecma のリファレンスは英語で読みにくい。。
  • 初心者向けに変数や if 文の書き方とかも載ってます
  • プログラミング初心者はサンプルがあるので、書いて改造するといいと思います
• JSの実行環境
  • エディタとブラウザさえあれば動きます
  • 最悪メモ帳でも
  • ちなみに IE は互換性が厳しいので Chrome や Firefox を使うのがオススメです
  • 今回はエディタとして Sublime Text を使います
  • デバックなどもやってくる IDE としては Visual Studio Code や Brackets は人気があります

まったく本題と関係ありませんが、関数型のレポートを書くことが多くなってきたので、レポートしながら関数型を勉強して、慣れていくスタイルです。(約得)

JavaScriptプログラミング入門

ここまで座学で 1 時間 30 分程度でしたが、ここからは演習に次ぐ演習です。

Hello, World

• JS のインタープリター ( REPL ) を使います
• node.js をインストールすると入ってきます
• 同時に npm (パッケージマネージャ) も入ってきます

console.log("Hello, JavaScript!");
/*
- console は引数で指定されたものをなにか画面に出す
- セミコロンは必須ではないが推奨
- 文字列は "" でも '' どちらでもよい (違いはない)
- "メッセージ" や '赤(値)' のように書く
*/

Hello, JavaScript!
undefined

• 戻り値が無いので、 undefined が出てくる
• hello.js を作ってコマンドラインからも実行できる

   node hello.js

関数を書いてみよう

JS は先程の言語仕様の解説された関数型とオブジェクト指向、どちらも取り入れています。まずは関数型から。

• 関数宣言文と関数定義文がある
  • name が違う
  • イタリック体 は任意

関数宣言文

function sum(a, b) {
    return a + b;
}

• function を書いて名前を書く
• 変数の宣言はなしで良い
• 呼び出すときは関数名を指定する

const result = sum(1, 2);
console.log(resulut);

• const という変数宣言が ES 6 が定義された
  • var は書かないが、 ES 5 以前は使われている
  • let という書き方もOK
    • 違いは const が定数、 let が変数
    • 基本は const を書いて、どうしても変数にする必要がある場合は let
• const を消してみるとどうなるか
  • 実行される
  • グローバル変数になってしまって、他から result がどっからでも値が変更できてしまう
• 関数宣言を前に書くとどうなるのか
  • 実行される
    • ん? なぜ順次実行なのに?
    • 関数の巻き上げという機構があり、実行時に上に行く
    • 関数宣言をしていないと巻き上げない(!!)
      • 関数定義文では順次実行されてしまう

関数定義式

function([args]) {
    statements;
    [return value;]
};

• 無名関数とも呼ばれる
• 式なので ; が必要
• 式なので戻り値がある
  • 関数オブジェクトを返す
  • ファーストクラス･オブジェクトでリテラル(値)として返ってくる
  • 新しく変数に代入できる
  • 関数即時式 (関数の中に関数がある) も実行できる

const result = (function (a, b) {
    return a + b;
})(1, 2);

console.log(result);

• function(){} が関数
• ES 6 以降は関数即時式をあまり使わなくなっている
  • ES 5 以前はめっちゃ使っているので注意

アロー関数 (ラムダ式)

• なんらかの関数型の仕組みが取り入れられている
• ラムダ式の表現が何かしら取り入れられている
  • 無名関数を簡単に書きやすくなった
• JS ではラムダ式と言わずアロー関数という

  (arg) => { statements };

  • 引数を宣言する
    • -> or => 言語によって違う
    • python のみ lamda: と書く
• さっきの即時式で書いたものをアロー関数で書いてみる

  const f = (a, b) => a + b;
  
  const result = f(1, 2);
  console.log(result);

  • return も書かなくて良い
  • { } も書かなくて良い
  • 同じように動くが this だけが違う

高階関数 (HigherOrderFunction)

• 関数型プログラミングでは高階関数を使いまくります
• この高階関数を使いこなすことがとても重要
• 関数を引数、戻り値とすることができる
  • f() の () に f() を入れられる
  • return -> f() のように戻り値に入れられる

function x() {
    console.log("x");
};

function y(f) {
    console.log("y");
    f(); // 引数で受け取った関数を実行
};

y(x);

> y
> x

• x と y という関数
• y という関数が x という関数を呼び出している

function x() {
    console.log("x");
};

function y() {
    return x; // 関数を戻り値として返す
};

const z = y();
z(); // => x

function y(f) {
    console.log("y");
    f(); // 引数で受け取った関数を実行
};

// アロー関数で記述 (書き換える場合は this に注意しよう)
y(() => console.log("x"));

y(function() { // 関数定義式で記述した場合 (ES5だと多い書き方)
    console.log("x");
});

const array = [1, 2, 3];
const newArray = array.map(function(n) {
    return n * 2;
});
console.log(newArray);

• map 関数は引数を取れないものは使えない (仕様)
• ラムダ式で書くとこんな感じ

  const array = [1, 2, 3];
  
  const newArray = array.map(n => n * n);
  console.log(newArray);

クラスを書く

続いて、オブジェクト指向をどのように書くのか、ここで重要になるのがプロトタイプ･ベースであることです。変テコな感じです。ただし、ES6以降は見慣れた感じでした。

// クラスは存在せず、Personという変数を用意している
var Person = function(name, age) {
    this.name = name; // this は関数オブジェクトそのもの
    this.age = age;
}

// クラスを使うときはプロトタイプを使う
Person.prototype.setName = function(name) {
    this.name = name;
}
/*
プロトタイプと呼ばれるフィールドを持っている
プロトタイプの関数オブジェクトに関数を記述する
setNameというメソッド(関数)を追加している
*/

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    set name(name) {
        this._name = name;
    }

見慣れた感じになりましたね。

継承

• Java などと同じく extends を使います

Web ブラウザで JS を動かしてみよう

関数型、オブジェクト指向どちらの言語構文も書いてみたところで、従来の html の中に JS を埋め込んでページに動きをつけてみます。

このパートに入ると、なんだか元気になってきました!

• html の中に JS を書く
  • <script></script>
• html は上から順番実行されている
  • <body></body> に書いた処理を <head></head> に書くとしんどい
  • JSが実行中の場合、レンダリングが止まるので、 <body></body> の下に書きましょう
• 実務ではこういう html の中に <script> で埋め込まない
  • js ファイルに切り出す
  • 他の html からも呼べるように
• <script></script> タグに src 属性でパスを書く
  • 終了タグは省略できない
  • 利用される側から上に書く
  • <script src="script_path"></script>

DOM を書いてみよう

• イベントドリブンで書く
  • クリックやらなんらかの出来事で発生する

<html>
    <head>
        <script></script>
    </head>
    <body>
        <button>Click Me!</button>
    </body>
</html>

<html>
    <head>
        <script></script>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
    </body>
</html>

<html>
    <head>
        <script>
            document.getElementById("myBUtton"); // idによって要素を取得する
        </script>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
    </body>
</html>

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                document.getElementById("myButton");
        </script>
        </body>
</html>

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
        </script>
        </body>
</html>

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
        </script>
        </body>
</html>

• Button という DOM オブジェクトを取得した
  • Document Object Model と呼ばれる

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
                btn.addEventListener();
        </script>
        </body>
</html>

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
                btn.addEventListener('click', function() { // 第1引数にイベント名(mouse_overなど) 第2引数に通常，無名関数を書く
                });
        </script>
        </body>
</html>

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
                btn.addEventListener('click', () {
                });
        </script>
        </body>
</html>

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <div id="div"/>
        <script>
                const btn = document.getElementById("myButton");
                const div = document.getElementById("div");
                console.log('btn');
                btn.addEventListener('click', function() {
                    console.log('Clicked!')
                });
        </script>
        </div>
        </body>
</html>

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <div id="div"/>
        <script>
                const btn = document.getElementById("myButton");
                const div = document.getElementById("div");
                console.log('btn');
                btn.addEventListener('click', function() {
                    console.log('Clicked!')
                });
        </script>
        </div>
        </body>
</html>

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button id="myButton">Click Me!</button>
        <div id="div"/>
        <script>
            const btn = document.getElementById("myButton");
            const div = document.getElementById("div");
            console.log(btn);
            btn.addEventListener('click', () => {
                console.log("Clicked!");
                div.innerHTML = "Hello";
            });
            div.addEventListener('mouseover', () => {
                div.style.color = 'red';
                div.style.background = 'yellow';
            });
        </script>
        </div>
    </body>
</html>

動きました !! いえい !!

実践的なJSアプリケーションを見てみる

ここからは書くのではなく、実践的な JavaScript アプリケーションのサンプルコードを実行してみて、動作を見てみました。

• GeoLocation 緯度経度など地理情報を取得する
  • 実行してみてびっくり -> 教室のリモート環境の DC の場所が判明 !!
• WebSocket リアルタイムでサーバーと通信できる
  • Socket
    • UNIX にあった仕組み
    • http だとリクエストが無いので、チャットのようなものが出来ない
    • パイプを使って株価のリアルタイム配信などに活用
• WebStrage Web ブラウザ上でデータベースを用意する
  • 従来は cookie に保存
  • KVS ( KeyValueStore ) と呼ばれる仕組みでデータを保存できる
  • 表形式でも保存できる機能がある => IndexedDB // マジ(!!)
  • やってみると、確かに 1 回ブラウザを閉じてもデータが残っていた
• WebWorker マルチスレッドを実現
  • 1 つの処理しか実行できなかったが、例えば、画面のレンダリング (表示) をマルチスレッドで動かせる
  • Progress bar でデモ

WebWorker の一種でプッシュ通知などもできる ServiceWorker が最近注目されていますね。

その ServiceWorker や IndexDB などを使ってモバイルの web アプリケーションをアプリのように実現できる PWA も注目です。熱い!

いまさら聞けない PWA と AMPopen_in_new

JavaScriptライブラリとフレームワーク

最後に Modern JavaScript -開発環境編 コースや冒頭の解説でも出てきたフレームワークを軽く紹介していただきました。

Angular

学習コストがたかい。。 -> 割りとしんどいです

React

大規模開発でも使える仕組みがめっちゃ用意されている

Vue

日本語ドキュメントが充実

( 開発者が中国人なので、実は一番充実しているのは中国語ドキュメント )

PHP の Web アプリケーションフレームワークの Laravel の標準テンプレートとしても採用

まだ大規模でも使える仕組みが用意されていない

さらに簡単に SPA を書けたり SSR ができる Next.js ( React ) や Nuxt.js ( Vue ) 、クロスプラットフォームでモバイルアプリを書ける React Native や Vue Native 、さらに一周回って、 React Native for Web が登場しています。

キャッチアップが大変なことに加え、技術選定がとっても難しいところですね。

まとめ

このコースでは JavaScript の特徴や成り立ちはそこそこに、ほぼ 1 日、言語構文を書いて、 JavaScript で DOM を操作したり、現在の実践的な JavaScript に触れたり、盛りだくさんに演習しました。

最後に米山さんからまとめとしてお話されたのがとても印象的だったので紹介します。

｢今日最後に触れたように、言語仕様の構文を書けるだけではなく、今や JavaScript はライブラリとフレームワークを使う時代です。習得するには半年から1年かかるので、今日をキッカケに学習を始めてみて下さい｣

学習コストがこれだけ高いだけに、モダンな JS を書ける方がとても少ない状態です。需要は逼迫しているので、十分に学習する価値はあります。

私も弊社製品のフロントのコードを読み始めましたが、このコースで随分、見通しが良くなりました ! これをキッカケにフロントでもコミットできるよう頑張る所存です。

label SE カレッジの無料見学、資料請求などお問い合わせはこちらから!!

label SEカレッジを詳しく知りたいという方はこちらから !!

SEカレッジ

IT専門の定額制研修　月額25,000円 ～/ 1社 で IT研修 制度を導入できます。
年間 670 講座をほぼ毎日開催中!!

Learning Topics 編集部

SEプラスにしかないコンテンツや、研修サービスの運営情報を発信しています。