close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 JUnit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 Wireshark パケットキャプチャ 管理職研修 部下育成 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 テスト技法 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解 トラブル調査 ネットワーク設計 Windows server 2016 ネットワーク機器 DX 管理職 最新動向 ポストコロナ時代 IoTデバイス マイコンボード センサ サーバー仮想化 仮想ルータ WAN インターネットVPN 若手エンジニア ITプロジェクト 人事面談 DX人材育成 Java基礎 ZAP 脆弱性診断 NWサービス構築 イノベーション・マネジメント ネットワークセキュリティ ストレッチ Google Cloud Platform 不動産業界 テレワーク(WFH) ドリル GCP ( Google Cloud Platform ) システム業界 PMS テレワーク ビッグデータ NoSQL OWASP CentOS8 ネットワーク技術 データ分析 デザインシンキング 保険業界 会議リーダー システムエンジニア 段取り術 プロジェクト原論 文章書き換え術 ノーコード No Code MongoDB Redis Cassandra 運用管理 Windows10 仮想マシン リモートワーク 働き方 生産性 IPSec Office セキュリティマナー ソフトウェア・レビュー ライフハック

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


2020-10-29 更新

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

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

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

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

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

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

コース情報

想定している受講者
  • Web の基礎知識(仕組みや HTML, CSS など)
  • 何らかのプログラミング言語の基礎知識(変数や制御構造など)
受講目標 JavaScript の基本的な構文仕様を理解し、 JavaScript を使用した簡単な Web ページを作成することができるようになる。

講師紹介

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

米山 学

米山 学

現場で困らないよう、一次情報にこだわったコンテンツと “動かして学ぶ” ことにこだわる人気トレーナー。
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 (パッケージマネージャ) も入ってきます
codeHello World
console.log("Hello, JavaScript!");
/*
- console は引数で指定されたものをなにか画面に出す
- セミコロンは必須ではないが推奨
- 文字列は "" でも '' どちらでもよい (違いはない)
- "メッセージ" や '赤(値)' のように書く
*/
code実行結果
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);
code実行結果
> y
> x
  • x と y という関数
  • y という関数が x という関数を呼び出している
code戻り値に関数を指定
function x() {
    console.log("x");
};

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

const z = y();
z(); // => x
code無名関数も受け取れる
function y(f) {
    console.log("y");
    f(); // 引数で受け取った関数を実行
};

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

y(function() { // 関数定義式で記述した場合 (ES5だと多い書き方)
    console.log("x");
});
code活用例として map や reduce
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以降は見慣れた感じでした。

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

// クラスを使うときはプロトタイプを使う
Person.prototype.setName = function(name) {
    this.name = name;
}
/*
プロトタイプと呼ばれるフィールドを持っている
プロトタイプの関数オブジェクトに関数を記述する
setNameというメソッド(関数)を追加している
*/
codeES 6 以降
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 を書いてみよう

  • イベントドリブンで書く
    • クリックやらなんらかの出来事で発生する
codeボタンを記述
<html>
    <head>
        <script></script>
    </head>
    <body>
        <button>Click Me!</button>
    </body>
</html>
codeid 属性をつける
<html>
    <head>
        <script></script>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
    </body>
</html>
codedocument オブジェクトで指定する // ブラウザのみ
<html>
    <head>
        <script>
            document.getElementById("myBUtton"); // idによって要素を取得する
        </script>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
    </body>
</html>
code上から実行されるので <script> タグを移動
<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                document.getElementById("myButton");
        </script>
        </body>
</html>
codeconst で指定

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
        </script>
        </body>
</html>
code一旦実行
<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 と呼ばれる
codeEventHanler (関数) を追加する
<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
                btn.addEventListener();
        </script>
        </body>
</html>
codeEventHadler を書いていく
<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>
codeラムダで記述
<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>
code処理を書く // コンソールに clicked を出す
<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>
codeタグを追加
<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>
codeタグ内を操作する
<!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 カレッジの無料見学、資料請求などお問い合わせはこちらから!!


SEカレッジについて

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

午前免除 FAQ

タグ一覧