質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

5418閲覧

そろそろES6で書いても大丈夫ですか?

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2グッド

6クリップ

投稿2017/10/06 23:01

編集2017/10/06 23:02

現在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でなくてもよいのでしょうか?

どうぞよろしくお願い致します。

NightitWy, hujyorom👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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
raccy

総合スコア21735

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/10/07 09:26

ありがとうございます。自分が求めていた以上の回答で感謝致します! coffeescriptはruby on rails5.1で使い始めたのですがaltJSやES6などを調べていくうちに、今の時期にどのaltJSを使えばいいか、またはES6をそのまま使ってしまえば良いのか、情報が多すぎるのとraccyさんもおっしゃっているように古い記事でかなり迷ってしまいました。 TypeScriptは型定義ファイルを作成しないといけないようで、jQueryは用意されているとは思うのですがjQueryプラグインを使う場合は自分で作らないといけないとのことで、そのこともよくわからずにいました。 今のところcoffeescriptで作ってはいるのですが、Visual Studio CodeでF12などで定義に飛ぶ機能などが用意されておらず、そのへんはTypeScriptはMSが作っているので開発側で便利そうだなという印象でした。 しかし型定義ファイルのことを考えると敷居が高くなるのと、途中で開発が停止しないか微妙だったのでスルーしようとしていて、そこでES6をそのまま使うのは時期的に良いのかと思って質問させていただきました。 現在はcoffeescriptをclass毎にファイルを別けてrailsのアセットパイプラインで順番に読み込んでいます。
guest

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にやってきたのかが分かるね。

  1. SPAの流行: AngularJS等のJSフレームワークの台頭
  2. JSの領域拡大: PHPやRubyがやってた領域をJSが受け持つことに
  3. JSの大規模開発化: つまりJSのコード量が増えるわけだよね
  4. TSに注目が集まる: 大規模開発するなら型の安全性欲しい、MSが公式採用しているTypeScriptがある
  5. 有名ライブラリがTSを採用: Angular4やReact.jsがTypeScript推奨している
  6. 対応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
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/10/07 09:35

ありがとうございます。 > という楽観的な回答を拾ってプロジェクトが大ハマリしても誰も責任とれないよ まさにそれが聞きたくて質問させていただきました。 > 対するTypeScriptはメイン機能は型安全を意識した大規模開発 そういうことなんですね。 現在作成しているのはそれほど大規模でもなくSPAでもないです。中規模程度です。 > jQueryと対応プラグインで事足りているなら大規模ってわけでもないし不要じゃないかな? はい。本当はVueやReactJSなどのフレームワークを使えば良いのでしょうが、学習している時間がちょっとないのと、なんとなく非同期で処理している部分がハマりポイントになりそうで採用に躊躇しています。 > でもまぁ、JSファイルを分割して作っておいて、 > WebpackやBrowserifyを利用して、関数等の単位で区切ったJSファイルを結合して1つにまとめるってテクニックは小規模開発でも有効だから、 > そのついでにBabelで変換掛けたり、TypeScriptのような流行ってるAltJSを採用するのもありだと思うよ。 現在はclass別にファイルを別けてrailsのアセットパイプラインでつなげています。Visual Studio CodeのIntelliSenseは機能するのですがcoffeescriprでは定義ファイルに飛ぶ機能などがないのでTypeScriptは開発しやすそうだなあという印象から調べてみたら型定義ファイルのところで躓いてしまいました。
guest

0

CoffeeScriptはブラウザネイティブで実行できないのでコンパイラが必要ですが、ES6もBabelなどのコンパイラを使って従来のES5に変換できますので、IE 9以上ならそれで対応できます

また、JavaScriptは「Don't break the web」を念頭に開発されており、ES6特有の型(SymbolPromiseMapなど)を除けばES5と混ぜても問題は起こりません。

投稿2017/10/06 23:15

maisumakun

総合スコア145183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/10/06 23:21

早速のご回答ありがとうございます。 IEはサポートしない予定なのでBabelなどのコンパイラを使わないでそのままES6として使おうと考えています。 しかしjQueryを併用するとなるとES6特有の型が使えないのでES5に変換が必要になってくる感じでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問