concatだらけになるtemplate literal - Qiita
Babelで変換されたあとのコードを見ると、一見無駄にも思えるコードが生成されていたのですが、実はそれが必要だった、というお話です。 Template Literalとは ES5までのJavaScriptでは、文字列を合成するには「1つ1つ+演算子で連結していく」「Array.prototype.joinで連結する」などの手法があったのですが、どちらの方法にしてもどのような構造の文字列ができるか、分かりづらいものでした。 ES6では、他言語のように文字列途中で式展開ができる、Template Literalが登場しています1。引用符として`...`を使い、式展開はその途中に${...}と書くという、他言語と比べてもそこまで違和感のない記法となっています。 Babelでの変換結果 で、例によってIEは非対応なので（MDN）、IEを切り捨てられない環境ではBabelでの変換が必要となります。こ
Django Compressor + Babel で Django でも簡単に ES6 コードを扱う方法
ECMAScript 6 の実装は各処理系で少しずつ進んでいますが, 現実的に Web ブラウザで ECMAScript 6 のコードを実行するには一部の機能のみを用いるか, Babel 等のコンパイラを用いて ECMAScript 5 互換のコードに変換して利用することになります. この記事では Python の Web アプリケーションフレームワーク Django と Django で静的ファイルの圧縮等を行う Django Compressor と Babel を組み合わせて利用する方法を紹介します. 環境 Python・Django・Django Compressor・Node.js (io.js)・Babel がインストールされた環境があり, 適当な Django のプロジェクトが生成できているものと仮定します. Django と Django Compressor は pip
webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境
シンプルだけどシッカリ働く最新のECMAScript開発環境 - Qiita
どうも、最近スマホゲー界隈からコンバートしてきた新米フロントエンド戦士です。 数年前はブラウザゲー界隈にいたんですが…完全に浦島太郎状態です。 ここ数ヶ月で色々学ばせてもらいつつ、自分なりのNode開発環境が整ったので公開しちゃいます。 完成した環境はこちらのv1.0（masterの最新はこちらでクロスプラットフォーム対応を行ったものになります） 2018/8/28 追記 本日 Babel7がリリースされました！ それに伴いパッケージ名が変更されていました。 babel-core -> @babel/core babel-preset-env -> @babel/preset-env また babel-preset-env2.0でbabel-polyfillは不要になるらしい の件が実験的機能として導入され、以下のようにuseBuiltIns:usageと設定すると必要に応じて自動でpol
ES2015再入門 - Qiita
ES2015とは？ 将来的にはブラウザに対応される予定の 「今までのJS(ES5)に様々な機能が追加された新仕様」 のこと。 ES6とも言ったりします。 現在は一部のみ（Chromeは対応）で機能が実装されていたり、されていなかったり。 Babelのドキュメントに機能の一覧がまとめられています。 https://babeljs.io/docs/learn-es2015/ BABELって？ ES2015仕様のJavascriptをES5仕様に整形するツール です。 ES2015に対応していないブラウザのために、 「ES2015の記法で書いたコード」 => 「ES5」 としてくれる。 対応していないんなら必要ないのでは？ 将来的にはブラウザに実装されていく ものなので、今から使って慣れておいた方がよさそうです。 ES2015で書いてみよう ES2015についてのチュートリアルがあったのでやって
babel-preset-envを簡単にさわってみた。 - Qiita
最近、babel-preset-envなる物を知ったので、どんな物なのかを調べてみました。 知ったきっかけは、 babel-preset-env楽 — よこた (@yokotak0527) 2016年11月25日 です。あと、 babel-preset-env is 1.0! New `useBuiltIns` option as suggested by @keyanzhang + electron support by @paulcbettshttps://t.co/L3ygdLljVT pic.twitter.com/XCjaVkHLps — Henry Zhu (@left_pad) 2016年12月9日 babel-preset-env is 1.0!とアナウンスが流れてきたので、使ってみたいなーと思ったしだいです。 Babelとは ES2015,ES2016などの新しいJava
oklab -
最近ではコンピューター、ウェブ、モバイルでゲームを楽しめるようになりました。これらのゲームプログラミングについて学びましょう。 ゲームプログラミングの特徴 ゲームプログラミングは比較的新しいジャンルです。 ゲーム開発に使用される言語は、C#、C++、JavaScript、Swift、Rubyです。ゲームでは通常のアプリケーションと異なり複雑なビジュアルを操作するパフォーマンスと速度が要求されますので、プログラム言語もそれに特化している言語がおすすめです。 ゲームプログラミングは今後も人気の職種です。習得してステップアップを目指しましょう。 Oracle PLのプログラミング言語について学びましょう。 Oracle PLの特徴 SQL、T-SQLと同様にOracle PLもデータベースを処理するための言語です。違いとしてはOracle PLは世界最大のデータベースのひとつであるOracleデ
Babel: ブラウザ向けに Polyfill ライブラリを有効化する | DriftwoodJP
Polyfill とはトランスコンパイルができるようになったが、ブラウザで ES6 をフル利用するためには Polyfill ライブラリを読み込む必要がある。 Babelを使って次期JavaScript、ES6を体験しよう : アシアルブログブラウザで、Babelで変換したコードを利用する場合、ポリフィルが必要になります。ポリフィルとはES6の新しい機能などを利用するためのES5向けのライブラリです。変換だけでは、ポリフィルは含まれないので、babel-coreパッケージをプロジェクトにインストールする必要があります。 Polyfill を追加するPolyfill ライブラリを有効化するために html に polyfill.js を読み込む設定を加える。 Polyfill · BabelUsage in Browser Available from the dist/polyfill.j
JavascriptでGeneratorを使う - Qiita
Generator 手を付けようか迷っていた所でAsync Awaitとかも出てきたしもういいやぁ…と思ってたんですが、何かとやっぱり使いドコロはありそうだったので。 例えばp5.jsとかみたいなアニメーション関連でdrawとかがループされるようなやつ。 繰り返し処理になるので Generator が活きてくる。 const newMessage = function* (mes) { var counter = 500; while (true) { fill("#fff"); text(`${mes.user}\n${mes.text}`, counter, 200) counter = counter - 10; yield false; if (counter < 20) { break; } } yield true; }
Node.jsがES5とES6(ES2015)に対応してることに今さら気づいて、使ってみたら感動した新要素 - ほんじゃらねっと
Pythonを堪能したのでJavascriptに戻ってきた。 JavascriptでPythonのジェネレータみたいな機能はないのかな、 と調べてみると、ES6(ES2015)で追加され、Node.jsはES6対応済みらしい。 そういえばES5もES6もよく調べたことないな、と思って 調べてみると、便利機能が山ほど追加されててびっくり。 Javascript好き、と言いながら大分遅れたコードを書いてたようだ。 とりあえず今後絶対使おう！と決めた要素を練習がてらまとめておく！ まずはconstとlet 今までvarを使ってた変数宣言にconstとletが使えるようになった。 constは再代入しない定数宣言、letはレキシカルスコープの変数宣言。 const products = [ {name: "item1", price: 10}, {name: "item2", price: 20}
Babelの手ほどき | 前編 Babelとは
Babelの手ほどき 前編 Babelとは BabelはブラウザにまだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにするNode.js製のトランスパイラです。Babelがどのような働きをするか解説します。 Babelとは 今回紹介するBabel（バベル）*は、次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツールです。次世代の標準機能を使って書かれたコードを、それらの機能をサポートしていないブラウザでも動くコードに変換（トランスパイル）します。 「次世代のJavaScriptの標準機能」というのはECMAScript（以降、ESと呼びます）のバージョン6や7で追加された（る）機能、そしてさらにその先の標準機能です。 *注：元々は6to5という名前 Babelはもともと6to5という名
Babel6でMochaとChaiを使ったテストを書く - Qiita
はじめに 最近Reactとか触っています。Github上とかでいろいろなコードを見させていただくのですが、React周辺はReduxを使っているのでBabel使ってるけど、テストはFacebookのJestを使っていてあんまりBabel使えてなかったり、もはやテスト書いてなかったりします。 そもそもReactはフロントエンドのライブラリなので、あまりテストを書きたくなくなるのもわかります。ですが、Railsやっててもなるべくテストを書くことを尊重する雰囲気になってきているので、React周辺でもテストを書いていきたいのです。そこで、JestではなくてMochaとChaiを使ってテストを書くにはどうするべきなのかと思い、まとめました。 環境 node: v5.1.0 npm: 3.3.12 ディレクトリ構成 . ├── .babelrc ├── .eslintrc ├── package.j
Babel を使って React の jsx をコンパイルする - Qiita
React は基本的に JSX というシンタックスで書くのだけど、 実際に使用するときには ES5 の js にコンパイルしないといけない。 （ライブラリを使えばそのままブラウザで実行できるようになるけどそれについては触れない） 公式が JSX をコンパイルするツールを出してはいるのですが、最近は ES2015 でも書きたいということもあるので、それを含めてコンパイルしてくれる Babel を使う。 Babel のほうが一般的によく使われてるらしいですし。 Babel をインストール 公式サイトの Setup のページを参考にやります。 とりあえず npm init しておきます。 質問は全部 y で。
gulp+watchify+browserify+babel+reactでビルドが速くならない - tanaka's Programming Memo
watchifyでビルドの高速化を図ろうとしたところ、ビルドするたびに遅くなってしまいました。 原因は、Browserifyのオプションを指定していないことでした。以下、オプションとWatchifyとBrowserifyの部分の抜粋です。propsが必要でした。 var jsSrcPath = "./ビルドターゲットのパス/"; var jsSrcFile = "app.jsx"; var jsDestPath = "./出力先のパス/"; var bundler; var props = { entries: jsSrcPath + jsSrcFile, debug: true, cache: {}, packageCache: {}, fullPaths: true }; bundler = watchify( browserify( props ) ); function rebun
C#開発者のための最新JavaScript事情（Babel編）
今回はC#から少し離れて、ECMAScript 2015コードをJavaScript 5コードに変換するツールであるBabelの使い方を見ていこう。 連載目次 前回の最後に「次はモジュールについて」的なことを述べたが、ちょっと予定を変更して、今回はC#とJavaScriptの話題から少し離れて、Babelを使用してECMAScript 2015（以下、ES2015）のコードをJavaScript 5.x（以下、JS5）のコードにトランスパイル（コンパイル）する方法について見てみよう。 ECMAScript 2015のトランスパイル（コンパイル）とは ES2015は2015年6月に策定されたが、そのもともとの主戦場であるWebブラウザーでのサポート状況はまだまだの状況だ。そこで、ES2015コードをJS5コードに変換（トランスパイル／コンパイル）することで、ES2015コードをWebブラウザ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Use ES2015 Today with Babel and Gulp | Constant Contact Tech Blog
babel-plugin-transform-es2015-template-literals · Babel
Babel + React + Webpack の最小構成ひな形作った - Qiita