DNET_JavaScript

JavaScript

• 戻る（HTML/CSS/JavaScript）

概要

SaaS開発で調べたJavaScriptについてのメモ。

書き方

基本

宣言とデータ型

JavaScriptの宣言とデータ型

比較処理

JavaScriptの比較処理

イベント処理

JavaScriptのイベント処理

JSON処理

JavaScriptのJSON処理

応用

スレッド処理

JavaScriptのスレッド処理

エフェクト

JavaScriptのエフェクト処理

言語系

言語仕様

特徴

• インタプリタ言語
• 動的型言語
• イベント駆動型言語
• プロトタイプベースのオブジェクティブ指向言語

ECMAScript

ECMAScript

現在のJavascriptの仕様

CommonJS

CommonJSは、モジュール機能
（JavaScriptライブラリの作り方の該当節を参照）の
あるJavaScript

Node.js

Node.js

Node.js拡張仕様が事実上のCommonJS

Deno

Deno

Node.jsの製作者であるRyan Dahlによる、新しいJavaScript/TypeScriptランタイム。

前方互換

Polyfill

Polyfill (JavaScript)

modernizr、Respond.js

ASP.NET の Modernizationの該当節を参照。

最近のASP.NETのテンプレートに標準同梱されている。

AltJS

TypeScript

TypeScript

• Microsoft
• 変数に型が使える。

JSX

• DeNA
• ES4やAS3に似た文法をもち、
• コンパイル後はJavaScriptになる

※ ReactのUI定義のJSX（Reactの該当節を参照）とは異なる。

Dart

Dart

• Google
• JavaScriptの代替となることを目的に作られた。

CoffeeScript

• Railsが採用
• ES6が後継扱いで衰退

トランスパイラ

新しい文法を使ったソースコードを、
ES3-ES5までの文法に置き換えるソースコード変換ツール。

Babel

ES7やES6の構文で書かれたJavaScriptを、
現在のブラウザで使用可能なES5(JavaScript)に変換。

buble

Traceur Compiler

Rollup

ツール系

パッケージ・マネージャ

bower

bower

npm

npm

Yarn

Yarn

タスク・ランナー

以下のような、諸々の作業を自動化するツール

• 新JSに対する処理

  • 新JSのコードを、ブラウザで使えるようにする。

  • 新JSとは、下記を指している。

    • モジュール・バンドラを要するCommonJS
    • コンパイルを要するAltJS
    • トランスパイラを要するES6・7

• 最小化

• 難読化

  • ugilify

Gulp

Gulp

Grunt

Grunt

npm（タスク・ランナー）

• パッケージ・マネージャとして紹介したnpm(npm-scripts)が、
  タスク・ランナーとしての機能も統合する可能性があるもよう。

• Gulp、Gruntに取って代わって、
  専門性の高いタスクを(webpackやjestなど)に委譲する。

参考（タスク・ランナー）

• [意訳]私がGulpとGruntを手放した理由 - Qiita
  https://qiita.com/chuck0523/items/dafdbd19c12efd40e2de
• npm で依存もタスクも一元化する - Qiita
  https://qiita.com/Jxck_/items/efaff21b977ddc782971

モジュール・バンドラ

CommonJSの外部モジュール
（JavaScriptライブラリの作り方の該当節を参照）を
バンドルする。

Browserify

JavaScriptライブラリの作り方の該当節を参照。

webpack

webpack

タスク・ランナーの要素も含んでいる。

• 参考

  • npmとwebpackでビルド - jQueryからの次のステップ - Qiita

    • [旧記事]webpack3
      https://qiita.com/civic/items/9f6d973839d2a1c99ac9

    • webpack4
      https://qiita.com/civic/items/82c0184bcadc50965f91

むずかしくないJavaScriptのやさしい話
jQueryからの次のステップ #ndsmeetup8
https://www.slideshare.net/fbcivic/javascript-ndsmeetup8

rollup

その他（ツール系）

Express

Express

Node.js向けの高速で最小限の Web フレームワーク

ESLint

JavaScriptの静的検証ツール

• ESLint 最初の一歩 - Qiita
  https://qiita.com/mysticatea/items/f523dab04a25f617c87d

ライブラリ、フレームワーク系

ライブラリ

prototype.js

• ライブラリ

• オブジェクト指向のクラスと継承の機能を提供

• Prototype JavaScript Framework - Wikipedia
  https://ja.wikipedia.org/wiki/Prototype_JavaScript_Framework

jQuery

jQuery

• ライブラリ
• 実績多数
• Bootstrapなど有名所が依存

HTTP Client

JavaScript の HTTP Client

(MV*) UIフレームワーク

(MV*) UIフレームワーク

Backbone.JS

KnockoutJS

React

React

AngularJS

Vue.js

Vue.js

• SVGとVue

UIライブラリ

scheduler and events calendar

• 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

, etc.

JavaScriptライブラリの作り方

JavaScriptライブラリの作り方

その他

HTML5

HTML5 JavaScript API

デバッグ

JavaScriptのデバッグ

参考

歴史

• JavaScript - Wikipedia
  https://ja.wikipedia.org/wiki/JavaScript

• Javascriptの歴史
  https://www.slideshare.net/ssuser4be374/javascript-58886880

Qiita（歴史）

• Javascriptの歴史
  https://qiita.com/a_rcsin/items/0a3c8c98c8d703c49a22
• JavaScriptの歴史をざっくりまとめたよ!
  https://qiita.com/Mic-U/items/c900a6f62862954d62e0
• JavaScriptが辿った変遷
  https://qiita.com/naoki_mochizuki/items/cc6ef57d35ba6a69117f

昨今

トレンド

• 人気上昇中の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

ツール類

• レトロエンジニアのための近代Webフロントエンド事情 - Qiita
  https://qiita.com/uctakeoff/items/ce8da368d020273c6064

• HTML／JavaScript開発作業を効率化する便利ツールの活用連載一覧：CodeZine（コードジン）
  https://codezine.jp/article/corner/578

今風の書き方

• 古い感じがしてかっこわるいと思うコードの書き方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

移行メモ：マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への リンクは、移行済みの MS_ASPNETModernization / MS_TypeScript に張り替えた。

• 元 Wiki では子ページ「SVGとVue」への導線が無かった（子ページ側の「戻る」だけが当ページを指していた）ため、 移行後に当ページからのリンクを補った。

---

Tags: 移行, JavaScript, ECMAScript, AltJS, npm, webpack, SPA, フロントエンド