「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>HTML/CSS/JavaScript]] *目次 [#q148d6b5] #contents *概要 [#vd489801] SaaS開発で調べたJavaScriptについてのメモ。 *[[宣言とデータ型>JavaScriptの宣言とデータ型]] [#ia153e36] *[[比較処理>JavaScriptの比較処理]] [#r2ad66bf] *[[イベント処理>JavaScriptのイベント処理]] [#e311f48f] *[[JSON処理>JavaScriptのJSON処理]] [#ff279ce5] *[[スレッド処理>JavaScriptのスレッド処理]] [#d6ac8bf9] *[[HTML5>HTML5 JavaScript API]] [#w02f087f] *[[エフェクト>JavaScriptのエフェクト処理]] [#k0f136b5] *[[デバッグ>JavaScriptのデバッグ]] [#t24dcd82] *言語系 [#l130e56e] **言語仕様 [#r22c47d7] ***特徴 [#h3504c25] -インタプリタ言語 -動的型言語 -イベント駆動型言語 -プロトタイプベースのオブジェクティブ指向言語 ***[[ECMAScript]] [#d8043fec] 現在のJavascriptの仕様 ***CommonJS [#xe3a8701] CommonJSは、module機能のあるJavaScript ***[[Node.js]] [#q9fc6e24] **前方互換 [#qd15f83d] ***[[Polyfill>Polyfill (JavaScript)]] [#me2ddef5] ***[[modernizr、Respond.js>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20%E3%81%AE%20Modernization#y67baf40]] [#ud04ec3f] 最近のASP.NETのテンプレートに標準同梱されている。 **AltJS [#d11cd6c3] ***[[TypeScript>https://techinfoofmicrosofttech.osscons.jp/index.php?TypeScript]] [#kf4fe370] -Microsoft -変数に型が使える。 ***JSX [#gf642367] -DeNA -ES4やAS3に似た文法をもち、コンパイル後はJavaScriptになる ***Dart [#fabf5f7e] -Google -普及は進まず、2015年にはVMのChrome統合を断念 -[[TypeScript>#kf4fe370]]をGoogle社内の標準プログラミング言語として承認 ***CoffeeScript [#sb380570] -Railsが採用 -ES6が後継扱いで衰退 **トランスパイラ [#z4771853] 新しい文法を使ったソースコードを、~ [[ES3-ES5>#d8043fec]]までの文法に置き換えるソースコード変換ツール。 ***Babel [#f322ef90] [[ES7やES6>#d8043fec]]の構文で書かれたJavaScriptを、~ 現在のブラウザで使用可能なES5に変換。 ***buble [#f66be3e0] ***Traceur Compiler [#x946c8f6] ***Rollup [#fd225c19] *ツール系 [#s9fa0ab7] **パッケージ・マネージャ [#i6813c82] ***[[bower]] [#q9d1cb30] ***[[npm]] [#y99214ea] ***[[Yarn]] [#r0ec834d] **タスク・ランナー [#pec2edb2] 以下のような、諸々の作業を自動化するツール -新JSに対する処理 --新JSのコードを、ブラウザで使えるようにする。 --新JSとは、下記を指している。 ---[[モジュール・バンドラを要するCommonJS>#of6181e9]] ---[[コンパイルを要するAltJS>#d11cd6c3]] ---[[トランスパイラを要するES6・7>#z4771853]] -最小化 -難読化 --ugilify ***[[Gulp]] [#i12160b4] ***[[Grunt]] [#m9245dc4] ***[[npm>#y99214ea]] [#e85d48b8] -[[パッケージ・マネージャ>#i6813c82]]として紹介した[[npm(npm-scripts)>#y99214ea]]が、~ [[タスク・ランナー>#pec2edb2]]としての機能も統合する可能性があるもよう。 -[[Gulp>#i12160b4]]、[[Grunt>#m9245dc4]]に取って代わって、~ 専門性の高いタスクを([[webpack]]やjestなど)に委譲する。 ***参考 [#l7a3e7e6] -[意訳]私がGulpとGruntを手放した理由 - Qiita~ https://qiita.com/chuck0523/items/dafdbd19c12efd40e2de -npm で依存もタスクも一元化する - Qiita~ https://qiita.com/Jxck_/items/efaff21b977ddc782971 **モジュール・バンドラ [#of6181e9] [[CommonJS>#xe3a8701]]のrequire機能(外部モジュール読込)を、~ 階層構造が異なるライブラリを依存ライブラリをバンドルする。 ***browserify [#u16e1dce] ***[[webpack]] [#z8a6be11] [[タスク・ランナー>#pec2edb2]]の要素も含んでいる。 ***rollup [#eba42278] **その他 [#pfc77681] ***[[Express]] [#yff1d559] [[Node.js>#q9fc6e24]]向けの高速で最小限の Web フレームワーク ***ESLint [#zdecbb02] JavaScriptの静的検証ツール -ESLint 最初の一歩 - Qiita~ https://qiita.com/mysticatea/items/f523dab04a25f617c87d *ライブラリ、フレームワーク系 [#m13d5905] **ライブラリ [#qba41cc7] ***prototype.js [#vad3f37c] -ライブラリ -オブジェクト指向のクラスと継承の機能を提供 -Prototype JavaScript Framework - Wikipedia~ https://ja.wikipedia.org/wiki/Prototype_JavaScript_Framework ***[[jQuery]] [#u9783154] -ライブラリ -実績多数 -Bootstrapなど有名所が依存 **MV* UIフレームワーク [#l66057b9] ***Backbone.JS [#ub2e8c93] -[[CoffeeScript>#sb380570]]の作者 -Model–view–presenter(MVP) -Backbone.js - Wikipedia~ https://ja.wikipedia.org/wiki/Backbone.js ***KnockoutJS [#j66996af] -Microsoft -Model-View-ViewModel (MVVM) -KnockoutJS - Wikipedia~ https://ja.wikipedia.org/wiki/KnockoutJS ***[[React]] [#s4081e43] -Facebook、Instagram -Component志向のMVC -・・・。 ***AngularJS [#ac831ebe] -Google -MVCおよびMVVM --宣言型プログラミング --MVCおよびMVVMアーキテクチャ --"MVC" アーキテクチャにおけるスコープ --双方向データ結合 -AngularJS - Wikipedia~ https://ja.wikipedia.org/wiki/AngularJS ***Vue.js [#o9dc5e69] ***比較 [#z7987c5e] -AngularJS vs Knockout.js vs Vue.js vs Backbone.js Frameworks~ https://www.altexsoft.com/blog/engineering/angularjs-vs-knockout-js-vs-vue-js-vs-backbone-js-which-framework-suits-your-project-best/ -【2017年版】JavaScriptのフレームワーク比較とニーズの高まり|フリエン~ https://furien.jp/columns/187/#2-1 -ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog~ https://techblog.yahoo.co.jp/advent-calendar-2018/yahoo-frontend/ >大規模サービスはReact、社内システムはAngularらしい。Vueは小規模向けなのだろうか? -POSTD --JavaScriptのフレームワークについて検討してみよう~ https://postd.cc/javascript-framework-fatigue/ --JavaScriptフレームワークのコストを考える~ https://postd.cc/the-cost-of-frameworks/ *その他 [#pd4005a5] **UIライブラリ [#d722853a] ***scheduler and events calendar [#b616969e] -Top 5 : Best jQuery scheduler and events calendar for web applications | Our Code World~ https://ourcodeworld.com/articles/read/55/top-5-best-jquery-scheduler-and-events-calendar-for-web-applications -シフト系は、また、違うようで、JS系では厳しいかもしれない。 --https://www.pro-system.co.jp/products/kinnmu/ver7_new.html *参考 [#k43384ff] **歴史 [#t1bee751] -JavaScript - Wikipedia~ https://ja.wikipedia.org/wiki/JavaScript -Javascriptの歴史~ https://www.slideshare.net/ssuser4be374/javascript-58886880 ***Qiita [#p3f988a2] -Javascriptの歴史~ https://qiita.com/a_rcsin/items/0a3c8c98c8d703c49a22 -JavaScriptの歴史をざっくりまとめたよ!~ https://qiita.com/Mic-U/items/c900a6f62862954d62e0 -JavaScriptが辿った変遷~ https://qiita.com/naoki_mochizuki/items/cc6ef57d35ba6a69117f **昨今 [#q19768fc] ***トレンド [#d2a644b2] -人気上昇中のJavaScriptライブラリを調べてみた - Build Insider --【2014年版】~ http://www.buildinsider.net/web/popularjslib/2014 --【2015年版】~ http://www.buildinsider.net/web/popularjslib/2015 --【2016年版】~ http://www.buildinsider.net/web/popularjslib/2016 ***ツール類 [#z34ab455] -レトロエンジニアのための近代Webフロントエンド事情 - Qiita~ https://qiita.com/uctakeoff/items/ce8da368d020273c6064 -HTML/JavaScript開発作業を効率化する便利ツールの活用連載一覧:CodeZine(コードジン)~ https://codezine.jp/article/corner/578 ***今風の書き方 [#ff6801b9] -古い感じがしてかっこわるいと思うコードの書き方10例|Webpark~ http://weboook.blog22.fc2.com/blog-entry-272.html --1. フレームを使っている --2. centerタグを使っている --3. レイアウトにテーブルを使っている --4. タグが大文字 --5. 改行を連続して使っている --6. 全角スペースで横の間隔を調整している --7. リストを使っていない --8. bodyタグに要素を指定している --9. ワンポイントの画像にimgタグを使っている --10. border等を一括で指定していない -旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 - Qiita --Section1 ~すぐにでも現代っぽく出来るワンポイントまとめ~~ http://qiita.com/gaogao_9/items/ec2b867d6941173fd0b1 --Section2 ~CommonJSモジュールと仲良くなろう~~ http://qiita.com/gaogao_9/items/190f4b52d6876f0b8d8a --Section3 ~Browserifyをマスターしよう~~ http://qiita.com/gaogao_9/items/0b4bf5cd6416347b3b52 --Section4 ~Gulpで処理を自動化しよう~~ http://qiita.com/gaogao_9/items/d4e23de821d0fd78c13d --Section5 ~ES2015文法を覚えよう(前編)~~ http://qiita.com/gaogao_9/items/18b20ad9b76c9c81b5fa