はいやってきました今日はですね何ですかはいあ、待った待ったじゃあちょっとお二方に質問がありますはい二人はフロントエンド側の開発ってやったことございますか

僕は過労死でありますまあないのかな触ったことあるぐらいな感じなのでなるほどなるほど触ったことあるっていうと本当にHTML、CSSとその辺触ったからなのでないですねなしおそらく

Yもないそうなんですか僕も言うてバックエンドエンジニアなんで現場でがっつり触ったことはそんなないっす自分で勉強してるだけみたいな感じそんな僕がお届けするフロントエンドの歴史ということですよね温厚地震ですねはい

そうですか?違うの?古きを知ることによって今はどう便利になったとかどういう潮流があるみたいなのを学べるんですか?そういうことですありがとうございます本当にフロントエンドの歴史をざっくり漁ったきっかけとしては最近ちょっとモダンなフロントエンド開発の常識を知っておきたいなと思って初点でリアクトとタイプスクリプトとNext.jsを使ってアプリケーション開発するみたいな

本を買ったんですけどこれの第一章にですねフロントエンドの歴史について書かれててこれ知ると結構鼻高けんじゃないかなと思って鼻高さん鼻高くなれるんじゃないかなって今日持ってきたわけですよこれ一言で言うとね地球の歴史と同じですね

壮大ですねフロントエンドの歴史は地球の歴史とほぼ相似です地球なんですね宇宙よりは地球なんですねなるほど急にあれなんですねたまたま水があったから生命が生まれて

そこからなんか圧倒的に地球を支配する人間ってやつが急に現れて地球をぶっ壊して終わるっていう歴史なんですねそういうことそういうことそういうことなんだまだ壊すかどうかは実際あれじゃんフィクションじゃんフィクションですねだからまだ壊してないそこはでも実際ね壊す可能性もあるしありますしねビッグバンゴーからですねじゃあビッグバンゴー宇宙それ宇宙でしょビッグバンゴーは終わって今も最中なのかそれによって地球ができたところからってなって

もう一回宇宙行った方がいいよあれ違います?そうなのかもしれないけどビッグバンは確かに端っこの方でまだ続いてて宇宙が広がってるっていう噂は聞いたことあるけど果たして本当かって思ってもいい確かに

見えないしね置いといてということで今日はですねフロントエンドの歴史を学んで明日職場でそんなことも知らないのって言える回にしていきたいなと思ってます一時期上から行くスタンスですねということでですねまずフロントエンドといえばね切っても切り離せないのがJavaScriptですねJavaScriptはい

フロントって言ったら多分HTML、CSS、JavaScriptその辺りが主役になってくるかなと思うんですけど今回はフロントエンドって言ってもJavaScriptに特化してやっていこうかなって感じですねJavaScriptの歴史ってことですか?そうですはいはいはいはいで、まず誕生誕生はですね1995年ですねおーネットスケープ社っていうのが当時結構アメリカにあったブラウザとか開発してた会社でおー

当時はネットスケープっていうブラウザがあったと思うんですよ知らんたって95年でしょ?95年だからため?純平とため?ためですPCパーソナルコンピューターがあったんかってやるやつねまずいや本当だよねWindows95ってさあれ95ってついてるだけあって95年なんじゃないですか?でもそういうことだよね一番初めて触ったPCがねWindows MEでした僕はへー

XPの前?前じゃないですか前の前とかじゃないですかMEが僕の家の初PCでしためっちゃソリティアやってためっちゃわかるピンボールとソリティアめっちゃ初ちなみに98でしたねなんで覚えてるんですかめちゃめちゃ前じゃないですかじいちゃんの事務所にありました

即領主やっててじいちゃんが即領主やってて事務所にCADCADだったんじゃないCADじゃないCAD使わないで有名な即領主だったんでそうなんだ全部手でやるみたいなそんな有名なそれなら紙でいいじゃんって気がするんですけどそう中でもPCありました懐かしいネットスケプチャによってですねブラウザ上で動く言語として

はい javascript が誕生しました 誕生当時はねあの javascript じゃなくてライブスクリプトっていう名前だったんですよまあなんか名前がいいですね ぽくないですかそっちの方がいいんじゃないかと今も思ってるんですけどただこれ javascript に改名したんですけど当時あの java が 順平が今めっちゃ使ってる java が人気であやかろうぜってなったらしいやばっ

やばすぎるだろマジでいい感じになっちゃったんですかねなっちゃったねあやかっちゃった言うたらですよねiPhoneめっちゃ流行ってるやんITVって勝手にテレビ出したみたいなそうぐらいのりですよねブルノマーズめっちゃ流行ってるじゃんつって息子にマーズって名前つけるうんうん

火星じゃない?どっちかっていうと。 真っ当に。地球の歴史でやってるからあれだな。ちなみにこれが地球でいうと生命の誕生ですね。 Javascriptの誕生ですね。まだ当時どんな生物がいたのか知らないですけど、虫みたいな小さいやつが生まれたのがこのLiveScript時代ですね。 Javascript。ただですね、これ当初

だと結構ブラウザによって挙動が思いっきり違ったらしいんですよ違いそう標準化とかもされてなそう標準化もされてないそれを標準化しようぜってエクマっていう団体があってそこに標準化任せたんですけど

当時の巨大企業たちの意見が食い違いすぎて破綻してたそうですね戦国時代ですからね本当に協力していこうなんて戦国時代後で出てくるからちょっと今はややこしいこれはまだ違うから戦国じゃないですで

ちなみにこのECMAはね結構今も大事ですねよくJavaScript触ってるとECMAスクリプトっていう単語出てくるんですけど最初にECMAスクリプトっていうのが標準というか仕様が決まってそれがJSにどんどん移し変えられていくみたいな感じで

だからその記法がね毎年毎年JSに追加されていくんですけどES2020とかES2021みたいな感じで追加されていくんですからあのESがねECMAScriptの略ですねへーでまぁここで標準化失敗です失敗失敗です

しかも用途そんな多くなくてぶっちゃけやることフォームのバリデーションぐらいしかなかったらしいですね最初はそんなもんですよね本当に薄化粧みたいな大事ですねフォームのバリデーション大事結構大事ただその割にクラッシュとかしたりとか

あとセキュリティ的にもちょっと懸念あるよねみたいな感じでオフにする人も多くてそこそこ悪名高い言語だったんですけどただですね2005年10年登場から10年経ってあの某巨大企業GoogleによってGoogle Mapsがリリースされましたとそんな昔からあるんだ2005年からあるんだって2005年いくつ中学生とかだと思ってそうっすね僕も中1くらいかな10歳

たべたべたべたべやすいGoogle Mapsがリリースされてこれがめちゃめちゃ革命を起こしますJavaScriptでこんなことできるんだみたいな衝撃を世界中の企業に与えて

特にすごかったのがですねAJAX?うんうんうんうん順平わかる?はい住所を取得してくるやつあーちょっとやばいかもみたいなやつまあまあでもね近しい非同期通信ですね簡単に言うとはいはいなのでブラウザとかあるじゃん

ブラウザが表示している画面を全部更新せずに一部分だけデータ取ってきて入れ替えたりとかができるようになったみたいな感じですねあれをめちゃくちゃ使い込んだGoogleマップがリリースされてそれによってですね爆発的に普及して

カッツで普及したんでパフォーマンスもどんどん上がっていって当時フラッシュが前世だったんですけどそんな時代聞いたことないですけどフラッシュない?ないです衝撃フラッシュは簡単に言うと動きつけるためのなんかみたいな感じじゃない?ボビーのやつはあれ?

フラッシュ倉庫?そうそうそう、そのフラッシュそのフラッシュハゲの歌とか流行ったでしょ?あれ?ハゲなんてYouTube?どんなでしょ?フラッシュですフラッシュですブラウザ上で色々アニメーションないしなんか色々動かせるようにするみたいなやつフラッシュ倉庫イメージしやすいフラッシュ倉庫ですねそれが終わってJavaScriptが盛り上がっていく時代に入っていきますとこの時期ちょっと微生物が形を持った生命体になっていきますうん

結構GoogleマップぐらいだったんですねそのFlash時代にAJAXというかJavaScriptを使ってたのはそうそこでめっちゃ使われてあらゆる企業が可能性を感じ始めたんですね多分有名なサービスこの辺にできてるんじゃない?分かんないけど全然めっちゃ曖昧だった今YouTubeとかTwitterとかこの辺から作られてるんじゃない?それはありそうですねうん

この時期に生命多様性持ち始めますとその後Jクエリーというものが登場してですねこいつがねすごいんですよ現実世界で言うと恐竜現実世界で言うと恐竜どういうこと急にでかいってこと急に地球上支配し始めた

相当普及した最初の支配者的なこれJQueryがなんで普及したかっていう話なんですけどまず一個はブラウザ間の挙動っていうのが全部吸収されてるんですよどのブラウザで使っても同じようになるように後ろで設計されてるんでめちゃくちゃ開発楽になったマジでJQuery作った人がすごい吸収してるとこですよねあとは

当時ブラウザでやることって何が多かったかっていうと結局HTMLとか見た目の操作アニメーションをかけてるみたいなそういうところが多かったんでアニメーションの実装がめっちゃ簡単にできますよとかDOMの操作簡単にできますよとはいDOM

大丈夫ですかドムですよね仮想ドムみたいな仮想ドムはちょっとね未来のテクノロジーだね仮想ドムの仮想じゃない方いやーなんかはいお願いしますこれドキュメントオブジェクトモデルって言ってHTMLってタグで入れ子になってるじゃないですかあれの構造と裏に全く同じ木構造みたいなのを持っててあれを操作するとブラウザの方も変わるよみたいな後ろに持ってる木の方ですね

これがドームですそれの操作がめっちゃ簡単にできますよとしかもライブラリも豊富になりました恐竜ぐらいいっぱいだからメソッドだけでスライド実装できるとかそういう系のライブラリとかも豊富で一台

一大事一大ムーブメントが起きたんですねただですねJQueryも長くは続かなくてですね隕石到来からの氷河期に移って絶滅しちゃうんですよ絶滅はしないなでもこいつらちなみに言いますがJQueryってJavaScriptのライブラリ的な

合ってますね。 合ってます。 合ってます。 合ってます。 合ってます。ぶっちゃけ今でも使われてる。 そうですよね。なので、こいつらは絶滅しないタイプの恐竜なんですけど、今もトカゲいるみたいな感じで。 トカゲじゃん。なるほど。で、これ理由としてはですね、大規模開発するときにちょっとね、コードが複雑になっちゃったりとかして、大変なんですよ。状態管理とかが。 うーん、なるほど。

なのでそういう意味でちょっとJクエリ便利だったけど使い続けてるときついよねみたいなのが訪れてちょっと没落していきますとここで新たに登場してくるのがですねSPAですねこれはもうね人類の誕生だと思ってください人類の誕生なんですねここからもう霊長類の時代に入っていきますね最近よく聞くSPASPA

何の略でしょうかねこのクイズ前にしたことある気がする思い出してるあ、あ、あ、シングルページアプリケーションですそういうことですねシングルページアプリケーションですとシングルページアプリケーションこれはですね従来だったらクライアントとサーバーがあってブラウザーからサーバーにリクエストを飛ばしてそのサーバー側でHTML組み立ててそれをブラウザに返してブラウザで読み取って表示っていう形にしてたんですけど

SPAはちょっと違っててまず最初リクエスト飛ばしますとそしたらまず空っぽのテンプレート送られてきますと空っぽのテンプレート読み込んだらまたAPIってところにリクエストが飛んで埋め込むためのデータを持ってくるようになったんですよそのデータを埋め込んで画面変えてきますよっていうスタイルのウェブサイトですとなのでページ遷移する時とかも実はページ遷移してるように見せかけて中のデータ入れ替えてるだけなのでめちゃめちゃテキパキ動くようになったんですね

スムーズぬるぬる動くっていうのがこの時期流行ったねなのでそれが登場したことによってアプリケーションすごいハイパフォーマンスというか俗に言うぬるぬる動くアプリケーションになったっていうのとあとはフロント側とサーバー側でめちゃめちゃ仕事が分業されたんでフロントエンドとバックエンドの分業っていうのがめっちゃ進んで効率よく開発が進めるようになりましたとプラスそのAPIになったことによってマルチデバイスでも対応するのが簡単になったんですよ

そのデータを要はブラウザから取ればウェブに表示できるしアプリケーションから取ればアプリに表示できるしっていう形でいろんなデバイスで表示できるようになったよっていうのがこのSPAの登場ですねただこのSPAちょっとしたデメリットもはらんでますまず一番最初に取ってくるアプリケーションが

結構でかいんですよなぜなら全ページ分取ってくるよっていう機能ついてるなので初期描画がまずちょっと重たいんですよね読み込んだ後早いんですけどあとはちょっとまあね今までない技術なんで学習コスト高いし採用もちょっと難しくなったよねっていうのがね若干あるらしいですね裏で今までもそれは変わらないはずだけどそうなんですねそうだね

まあ全クエリとかは結構学習コスト簡単だからなあれああそうなんですねうん

本当にメソッド名分かったらいけるでしょうね感じだったんだけどちょっとこのSPAで使う系のやつとかはねフロント側でルーティングしたりとかそういうのが入ってきたりするんで若干コスト高いですねでこのSPAの登場によってですねMVC MVVMって呼ばれてるそれぞれのアーキテクチャを実装した

ライブラリーの戦国時代に突入しますねやっと来たここ戦国時代です来た多分最初の方に登場したのがバックボーンJSって言ってこれMVCモデルのやつなんですけどフロント側でMVCってどういうことやねんって感じなんですが一旦細かいことは置いといてそのアーキテクチャで実装されてたらしいですとSPAでフロントでMVC持ってるってことですかそうですはいはいはい

でもフロントムースよりこのMVVMっていう方がいいんじゃないかっていうのに多分なったのかなこれはMVVMのアーキテクチャのライブラリが結構ポロポロ出てきますそれは何が違うんですかMがモデルでVがビューってとこ同じなんですけどVMがビューモデルなんですよねビューモデルで一つそうごめん違いは忘れたわ正直

なんで分けてるんだろうと思った記憶あるんですけど調べます調べましょうこれはちょっと待ってくださいねちょっと調べてる間にどんなのがあったかというと有名どころだとねアンギュラージェイスとか聞いたことありますビュージェイスとか聞いたことありますあと

多分今はそんなに有名じゃなくなってしまったけどノックアウトJSとかライオットJSっていうのが知らない聞いたことない知らなくていいんじゃないかな多分ビューとアンギュラーが分かれば大丈夫ですねモデルに追加機能を持たせてるみたいなイメージなんかなちなみにこの書籍にあるMVVMの説明で言うとデータを管理するのがモデル画面表示に関するのがビュー

そのデータと表示の受け渡し橋渡しをしているのがビューモデルっていう感じらしいですねコントローラーと変わらなくね?思っちゃいますけどね私も同じく思いましたそれはでもそんなわけないですよねただちょっと気になるのは

MVVMではモデルからビューへのデータ連携ビューからモデルへのデータの双方向バインディングを行うアーキテクチャーであるんで双方向なのがちょっと違うのかなって思いましたうんうんうんコントローラーってさ結構モデルから取ったデータをビューに突っ込むみたいな一方向じゃないですかはいそこら辺がちょっと違うのかなっていう気がしてますうんうんなんかMVCのビューとコントローラーモデルとコントローラーに比べてビューモデルの方がモデルとの

結合度が高そうっていうイメージ高そうだけどそれ以上はちょっとピンときてない橋渡しがいいモデルですこの時期にリアクト今多分フロントエンドのライブラリー系だと一番来てるというか一番使われてるんじゃないかなって感じなんですけどリアクトも実はこの時代に登場してます

徳川家康ですね統一するやんヤスコヤスコって言うねヤスコって言われたんですソマゴーでヤスコが登場しますよとそう考えるとアンギュラーだとビューガーオーダーとトヨタニアというイメージですかねいい感じになってきました

はいちょっとじゃあ今回リアクトにフォーカスするんですけどじゃあリアクトって何がそんなすごかったのっていうところなんですけどさっきじゅんぺいの口からちょっと出てきた仮想ドムはい

これが実は効率的な描画ができるっていうところが一個すごかったのと大規模なアプリケーションになっても大丈夫だよっていう風になってるんですよ状態管理がまずしやすいっていうのとあとコンポーネントベースで開発できるっていうのがあってですねコンポーネントベースの開発は

一旦置いておきたいんですけど簡単に言うとパーツを分解して開発できるみたいな感じですねそれを最後組み上げて作るみたいな簡単そうそれによって裁量性とかも増すんでめっちゃこれで大規模でも開発しやすくなりましたよっていうのがライブラリ戦国時代のお話ですとこれがだいたい2013年前後ですね今から10年前ですね

結構前そんな前なんだ本当ですよまだ大学生だな全然これとちょっと同じ時期なんですけど裏側で実はちょっとずつ伏線が動いてるんですよほうそれの一個がまずノードJS

ノードJSっていうのはサーバー側で動かせるJSだと思ってくださいJSと同じ文法で書けますサーバー側が同じ文法で今までひたすらフロントエンドとかの話してましたけどどっちかっていうとバックエンドで動くAPIとかの機能を実装ができるやつそういうことですねプラス

ちょっと並行してですねオルトJSっていうのもちょっと流行ってきてるんですよこの時期裏でまずさ多すぎ歴史を思い出すわ歴史の授業を思い出す特に今覚えてほしいのはオルトJSの方ですねこれはですねJSじゃなくてJSに近いやつって感じJSじゃないってことですかJSではないそうなんですねただ最終的にはJSに変換する

SASとか使ったことある?SCSSないですないか?ないじゃあこの例えは使えないんだけどAlt.jsっていうのはですねJSっぽいのを変換してJSにするやつこれによって何が嬉しいかっていう話なんですけど有名なのだとTypeScriptですね

タイプスクリプトってJavaScriptに片付けができるようになったんですよへーあ拡張センスねそこそうそうそうそうだからJSと文法違うんですけど最終的にはそれをJSにトランスパイルって変換してくれるんですねうんうんうんなので

要はJSよりも豊富な機能かつ安全な機能を使いつつ最終的にはJSが動くっていうことができるんですよさっき言ったSASとかもそうでCSSをめっちゃ簡単に書いてそれを最終的に変換してCSSにするみたいなうんうんうんうんうんなんかありますよねそういうの確かに使ったことある気がするでそれのJSでやってるやつが要はAltJSですね

オルトJSもタイプスクリプトみたいな形でよりJSを拡張させた的な

ものってことなんですねオルトJSはもうくくりっすねくくりなんですかタイプスクリプトとかいろいろあってそのくくりをオルトJSって言ってたみたいな階層がわからんくなってた階層で言うとそれだわ一番最初に名前上がったのはコーヒースクリプトってやつなんですけどこれは多分JSの記述量を少なくしようとして頑張ってたやつでも今はタイプスクリプト以外あんま使われてるの知らないから地味にフラッターもオルトJSの一部らしいんですけど

Flutterはアプリ開発とかでよく使われてるなみたいなイメージFlutterってあれですかモバイルアプリいっぱい開発できるマンですよね確かiPhoneとAndroidアプリ作ろうと思ったらFlutter使ってるイメージがこれも実はAlt.jsらしいんですよねあとねもう一個あってJS最近毎年新しい機能増えてるんですけどブラウザの実装が追いついてないケースがあって

逆にブラウザも結構なスピードでアップデートしてるのに最近はそんなないんじゃないかなって個人的には思ってるんですけど新しい書き方使えないブラウザとかあるんですよ最近サポート切れちゃったIEとかにIEとかそうですよねそれに対応するために新しいJSの書き方を古いJSに書き換えるみたいな変換するっていうことが行われてましためんどくさいめんどくさいですねそれはそうめんどくさい

これによって全ブラウザでも対応できるよみたいなビルドすればっていうようなことにも使われてたんで結構オルトJSは大事ですねいや大事超苦戦した記憶あるもんそのJSのコード書いて

IEとFirefoxとChrome対応してくださいって言われておいIEってなる経験めっちゃあったすごくそれがこれですそういうことがあったんですねこれはもう徳川時代の中のなんかですねおいなんかにしろそれはなんかにしてくれそれはなんかですね多分大名とかになるんですかねちょっとすみません今の勢力図をおさらいさせていただきたいんですけども今の時代

イマジンプラグラマーではメールを募集していますトークテーマ悩み要望などなど何でも募集中です宛先はそれではまた次回