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

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

ただいまの
回答率

90.75%

  • JavaScript

    15274questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 7,838
退会済みユーザー

退会済みユーザー

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+7

各ブラウザの対応状況は下記サイトで確認できます。

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

// @flow
function upper(x) {
  return x.toUpperCase();
}
const s = ["JavaScript"];
console.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 18: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のアセットパイプラインで順番に読み込んでいます。

    キャンセル

+5

「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を操る事も可能。

(($) => {
  const bbb = $('div.aaa').find('.bbb');
  bbb.on('click', (e) => console.log(e));
})(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 18:35

    ありがとうございます。

    > という楽観的な回答を拾ってプロジェクトが大ハマリしても誰も責任とれないよ

    まさにそれが聞きたくて質問させていただきました。

    > 対するTypeScriptはメイン機能は型安全を意識した大規模開発

    そういうことなんですね。
    現在作成しているのはそれほど大規模でもなくSPAでもないです。中規模程度です。

    > jQueryと対応プラグインで事足りているなら大規模ってわけでもないし不要じゃないかな?

    はい。本当はVueやReactJSなどのフレームワークを使えば良いのでしょうが、学習している時間がちょっとないのと、なんとなく非同期で処理している部分がハマりポイントになりそうで採用に躊躇しています。

    > でもまぁ、JSファイルを分割して作っておいて、
    > WebpackやBrowserifyを利用して、関数等の単位で区切ったJSファイルを結合して1つにまとめるってテクニックは小規模開発でも有効だから、
    > そのついでにBabelで変換掛けたり、TypeScriptのような流行ってるAltJSを採用するのもありだと思うよ。

    現在はclass別にファイルを別けてrailsのアセットパイプラインでつなげています。Visual Studio CodeのIntelliSenseは機能するのですがcoffeescriprでは定義ファイルに飛ぶ機能などがないのでTypeScriptは開発しやすそうだなあという印象から調べてみたら型定義ファイルのところで躓いてしまいました。

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/07 08:21

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

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    どのaltJSがおすすめですか?

    javascriptの弱点を補うため、コンパイルするとjavascriptになる言語を総称してaltJSと言うそうですが、みなさんはどのaltJSがおすすめですか? 漠然とした質

  • 解決済

    TypeScript と CoffeeScript

    TypeScript と CoffeeScript どちらを使うか迷ってます それぞれの違いやメリット、デメリットがあれば教えてくださいませんか? よろしくお願いします

  • 受付中

    CoffeeScriptの返り値の自動設定について

    最近、JavaScriptでの開発にCoffeeScriptを使うようになりました。 そして気になったことがあるのですが、CoffeeScriptは、Rubyのように自動で最後の

  • 解決済

    coffeescript 「with」についてのエラー

    前提・実現したいこと 試したこと 課題に対してアプローチしたことを記載してください 補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報

  • 解決済

    typescriptでjQueryのtoggleを使う時、前後のfunctionの記述の仕方

    typescriptでjQueryのtoggleを使う時、下記のようにjsで書くものをtsにする場合はどのように記述すればよいでしょうか? $('#hoge').toggle(f

  • 解決済

    cdn読み込まれない?

    前提・実現したいこと ページの読み込みが早くなると聞いて、CDNというものを利用しています。 発生している問題・エラーメッセージ ページの読み込みが早くなると聞いて、C

  • 受付中

    tsd install jqueryで結果がzero results

    MacでTypeScriptを使うために環境を構築しています。 tsd install jqueryでjqueryを入れようと思ったのですが、zero resultsとなりました。

  • 解決済

    TSでgetElementsByClassNameで取得した値からinnerTextができない。

    getElementByidではinnerTextが使えますが、 getElementsByClassNameではinnertextがエラーになります。 WebStormを使用

同じタグがついた質問を見る

  • JavaScript

    15274questions

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