初心者でもストレスなく学べるES6とは?

このQ&Aのポイント
  • 初心者も初めからES6で始めてしまった方が良いのか、babelを使えばES6で開発できるため、文法なども古いJSと比べて非常に良いと言われています。
  • ES6を使うことで記述量が減り、jqueryなしで十分短くかけるため、ES6に切り替えるメリットがあります。
  • 初心者向けのES6の本やサイトは少ないですが、たにぐちまことの「よくわかるjavascriptの教科書」や「改訂新版JavaScript本格入門」などが参考になります。
回答を見る
  • ベストアンサー

初心者も初めからES6で始めてしまった方が良い?

今はbabelを使ってES6でもかけるので、文法なども古いJSと違いとても良いという話を聞きます。 私のような初心者も初めからES6で始めてしまった方が良いのでしょうか? ただ初心者用のサイトや本はES6でもうありますか? そしてES6になったからと言って、やはりライブラリを使わないととんでもない量の記述をしないと jqueryのようにちょろっと書いただけで色々できるというわけでは相変わらずないのですかね? ES6があれば、記述量もだいぶ減ったのでjqueryなしでES6だけでも十分短くかけるのでこちらのみで他は必要ないとも聞きました。 もしそうならすぐに切り替えてしまおうかなと思っています。 たにぐちまことのよくわかるjavascriptの教科書を読んだ私くらいでは下記でいきなりES6に移るというのは難しいですかね? 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 大型本 – 2016/9/30 大丈夫そうなら重そうな本なので持ち歩きが厳しそうですが、こちらを買って、 すぐにこちらに移っても良いかなと思いました。 またES6の本やサイトで初心者用が見当たらない気がするのですが、 良い本やサイトをもしご存知でしたら教えていただければありがたいです。 人によって意見が違うと思うので、いろいろなひとに聞いています。

noname#226032
noname#226032

質問者が選んだベストアンサー

  • ベストアンサー
  • catpow
  • ベストアンサー率24% (620/2527)
回答No.1

うーん、なかなか難しいところですよね。 Javaではありませんが、C#の世界においても、どんどんライブラリやフレームワークの新しいものが作られています。 ES6と同様に、やりたいことがコードの記述量が少なくても実現でき、さらに少ない記述になるからバグが入り込む可能性も減る、と・・・。 でも、サンプル的なものはいいけど、自分がホントに作りたいアプリを作ろうとしたとき、それが使えるかどうかでしょうね。 たぶん、それが判断できるようになるには、それなりに使い込まないとダメな気がします。 それに入れ込んで頑張っていたら、半年後、もっと良いものが生まれて、そちらが主流になっているってこともあります。 Javaの世界では、こんなことがここ3,4年続いているのではないでしょうか? もう自分の感性、勘を頼りに、「これは流行っているけど、先がなさそう」「これは、しばらく生き延びるだろう」という判断をするしか無いと思います。

noname#226032
質問者

お礼

javascriptの世界は特に進歩が異常なので、reactなどがまさに今やっても将来なくなってしまうかもしれないということでしょうね。 ただES6はJSそのものなのでなくなることは十分ないですよね。 十年後はgo言語になっているかもしれないですが、それは問題ないので。 ES6で生のJSもとっていいと思うのですが、問題はやはりあまりに記述量が多かったり、jqueryのように学習コストが低くない部分のみが引っかかります。そこさえなければ間違いなく一番無難な選択だと思うんですがね。 ただreactのようにフレームワークを使ってサーバサイドも、ネイティブアプリ制作もできるわけではないですがね。

noname#226032
質問者

補足

ES6の教科書でいいものは、 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで しかまだ出版されていないのでこれを購入するしかないですかね。 英語のPDFの無料で公開されているものもあるようですが和訳されていませんよね。

関連するQ&A

  • javascriptとjQueryについて

    初心者の質問で申し訳ないのですが回答してもらえるとうれしいです。 つい先日、書店に行ったとき新刊でjavascriptの入門書みたいな本がでておりふと疑問に思ったことがあります。 javascriptのライブラリの一つでjQueryという誰でも簡単にjavascriptと同じ動作ができるものがあるのになぜjavascriptを学んでもらうための本が今更出ているのだろうと思いまいした。 たしかにjQueryももとをたどればjavascriptといえると思うのですがそれなら初めからjQuery入門書をだしたほうがいいのではないかと思います。 私自身まだまだ無知なので本当はこういうことというのがありましたら教えてください。

  • 複数のjQueryを使用するときの記述の仕方

    今、こちらのjQueryと http://jsajax.com/Articles/jQueryLavaLamp3/1083 こちらのjQueryを http://www.css-lecture.com/log/javascript/039.html 同じページ内で使用しようとしています。 記述は以下の通りです。 ---------------------------------------------------- <!-- ▼前者のjs --> <script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script src="js/jquery.easing.min.js" type="text/javascript"></script> <script src="js/jquery.lavalamp.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#lavaLamp").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script> <!-- ▼後者のjs --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript" src="js/main/jquery.cycle.js"></script> <script type="text/javascript" src="js/main/slideshow.js"></script> このように記述しても後者のものしか動きません。 前後逆にすると前者が動きます。 以前の質問でjQueryのファイルには記述する順番があるとお答えを頂いたのですが、 調べても初心者の私には理解できず・・・。 こちらのファイルを同時に使用するにはどのような順番で記述したら宜しいのでしょうか? 大変困っております、どうか宜しくお願い致します。

  • javascriptファイルは1つに統合できますか

    javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 <現状> <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか? (単純に1箇所にコピー&ペーストするようなイメージで) お手数ですが、ご教示のほど、宜しくお願い致します。

  • 初心者です。あまりに初歩的なことなのではずかしいのですが教えて頂けます

    初心者です。あまりに初歩的なことなのではずかしいのですが教えて頂けますと幸いです。 本を片手にjQueryを勉強し始めました。(JavaScriptの初歩は勉強しました。) jQueryを記述したものを『script.js』という外部ファイルで保存し、htmlファイルにリンクし参照させています。 ブラウザでテストしてみたところ、きちんと動作します。 ただ、『script.js』ファイルを開こうとクリックするとWindows Script Hostのエラーウィンドウ「エラー:文字が正しくありません」 と表示されてしまいます。 文字コードや全角スペースが混ざっていないか等、色々と試しましたが相変わらずエラーで困っています。 外部ファイルに記述、というのが理解不足の初心者には難しいのかとも思うのですが…。 htmlファイルのソースは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample1</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="script.js" charset="UTF-8"> </script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> </body> </html> また、問題の『script.js』ファイルは以下のように記述しています。 $(function(){ $("li").css("color","red"); });

  • jQueryプラグイン、サーバー上だと動かない。

    こんにちは。 このたび制作しているWEBサイトにjQueryプラグインのprettyphotoを実装したいのですが、ローカルの環境では問題なく動いてくれるのですが、サーバーにアップしたとたんにエラーがでてしまいまったく動いてくれません。 <head>内のスクリプトの記述は <script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/prettyphoto/js/jquery-1.6.1.min.js"></script> <script src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); </script> という感じです。 ※そのほか直前にprettyphotoのCSSは読み込んでおります サーバーにアップしたページのソースをみてみるとCan't find variable:$というメッセージがでていたのでプラグインの記述を (function($){ // $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); }(jQuery)); // にしてみてもCan't find variable:jQueryというメッセージがでてきてしまいます。 こちらもともとテンプレートであったサイトを改変しているものなので、このほかHTML後半部分にもいろいろjavascriptの記述があります。以下となります。 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script> <script type="text/javascript" src="js/jquery.validate.pack.js"></script> <script type="text/javascript" src="js/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <!-- super fish js include --> <script type="text/javascript" src="js/superfish/js/superfish.js"></script> <script type="text/javascript" src="js/superfish/js/hoverIntent.js"></script> <script defer src="js/plugins.js"></script> <script defer src="js/script.js"></script> レイアウトが崩れないようひとつひとつとりはずしてみたのですがprettyphotoは動いてくれませんでした。 またパスが間違っていないかも何度もチェックはしたつもりです。 本当に困っているのですが、このような時どうやって原因を探していけばよいのか、何かアドバイスを いただけたらと思い投稿させていただきました。 当方、WEB制作初心者のため、見当はずれなことを訊いていましたらご容赦ください。 どうぞよろしくおねがいします。

    • ベストアンサー
    • HTML
  • Jqueryのjavascriptが読み込まれません

    はじめまして。 Jqueryのsuperfishを使用したサイトを作っているのですが、javascriptファイルが読み込まれていないような状態になっています。 具体的には 1)ローカル環境では問題なく読み込まれている 2)サーバにアップすると、同階層の別ページ(A.htmlとします)では機能しているのに、特定のページ(B.html)では読み込まれていない ※A.htmlとB.htmlで同じ効果(superfishによるアコーディオンナビ実装)を得たい 3)A.htmlの<head>内javascriptに関する記述とB.html内同箇所の記述は全く同じ 4)B.html内の他の単独のjavascriptは問題なく読み込まれる という状況です。 この場合どのような原因が考えられるのでしょうか。 javascriptについては全くの初心者であり、どうにも解決できず、困っています。 ちなみに使用しているjqueryはjquery-1.2.6.min.jsです。 (大元であるA.htmlは違う方にコーディングしてもらい、そのデータを元にB.htmlをコーディングする作業をしています) jquery-1.2.6.min.jsもしくはsuperfish.js内に動かすhtmlへのパスが記載されているのかとも思いましたが、知識不足で該当の箇所が見つけられず…。 ご意見を頂ければ幸いです。 どうぞよろしくお願い致します。

  • Jqueryの干渉について

    Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの2つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。

  • jQuery.jsを使ったhtml外部読み込み方法

    JavaScript超初心者です。 何卒ご協力の程よろしくお願い致します!! タイトルの通り、jQuery.jsを使ってページのある部分に外部htmlファイルを読み込みたいと考えています。 以下のページを参考にやってみましたが上手くいきません。 http://blog.sugulab.com/?p=14 やってみたのは下記のような作業です。 まず、下記サイトより「jquery-1.9.1.min.js」ファイルをダウンロードし、「js」というフォルダに「jquery.js」として保存しました。 http://jquery.com/download/ 次に参照ページにならってhead要素内に下記のように記述しました。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> <!– $(function(){ $("#leftcontent").load("shopmenu.html"); }); // –> </script> body要素内には<div id="leftcontent"></div>と記述しています。 このleftcontentの部分に、同じ階層にある「shopmenu.html」を表示させたいのですが、何も表示されず困っています。 PHP等の知識は一切ない為、これでいけそうなら頑張りたいのですが・・・ ド素人の為、見当違いのご質問でしたらご容赦ください。 どなたかご教示、アドバイスの程よろしくお願い申し上げます!!m(*u_u*)m

  • jQuery 1.7.2と1.7.1の使い分け

    JavaScript初心者です。 jQuery Page Scroller -version 3.0.8 を使用しようと思っているのですが、 これはjquery-1.7.1.jsに対応しているのか、jquery-1.7.2.jsを使用すると作動しません。 しかし、lightbox2.51を使用したいのですが、こちらがjquery-1.7.2.jsに対応しており、jquery-1.7.1.jsを使用すると作動しません。 どちらかを使用して両方をうまく作動さす方法はありますでしょうか。 よろしくお願いします。

  • nyroModal HEADタグ内の記述について

    nyroModal HEADタグ内の記述について http://nyromodal.nyrodev.com/#download 上記ページより、nyroModal1.6.2をダウンロードしました。 設置方法を下記サイト http://www.css-lecture.com/log/javascript/014.html で調べて、サイトの説明どおり設置してみたところ、headタグ内に記述する5行のソースが古いのか(jsファイルが1.2.8になってる)ダウンロードしたファイルと合わず、動作しませんでした。 自分なりに試行錯誤してみて、あてずっぽうですが、下記ソースに書き換えたところ、ギャラリー表示は正常に動作するようになりました。 <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.pack.js"></script> しかし下記ページの一番下にあるデモと同じように、Googleへのリンク(外部ページを読み込む) http://www.css-lecture.com/template/2008/1001/ をする場合に、 <p><a href="http://www.google.co.jp/" class="nyroModal">Google</a></p> と、記述してもウィンドウサイズが400×300くらいに固定されてしまって縦横にスクロールバーが出てしまい、サイト全体が表示できません。 cssやjsのファイルを編集しようと探してみましたが、ウィンドウサイズを指定しているような記述を見つけることができませんでした。 現在のヴァージョンで正常に動作させるためには、headタグ内にどのような記述をしたら良いでしょうか。 また、外部リンクの際にウィンドウサイズを指定できる方法はありますでしょうか。 当方、ネットで独学で調べて設置をしている初心者ですので的外れな質問をしているかもしれませんが、ご教授いただけますでしょうか。 よろしくお願いいたします。

専門家に質問してみよう