![退会済みユーザー](https://ddjkaamml8q8x.cloudfront.net/profileImages/deletedUser/icnUserSample.jpeg)
現在Webアプリをcoffeescript + jQueryで書いているのですがそろそろES6で書いても問題ないのでしょうか?
問題ないとしたらcoffeescriptで書いている部分をES6で書き換えようと思っています。
ES6が対応していないブラウザはIE11以下ですが、作ってるアプリはIE11は対応しない予定です。
Webアプリの使用ブラウザは最新Chrome、firefoxで、SafariとEdgeも一応対応するという想定です。
またPC用ブラウザ向けのWebアプリなのでモバイル向けブラウザは想定していません。
ちなみにjQueryは3.2.1を使っていますがソースはES5なのでしょうか?
jQuery用プラグインなど、ES6で書かれていなくてもES6やES5などの混在は可能なのでしょうか?
また最近はTypeScriptが流行っていますが、これはIE11以下もターゲットにしているためにTypeScriptをみんな使っているのですか?
私のようにIE11を対応しないと決めていたらTypeScriptでなくてもよいのでしょうか?
どうぞよろしくお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
![guest](/img/icon/icnUserSample.jpg)
回答3件
0
ベストアンサー
各ブラウザの対応状況は下記サイトで確認できます。
ECMAScript 6 compatibility table
Edge、Firefox、Chrome、Opera、Safariの最新版はほぼ対応していますが、一部対応していない機能(ESモジュールimport
/export
など)もあることに注意して下さい。同じサイトの2016+の部分をクリックすると、ES2016、ES2017、ES2018(来年正式制定予定)の機能についても対応状況を確認できます。
ES6はES5と互換性を持っています。ES6環境であってもES5のコードはそのまま動きますので、混在は可能です。ES5時代のライブラリも継続して使用できます。ES6の書き方をしたからと言ってjQueryが動かなくなるわけではありません。
さて、上記を踏まえて何を使うべきか…**ここからは私の独断と偏見です。**下記についてマサカリを投げられるぐらいであれば、何を使うべきかは自ずと見えてくるでしょう。
###お勧めランキング6位 ECMAScript 今年+stage 1-4 & Babel
あなたのJavaScriptはES6(ES2015)で満足していませんか?ES6で十分というあなたは、まだES6を使いこなしていません。ES6ができた2015年の段階ではまだまだ妥協した内容です。ES6にはまだ足りない物がたくさんあります。ES2016、ES2017で多少足されたと言っても、それで満足してはいけません。
最新を追うなら、常に最新であるべき…という考えの基で、正式採用前でも新しい機能を使っていきましょう。全てとは言いませんが、Babelでトランスパイルすればどのブラウザでも動かすことができます。ECMAScriptの規格制定はTC39プロセスによって決まっており、stage 0(アイデア)→stage 1(提案)→stage 2(草書)→stage 3(候補)→stage 4(採用)となっています。stage 4となった段階で次の仕様書に書き込まれることが決定するという物です。stage 4は使っても問題ありません。stage 3はほぼ大丈夫です。stage 2はまぁ大丈夫じゃないかな。stage 1は大丈夫だと信じたい。stage 0はカオス。となっています。でも、勇気を持ってstage 1あたりから使うぐらいで無いと「俺はJavaScriptの最新を言っている」とは言えないでしょう。
###お勧めランキング5位 TypeScript
流行っているから。それ以外に理由は無い。※
※ 本当はちゃんと理由がありますが、それを語るだけで回答の文字数が制限を超えるので、省略します。
###お勧めランキング4位 Flow
JavaScript
1// @flow 2function upper(x) { 3 return x.toUpperCase(); 4} 5const s = ["JavaScript"]; 6console.log(upper(s));
上のコードには間違いがあります。たぶん、upper()
関数はstringを受け取りたかったのでしょうが、Arrayを渡してしまっています。このようなコードであっても、Flowはエラーを検知してくれます。
Error: test.js:3 3: return x.toUpperCase(); ^^^^^^^^^^^ property `toUpperCase`. Property not found in 3: return x.toUpperCase(); ^ Array
素晴らしい!ライセンスもBSD PatentからMITに変わり、何の憂慮もありません。
ついでにいうと、**TypeScriptは何も言わずにそのまま変換します。**なんていけてないんだ!
なお、型アノテーションをコメントスタイル以外で書く場合はBabelでの変換が必要になります。
###お勧めランキング3位 CoffeeScript 2
CoffeeScriptがオワコンだって?どうやら君のJavaScript界隈の情報は2017年9月18日より前で止まっているようだな。
ES5→ES6と同じくCS1→CS2とアップしました。Qiitaに記事書いちゃったので詳しいことはここでは言いませんが、CoffeScriptが(やっと)ES6以降に対応したという感じです。(私は何の貢献もしてませんが)長く、苦しい、戦いだった…せめて2年前にこれが出てくれていたら。
嫌われているプログラミング言語ランキング3位入賞CoffeeScriptというのがありますが、あれはCS1のことであり、CS2はノーカンです。ES5とES6を別々に統計していたら、きっと上のランキングの1位はES5になったに違いありません!
###お勧めランキング2位 PureScript
JavaScriptは関数型プログラミング言語だという人達がいますが、**それは嘘です。**本当の関数型プログラミング言語を知れば、JavaScriptがいかに駄目かは理解できるでしょう。mutableばかりだし、モナドはないし、リストやストリーム処理もライブラリの力を借りないと凝ったことが全然できない。本当にないないづくしです。ライブラリ無しで関数型プログラミングをしようなんてしたら、動作を補助する自作の関数だらけ(つまりライブラリがやっていること)になって、複雑怪奇なコードができがあるでしょう。
そんなあなたにこそお勧めしたいのが純数関数型プログラミング言語であるPureScriptです。簡単に言うとほぼHaskellです。細かい違いはあるのですが、ダック・テストの精神に基づき、
If it is coded like a Haskell and is evaled like a Haskell, it must be a Haskell.
という指針を与えれば、PureScriptはHaskellです。ようこそ、純粋な世界へ!全ては不変であり、参照透過です!
###お勧めランキング1位 Opal
全部Rubyにすれば問題ないんだよ。
真面目な話に戻しますと、1位と2位以外はそれぞれ調べておく価値があります。それぞれ一長一短があり、「全ての場合において○○を使えばいい」とはならないと考えています。
投稿2017/10/07 01:44
編集2017/10/07 01:50総合スコア21739
0
「ES2015(以下ES6と表記)で書きたい?ほぼ対応しているから大丈夫でしょ〜」
…という楽観的な回答を拾ってプロジェクトが大ハマリしても誰も責任とれないよ。
参考URL: ECMAScript 6 compatibility table
責任は取れない上で見解を述べるなら、
ハマりポイントは殆どなくて、一部Edge等が弱い箇所を気をつければ十分移行して良いレベルだと思う。
jQueryは3.2.1を使っていますがソースはES5なのでしょうか?
そうだね。
jQuery用プラグインなど、ES6で書かれていなくてもES6やES5などの混在は可能なのでしょうか?
ES5とES6の混在は可能。
そもそもES6はES5から予約語や関数が増えた程度で、元々の言語仕様から全くといっていいほど変化してないよ。
自分が使いたいと感じた分だけES6の機能を使えばいい。
こんな風にバリバリのES6的な書き方をしつつ、ES5のライブラリのjQueryを操る事も可能。
JavaScript
1(($) => { 2 const bbb = $('div.aaa').find('.bbb'); 3 bbb.on('click', (e) => console.log(e)); 4})(jQuery)
また最近はTypeScriptが流行っていますが、これはIE11以下もターゲットにしているためにTypeScriptをみんな使っているのですか?
NO
ES6の書き方をしたいだけのWebエンジニアは昔からBableを使ってES5にトランスパイルしてた。
だから本質的な所で言えば違うわけだね。
対するTypeScriptはメイン機能は型安全を意識した大規模開発。
それだけじゃ理由が薄いからいち早くES6の機能を取り入れてBetterJSの地位も築いたんだ。
でも当時は動作しないブラウザも多かったのでES5にトランスパイルするから安全に書けるという所を主張にしたわけだね。
何故TypeScript流行っていったのか箇条書きにしてみたよ。
こうすることでWebエンジニア達が何に惹かれてTypeScriptにやってきたのかが分かるね。
- SPAの流行: AngularJS等のJSフレームワークの台頭
- JSの領域拡大: PHPやRubyがやってた領域をJSが受け持つことに
- JSの大規模開発化: つまりJSのコード量が増えるわけだよね
- TSに注目が集まる: 大規模開発するなら型の安全性欲しい、MSが公式採用しているTypeScriptがある
- 有名ライブラリがTSを採用: Angular4やReact.jsがTypeScript推奨している
- 対応IDEやエディタが増えた: デフォルトでVisualStudioやVS Code対応しているし便利
私のようにIE11を対応しないと決めていたらTypeScriptでなくてもよいのでしょうか?
これは前提条件が誤りだから微妙な質問になってる気がするけど、
例えばIE11でも対応しているSPA用のJSフレームワークは多く存在していて、
大規模なSPAを構築するためにTypeScriptを採用しているような事例もあるね。
jQueryと対応プラグインで事足りているなら大規模ってわけでもないし不要じゃないかな?
でもまぁ、JSファイルを分割して作っておいて、
WebpackやBrowserifyを利用して、関数等の単位で区切ったJSファイルを結合して1つにまとめるってテクニックは小規模開発でも有効だから、
そのついでにBabelで変換掛けたり、TypeScriptのような流行ってるAltJSを採用するのもありだと思うよ。
投稿2017/10/07 00:55
編集2017/10/07 01:57総合スコア21216
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
![退会済みユーザー](https://ddjkaamml8q8x.cloudfront.net/profileImages/deletedUser/icnUserSample.jpeg)
![guest](/img/icon/icnUserSample.jpg)
0
CoffeeScriptはブラウザネイティブで実行できないのでコンパイラが必要ですが、ES6もBabelなどのコンパイラを使って従来のES5に変換できますので、IE 9以上ならそれで対応できます。
また、JavaScriptは「Don't break the web」を念頭に開発されており、ES6特有の型(Symbol
、Promise
、Map
など)を除けばES5と混ぜても問題は起こりません。
投稿2017/10/06 23:15
総合スコア146270
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
![退会済みユーザー](https://ddjkaamml8q8x.cloudfront.net/profileImages/deletedUser/icnUserSample.jpeg)
退会済みユーザー
2017/10/06 23:21
![guest](/img/icon/icnUserSample.jpg)
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/07 09:26