[{"data":1,"prerenderedAt":453},["ShallowReactive",2],{"content-\u002Fcontents\u002Fjavascript":3,"surroundPost-\u002Fcontents\u002Fjavascript":444},{"id":4,"title":5,"body":6,"createdAt":431,"description":432,"draft":433,"extension":434,"meta":435,"navigation":436,"path":437,"seo":438,"stem":439,"tags":440,"thumbnail":442,"updatedAt":431,"__hash__":443},"contents\u002Fcontents\u002Fjavascript.md","JavaScriptのいろいろまとめ（歴史・ツールなど）",{"type":7,"value":8,"toc":419},"minimark",[9,13,16,19,22,25,28,33,36,39,46,174,177,181,191,194,197,200,204,207,210,213,216,219,222,236,239,260,263,267,270,273,276,279,333,336,339,342,345,348],[10,11,12],"p",{},"フロントエンドの勉強として、TypeScript と React を学び始めました。",[10,14,15],{},"どちらも JavaScript（JS）に関係する言語だったりライブラリなのですが、とにかく JS 周辺はでてくるものが多く、全体像がつかみにくいです。",[10,17,18],{},"最初は書籍等を読んで勉強していましたが、わからずに設定することが多すぎて今回の記事を書くことにしました。",[10,20,21],{},"そこで、今回は JS まわりのツールなどをまとめていきます。",[10,23,24],{},"正直なところ 複数人で行うような大規模な JS 実装経験がないので、過去の JS の苦労はわからないので内容については自信がないです。",[10,26,27],{},"間違いのご指摘等大歓迎です。",[29,30,32],"h2",{"id":31},"javascript-の歴史","JavaScript の歴史",[10,34,35],{},"JS まわりのツールがたくさんあるのは、フロントエンドの発展に伴って必要とされるものがどんどん変わっていき、新しいものが次々とでるからです。",[10,37,38],{},"それらがどんなものかを理解するには、JS がどういった歴史を辿って今に至るのかを知ることがおすすめです。",[10,40,41,42,45],{},"ここでは、ネットの情報をもとに JS まわりの歴史をまとめます。",[43,44],"br",{},"\n（※ 誤りがあるかもしれないのでご注意ください）",[47,48,49,62,76,88,99,120,138,150,162],"ul",{},[50,51,52,53,57],"li",{},"1995 年：",[54,55,56],"code",{},"JavaScript 誕生",[47,58,59],{},[50,60,61],{},"Netscape Communications 社によって JS が生まれる。JS は Netscape Navigator という Netscape 社のブラウザで使用するための言語として開発され、もともとは LiveScript と呼ばれるものだったが、当時流行り始めていた Java の影響を受けて JavaScript という名前になった。",[50,63,64,65,68],{},"1997 年：",[54,66,67],{},"ECMAScript による JS のの標準化",[47,69,70],{},[50,71,72,73],{},"JS の登場以降、ブラウザによって JS の仕様が異なり開発が困難になるという問題があった。そこで、JS のを作った Netscape 社が国際標準化団体の ECMA に依頼して作られてのが、JavaScript の標準規格である",[54,74,75],{},"ECMAScript",[50,77,78,79,82,83],{},"2005 年：",[54,80,81],{},"Ajax（Asynchronous JavaScript + XML）","の登場\n",[47,84,85],{},[50,86,87],{},"JS を使って、サーバーサイドと非同期通信を行う Ajax が登場する。この Ajax が Google Map に採用されるなどして注目を集め、同時に JS も注目されるようになる。",[50,89,90,91,82,94],{},"2006 年：",[54,92,93],{},"jQuery",[47,95,96],{},[50,97,98],{},"JS のライブラリとなる jQuery が登場。jQuery はこれまでよりも簡単な記述で DOM の操作を行うことができ、現在に至るまで様々なサイトで使用されている。",[50,100,101,102,82,105],{},"2009 年：",[54,103,104],{},"Node.js",[47,106,107,110],{},[50,108,109],{},"これまでクライアント中心だった JS のサーバーサイド用の実行環境",[50,111,112,115,116,119],{},[54,113,114],{},"CommonJS","という仕様や",[54,117,118],{},"npm","とよばれる Node.js のモジュールを管理するツールも登場する",[50,121,122,123,126,127,82,130],{},"2012 年：① ",[54,124,125],{},"TypeScript","の登場、② ",[54,128,129],{},"webpack",[47,131,132,135],{},[50,133,134],{},"① JavaScript のスーパーセットとなるプログラミング言語。コンパイルすることで JS のコードになる。このような JS に似た言語で書いて JS に変換する（トランスパイル）言語は AltJS と呼ばれている。TypeScript 以外にも CoffeeScript などがある。",[50,136,137],{},"② モジュールバンドラーの webpack が登場",[50,139,140,141,144,145],{},"2013 年：",[54,142,143],{},"React","のオープンソース化\n",[47,146,147],{},[50,148,149],{},"FaceBook によって開発されていた JS のライブラリ",[50,151,152,153,156,157],{},"2014 年：",[54,154,155],{},"Babel","の登場（※ 年代が違うかも）\n",[47,158,159],{},[50,160,161],{},"JS のトランスパイラである babel がリリースされる",[50,163,164,165,168,169],{},"2015 年：",[54,166,167],{},"ES6","のリリース\n",[47,170,171],{},[50,172,173],{},"ECMAScript の第 6 版、ES2015 がリリース。新機能がいろいろ追加され、これ以前と以降の仕様で書かれているかで大きく異なる。ES modules もここで登場する",[10,175,176],{},"本当にいろいろある、、、",[29,178,180],{"id":179},"過去の-javascript-の問題点","過去の JavaScript の問題点",[10,182,183,190],{},[184,185,189],"a",{"href":186,"rel":187},"https:\u002F\u002Fjp.quora.com\u002FJavaScript%E3%82%92%E6%82%AA%E3%81%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E%E3%81%A0%E3%81%A8%E8%80%83%E3%81%88%E3%82%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E",[188],"nofollow","ここに","かなりまとまって書かれています。そのなかでも JS の問題点としてよくあがるのはモジュール機能の欠如、グローバル変数汚染、コールバック地獄などです。",[10,192,193],{},"モジュール機能というのはプログラムを分割した単位のことです。モジュール機能がなかったころは script タグを２つ書いたりすることで分割していました。一応、モジュール間を結合する方法はありましたが、モジュールの依存関係を考慮しなければいけなかったり、分割したとしても名前空間の衝突が起こったりと問題がありました。",[10,195,196],{},"こういった JS を便利に使いたいという過去があり、AltJS などが生まれています。",[10,198,199],{},"個人的には、過去の JS にモジュール機能がなかったことが JS 周りを複雑化させた要因の一つのように思います。",[29,201,203],{"id":202},"commonjs-と-nodejs","CommonJS と Node.js",[10,205,206],{},"CommonJS はサーバサイド JS の仕様のこと（団体・プロジェクト名として使われたりもしてる）です。\nそしてこの CommonJS によって実装されたのが Node.js（現在は Node.js は CommonJS の仕様に則ってないらしい）です。",[10,208,209],{},"Node.js の登場に伴ってでてきたのがパッケージマネージャーである npm になります。",[10,211,212],{},"この npm のエコシステムがなかなか流行ったと思っていて、その影響でここで生まれた資産をうまく使いたいからいろいろなツールが利用されているのかな（たぶん）。",[10,214,215],{},"ただし、CommonJS に従って作られたパッケージ（モジュールの集まり）はブラウザ上では使えないです。\nこれをフロントエンドでも使えるしようぜということで出てきたのが RequireJS や browserify、webpack と呼ばれるビルドツールたちです。",[29,217,218],{"id":218},"ビルドについて",[10,220,221],{},"そもそもビルドとはなにか。",[223,224,225],"blockquote",{},[10,226,227,228,230,231],{},"ビルドとは、組み立てる、建てる、築く、作り上げる、などの意味を持つ英単語。ソフトウェアの分野では、プログラミング言語で書かれたソースコードなどを元に実行可能ファイルや配布パッケージを作成する処理や操作のこと。また、組み立てられた実行ファイルなどの特定の版を指す場合もある。",[43,229],{},"\n引用：",[184,232,235],{"href":233,"rel":234},"http:\u002F\u002Fe-words.jp\u002Fw\u002F%E3%83%93%E3%83%AB%E3%83%89.html",[188],"ビルド【 build 】",[10,237,238],{},"JS の開発でビルドツールがこんなにたくさんあるのには以下のようなことが考えられます。",[47,240,241,249,257],{},[50,242,243,244],{},"ブラウザの実装状況に合わせるために過去の JS へのトランスパイル（Babel）\n",[47,245,246],{},[50,247,248],{},"開発は最新の JS でやりたいけど、ユーザの実行環境で動くものを作らないといけないという理由がある",[50,250,251,252],{},"AltJS のトランスパイル\n",[47,253,254],{},[50,255,256],{},"TypeScript のような静的型付け言語で開発したいなどの理由がある",[50,258,259],{},"コードの圧縮（minify）、統合でパフォーマンスを上げる",[10,261,262],{},"いろんな JS、いろんなブラウザが混在していてそれらの互換性を保ちながら開発・提供するにはこういったビルドツールが必要になるのでしょう。",[29,264,266],{"id":265},"commonjs-と-ecmascript-は違うの","CommonJS と ECMAScript は違うの？",[10,268,269],{},"この２つは違うもの。ECMAScript は JS の標準規格（言語仕様）のことで CommonJS はサーバサイド JS の仕様の名前のことを指します。",[10,271,272],{},"ただし、ECMAScript でも CommonJS に該当するものとして ES Modules と呼ばれるモジュール機能が追加されました。",[10,274,275],{},"２つの仕様があってまたややこしいですね。",[29,277,278],{"id":278},"用語まとめ",[47,280,281,292,303,314,325],{},[50,282,283,284],{},"タスクランナー\n",[47,285,286,289],{},[50,287,288],{},"フロントエンドのタスク（トランスパイル、minify、etc.）を自動化するもの",[50,290,291],{},"gulp、Grunt、Webpack などがある",[50,293,294,295],{},"トランスパイラ\n",[47,296,297,300],{},[50,298,299],{},"特定の JS に変換するもの",[50,301,302],{},"Babel や AltJS などが該当",[50,304,305,306],{},"ビルドツール\n",[47,307,308,311],{},[50,309,310],{},"ビルドに必要なツール群",[50,312,313],{},"タスクランナーも含まれる",[50,315,316,317],{},"モジュールバンドラ\n",[47,318,319,322],{},[50,320,321],{},"モジュールをひとまとめにし、依存関係の解決を行う",[50,323,324],{},"Webpack",[50,326,327,328],{},"Polifill\n",[47,329,330],{},[50,331,332],{},"すべてのブラウザが最新の JS に対応しているわけではないので、未対応のブラウザに対しては同じ機能を JS で自ら供給するためのもの",[29,334,335],{"id":335},"感想",[10,337,338],{},"とにかくややこしい！！",[10,340,341],{},"調べてみてわかりましたが想像以上のややこしさです。フロントエンドの複雑化や開発速度が早いと言われていた理由がよくわかりました。",[10,343,344],{},"JS の歴史は各種ツールのバックグラウンドがわかりなかなか面白かったです。また、歴史という切り口で調べていくと自然と JS やツール群の全体像が見えてきて調べやすくなりました。",[29,346,347],{"id":347},"参考",[47,349,350,357,364,371,378,385,392,399,405,412],{},[50,351,352],{},[184,353,356],{"href":354,"rel":355},"https:\u002F\u002Fqiita.com\u002Fmegane42\u002Fitems\u002F2ab6ffd866c3f2fda066",[188],"npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう",[50,358,359],{},[184,360,363],{"href":361,"rel":362},"https:\u002F\u002Fwww.webprofessional.jp\u002Fanatomy-of-a-modern-javascript-application\u002F",[188],"10 年遅れた JavaScript の知識をざっくり 10 分でアップデートしよう",[50,365,366],{},[184,367,370],{"href":368,"rel":369},"https:\u002F\u002Fwww.slideshare.net\u002Fkhit9\u002Fjavascriptjs2016",[188],"キャッチアップ JavaScript ビルド　-\u000b\u000b ビルドから見る JS の今\u002F2016 春",[50,372,373],{},[184,374,377],{"href":375,"rel":376},"https:\u002F\u002Fwww.ideaxidea.com\u002Farchives\u002F2015\u002F02\u002Fjavascript_history.html",[188],"JavaScript と ECMAScript、CommonJS\u002FAMD\u002FBrowserify\u002FRequireJS\u002FWebpack、TypeScript に関する覚え書き",[50,379,380],{},[184,381,384],{"href":382,"rel":383},"https:\u002F\u002Fmedium.com\u002Fjapan\u002F2016%E5%B9%B4%E3%81%ABjavascript%E3%82%92%E5%AD%A6%E3%81%B6%E3%81%A8%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98-b969f5767d7c",[188],"2016 年に JavaScript を学ぶとこんな感じ",[50,386,387],{},[184,388,391],{"href":389,"rel":390},"https:\u002F\u002Fgithub.com\u002Ftakahashiakira\u002Ftech_for_web\u002Fwiki\u002FCommonJS%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E9%81%8B%E7%94%A8",[188],"CommonJS モジュール運用",[50,393,394],{},[184,395,398],{"href":396,"rel":397},"https:\u002F\u002Fyosuke-furukawa.hatenablog.com\u002Fentry\u002F2016\u002F05\u002F10\u002F111102",[188],"ES Modules と Node.js について",[50,400,401],{},[184,402,404],{"href":186,"rel":403},[188],"JavaScript を悪いプログラミング言語だと考えるプログラマーが多いのは何故ですか？",[50,406,407],{},[184,408,411],{"href":409,"rel":410},"https:\u002F\u002Fqiita.com\u002Fchuck0523\u002Fitems\u002F1868a4c04ab4d8cdfb23",[188],"意訳 初学者のための JavaScript モジュール講座 Part1",[50,413,414],{},[184,415,418],{"href":416,"rel":417},"https:\u002F\u002Fqiita.com\u002Fchuck0523\u002Fitems\u002Fc88abe4fac828b7b5f4e",[188],"意訳 初学者のための JavaScript モジュール講座 Part2",{"title":420,"searchDepth":421,"depth":421,"links":422},"",2,[423,424,425,426,427,428,429,430],{"id":31,"depth":421,"text":32},{"id":179,"depth":421,"text":180},{"id":202,"depth":421,"text":203},{"id":218,"depth":421,"text":218},{"id":265,"depth":421,"text":266},{"id":278,"depth":421,"text":278},{"id":335,"depth":421,"text":335},{"id":347,"depth":421,"text":347},"2019-12-31","ReactやVueといったライブラリやフレームワークを使おうとしたときにでてくる用語やツールについてまとめました。JavaScriptまわりは変化も早くツールもたくさんありとにかく複雑です。初心者が全体像を知るにはいい内容ではないのかと思います。",false,"md",{},true,"\u002Fcontents\u002Fjavascript",{"title":5,"description":432},"contents\u002Fjavascript",[441],"JavaScript","\u002Fimg\u002Ftwitter-card.png","jfCpmpKLr_pvmuDWRPAH68lkGaa8NP3L0e2Gebys_lE",[445,449],{"title":446,"path":447,"stem":448,"children":-1},"Is Grep All You Need? Paper Summary","\u002Fcontents\u002Fis-grep-all-you-need","contents\u002Fis-grep-all-you-need",{"title":450,"path":451,"stem":452,"children":-1},"JupyterでインタラクティブなGUI操作","\u002Fcontents\u002Fjupyter_interact","contents\u002Fjupyter_interact",1784936719335]