場 所:ロジカルスタジオ会議室アドリア(4F)
時 間:11月20日(水) 12:00~13:00
こんにちは、ロジカルスタジオのフロントエンドエンジニア、T.Kです。
先日、弊社ロジカルスタジオ内でこんなやりとりがありました。
ディレクター
アッカリーン
Vue.jsとか React.jsとか Nuxt.js とか Node.jsとか
色々あるけどさー、結局なんなん?
どんな違いがあるん?何ができるん?
じゃあ、そこらへんのJS界隈の変遷も含めて一回話するか〜
フロントエンド
エンジニア
上平 千晶
(ピラーマン)
頼むわー!
(でもこれ、私だけで聞くのも勿体ないな…)
JS井戸端会議とは?
JS井戸端会議は、JavaScriptについて詳しく知りたい人が集まり、
皆でJavaScriptについて自由に話しつつ知識をつけていこう!というゆるい会です。
今回は、
- JavaScriptの歴史を学ぶ
- 疑問を解消!ディスカッションタイム
この2つのセクションに分けて進めようということになりました。
JavaScriptの歴史を学ぶ
普段我々フロントエンドエンジニアが使用しているJavaScript。
しかし、その歴史を知らないエンジニアも多いのではないでしょうか!
というわけで当セクションではJavaScriptの誕生から現在に至るまでを、
上平さんが時代を追って紹介してくださいました。
1994年 昔々
Netscape社(現Mozilla)がブラウザ「Netscape Navigator」を発表しました。
オープンソースでもあり、絶大なシェアがあったそうです。
1995年 JavaScriptの誕生
Windows 95が発売されたこの年、Netscape社のブレンダン・アイク(Brendan Eich)によってJavaScriptは開発されました。
当初はLiveScriptと呼ばれていましたが、当時大流行していたJavaをリスペクトし、JavaScriptという名前にされました。
1996年 そして混沌へ
Microsoft社もすぐに自社のブラウザInternet ExplorerにJavaScriptを搭載しようとしましたが、
Netscape社はMicrosoft社に対しライセンスを供与しませんでした。
そこでMicrosoft社はJavaScriptに似た言語「JScript」を開発します。
しかしJavaScriptとJScriptは互換性がないところが多く、開発者は苦しんだそうです。
1997年 平和への動き(標準化)
Netscape社とMicrosoft社は和解し、ECMAという団体に標準化をお願いし、ECMAScriptが誕生しました。
これは仕様の名前であり、これをブラウザに落とし込んだのがJavaScriptです。
「ECMAScript」という名前は、JavaScriptのバージョンを表す「ES○」という言葉に残っています。
2000年 ~ 2004年 決裂
この期間は、ブラウザの競争から標準化がなかなか進みませんでした。
この頃のJavaScript
この頃はJavaScriptはあまり必要のないアニメーション等に使われることが多く、処理もあまり速くなく、
またJavaScriptの脆弱性の多さもあったため、あまり評価はよくありませんでした。
私の記憶では、この頃の個人サイトはマウスストーカーが搭載されていたり、
開くと大量にポップアップが出てきたりするものが多々ありました。
またこの時代は「ウェブサイトのアニメーションといえばFlash」という風潮が強く、
Flasherと呼ばれるFlashの技術者に対する需要が高かったそうです。
面白Flashが流行したのもこの頃でした。また、全体をFlashで作ったページも多くありました。
2005年 ~ 2008年 返り咲いたJavaScript
この間に、以下のような出来事があり、JavaScriptは復権を遂げました。
- ・Ajaxの誕生
- Googleがこの技術を使用した「Google Map」を発表し、世間は驚きました。
- ・jQueryの誕生
- ブラウザ間の挙動の違いを吸収してくれるため、とても重宝されました。
- ・V8の誕生
- Googleが開発したこのJavaScriptエンジンにより、処理速度が大幅に改善されました。
- ・標準化が進む
- 各ベンダーが徐々に打ち解けてきました。
2009年 Node.jsの誕生
V8をサーバーサイドに持ち込むことで、ついにJavaScriptがサーバーサイドで動くようになりました。
Node.jsとはこのプロジェクトの名称であり、このNode.jsの誕生によりサーバーサイドでJavaScriptを書く機会が現れました。
現在このNode.jsは
- API
- ビルドツール
- タスクランナー
等、様々な用途で使われるようになりました。
2013年頃 JavaScriptフレームワークの誕生
ウェブアプリケーションはかなり複雑化し、新しいアプローチとしてJavaScriptのフレームワークが誕生しました。
代表的なものに、
- Vue.js
- Angular
- React
があります。
Vue.jsについては弊社で過去2回勉強会を行っております。
ブログ記事としても掲載していますので、そちらもご覧ください!
2019年9月25日開催 Output Study!〜ちょっと変わった勉強会〜「#3 Vue.js」
2019年10月23日開催 ゆるっとVue.js勉強会 Vue.jsハンズオン「ToDoリストを作ろう」
2015年頃 ECMAScript2015(ES6)の策定
ECMAScriptに新しい機能や構文が追加され、効率的にプログラムを書くことができるようになりました。
これがES6で、ES6はIE11では動かないため、IE11にも対応させたい場合はBabel等でES5の書式に変換する必要があります。
2016年~ 新しい時代のウェブ
JavaScriptは単純なウェブサイトだけでなく、マルチプラットフォームで活躍しています。
- SPAやReact Nativeなどによるハイブリッドアプリでのモバイルアプリケーション
- Electronによるデスクトップアプリケーション
- PWA(プログレッシブウェブアプリ)
等、様々なケースで使われるようになってきています!
「JavaScriptの歴史を学ぶ」を終えて
私は2006年頃から趣味でJavaScriptを触っていましたが、知らないことが多く非常に新鮮でした。
JavaScriptは今まで紆余曲折ありましたが、今後もウェブ制作にとって重要であることには間違いありません。
また、言語の歴史的経緯を知るとこれからの時代の流れが分かってくるのでオススメとのことです!
疑問を解消!ディスカッションタイム
後半は参加者の疑問を一斉に解消するディスカッションタイムです!
ここでは、参加者から出た疑問とその答えの要約を、いくつか掲載していきます。
Q&A
最初にJavaScriptが世に出た時、何を目的に作られたのか?
A.HTMLで実現できないことを実現することを目的に作られた。
React.js、Angular.js、Vue.js、各フレームの難易度はどの程度?
A.上平さんの経験では、Angularが最も難しく、Reactがそれに次いで難しく、Vue.jsが最も簡単。
※あくまで上平さんの見解。
Blinkってどういったもの?
A.ブラウザのレンダリングエンジン。Google ChromeやEdge等で採用されている。
React nativeを使うと何ができるのか?
A.Reactでハイブリッドアプリを作ることができる。AngularにもVue.jsにも同様のものがある。
Flutterって何?何で注目されてるの?
A.Flutterとは、Googleによって開発されたモバイルアプリケーションフレームワークのこと。フリーかつオープンソースである。
FlutterはDartという言語一つのみでマルチプラットフォームに対応できる魅力的な環境である。
なのでマルチプラットフォームの課題を解決できるというアプローチに注目しているのでは。
現在、デスクトップ・モバイル・Webなど様々なデバイスや環境の開発を期待される時代だと言えるが、
人的リソースの問題や様々な課題による問題でなかなかマルチプラットフォームで対応することは難しいのも現実。
その問題に対して「Flutterで解決できるのでは?」と期待されていること注目の要因なのではないか。
PWAってどういう技術?
A.PWAはProgressive Web Appsの略称で、ネイティブアプリのようなユーザー体験を提供する技術のこと。
Push通知やオフライン対応など、いままでウェブでは提供されなかったユーザー体験が提供できる。
これも今後の展開が期待されている技術である。
ディスカッションタイムを終えて
普段抱えている疑問をある程度解消できる、いい機会であったと感じました。
そしてどうやら多くの疑問を持ったまま業務に取り組んでいるのは私だけではないようで、
他の参加者からも次々と質問が出てきました。
また質問の答えを聞いているうちにまた新たな疑問が生まれ、質問が質問を呼ぶ状態でした。
さらに、予定していた時間を超えても質問が次々に出てくるようなので…
第2回 JS井戸端会議 開催決定!
1時間では全ての疑問を解消できそうにない、ということで
後日、同様の会をもう一度開催することが決定しました!
残りの疑問はそちらで解消していきます!
第2回の様子もブログに掲載する予定ですので、ぜひともご期待くださいませ!