"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
Node.js ES2015/ES6, ES2016 and ES2017 support
"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
Next.jsとテストの話 - dachi
#アドベントカレンダー Next.js Advent Calendar 2019 8日目の記事です。 Scrapboxは使い勝手がよくてなんでも書きたくなってしまいますね、個人ブログが全く息をしていない・・・。 Next.js初心者な私がNext.jsでええ感じにテストできるように設定するために直面した問題や疑問などを書きます。 テスト関連のまとまった情報がなかったので今後もここに都度まとめていって便利なメモにしていく予定です。 Jestを入れたい Next.jsでテストしたーい！と思ってJestを入れようとしたらハマった話を書きます。 ts-jestとbabel-jestの役割の違いに気づかず、頭が混乱してしまいました。 Next.jsに限らずな問題ですがNext.js触ってる時にハマったところだったので書いておきます。 あと、当たり前ですがドキュメントはちゃんと読まないとダメですね (
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル - Qiita
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル環境構築TypeScriptライブラリReact TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストール
webpackのTree Shakingを理解して不要なコードがバンドルされるのを防ぐ - Qiita
はじめに webpack の Tree Shaking に関する備忘録です。以下を目的とした記事になります。 Tree Shaking とは何か、なぜ Tree Shaking をするのかを理解する webpack を利用して Tree Shaking するためにはどうすれば良いのかを理解する Tree Shaking 以外の「デッドコードをバンドルさせない」ための手段を理解する 解説に利用しているコードの最終形態は GitHub 上にあります（hira777/webpack-tree-shaking-example）。 webpack を理解していることを前提とした記事ですので、基礎知識を習得したい方は webpack 4 入門をご覧ください。 Tree Shaking とは webpack などでファイルをバンドルする際に、デッドコード（利用されていない不要なコード）を除去してファイル
今更のバベる。 Babel 7を試してみたメモ - かもメモ
BabelやWebpackとかを業務で使う機会がなくて、なんとなくな感じだったので自分の手動かして設定しながら試してみました。Babel 7になっていて検索で出てくる情報だとうまく行かなかったり試行錯誤したのでメモ。 Babelとは babel + webpack の構成で合わせて説明されている場合が多いので、まずbabelとwebpackを切り分けて理解する必要がありました。 雑な理解👇 babel Babel is a JavaScript compiler Babelはjavascriptのコンパイラ。新しい書き方を古い書き方に変換できる。 webpack webpack is a static module bundler for modern JavaScript applications. webpackはモジュールバンドラ。別々のファイルに分かれてあるものの依存関係を見つけ
webpackとBabelの基本を理解する(3) ―webpackとBabel編― - 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にBabelオプションを追加する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している
webpackとBabelの基本を理解する(2) ―Babel編― - 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編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール Babelで最新のJS構文を環境に応じたバージョンに変換する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法
webpack, babel, node環境で例外時のスタックトレースに元ソースの場所を表示させる
問題 nodeに読み込ませるソースをwebpackとbabelでコンパイルするようにすると, エラー時のスタックトレースが at Object.eval (webpack-internal:///76:29:7) のような意味不明なものになってしまいます. これはソースマップを有効にしていても起きてしまいます. webpackのissueにも既にこの問題は報告されていましたが. SourceMap don't link to an src file but to webpack-internal:///[LINE_NUMBER] · Issue #5186 · webpack/webpack ｢source mapはブラウザが読み込むものだからnodeは取り扱わないよ｣とownerにすげなく言われています. 解決法 evanw/node-source-map-support: Adds s
webpack -> FuseBox 移行メモ - Qiita
webpackを使っていたプロジェクトをFuseBoxに移行してみました。 バンドル時間が超速くなり、バンドルファイルサイズが超小さくなりました。 webpack FuseBox package.json package.jsonの比較です。 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.23.1", "babel-eslint": "^8.0.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.22.0", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.23.0", "css-loader": "^0.28.7", "eslint": "^4.6.1", "eslint-load
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
Electron を試す 9 - Babel 変換を最小におさえつつ minify - アカベコマイリ
小ネタ。 Electron が採用している Chromium は ECMAScript 対応がかなり進んだ。よって Babel を使用しつつも変換を最小におさえたくなる。 この点について以前 babel-preset-env と minify という記事を書いたのだが uglify-js の ES2015 以降への対応は暫定版。そのため、よりよい選択肢として babel-preset-babili を試してみた。その記事のコメントで mysticatea さんが提案されているように Browserify へ -g オプションをつければ node_modules 部分も含めて minify 可能だが、それでも Browserify の Bundle 処理は minify されない。 よって uglify-js harmony 版が正式リリースされるのを待っていたところ uglify-es が
英語資料を読むのが面倒な人のためのwebpack 2移行ガイド - Qiita
2017年1月に、ようやくwebpack 2のリリースからbeta/rcが外れ、正式にリリースとなりました。 これによってnpm installでデフォルトに入るバージョンが2系となり、誰でも気軽に強力な追加機能のメリットを享受できるようになった一方、メジャーバージョンアップによる破壊的変更が加えられたことによって、従来のwebpack.config.jsは動作しない形となりました。 今回はまだまだ日本語の移行資料が少ないwebpack 2について、新しい機能と、1.xからの移行の方法を簡単にご紹介いたします。 webpack 2の機能 webpackも2系になっていくつかの機能が追加されました。小さなものから、比較的大きなものまで様々ですが、今回は影響の大きそうなものをいくつかご紹介いたします。 import/exportの標準対応 webpack 2では、import/export構文
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
顧客が本当に求めていたsprockets、sprockets-commonerの紹介 - Qiita
はじめに みなさんにdisられて久しいsprockets氏ですが、メリットはそのままこれまでの問題を解決してくれるsprockets-commonerという素晴らしいgemを見つけたので紹介します。 sprockets-commonerとは sprockets-commonerとは、Railsコミッターも在籍するShopifyで作られたsprocketsの拡張gemです。 このgemの機能の中でも特に嬉しいのは以下の2つの機能です。 1. node.js/ESnextでフロントエンドを書けるようになる sprockets-commonerを入れると、sprockets管理下のJSファイルをbabelでトランスパイルしてくれるようになります。 そのため、node.js/ESnextでフロントエンドを書けるようになります。 一応、sprockets次バージョンの4でもESnextは書けるように
Next.js - Qiita
https://zeit.co/blog/next の翻訳です。 > Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) and Tony Kovanen (@tonykovanen) > 2016年10月26日 私たちは、サーバレンダリングされるユニバーサルなJavaScriptウェブアプリのための小さなフレームワークであり、ReactやWebpack、Babel上に構築され、このサイト（訳注: https://zeit.co ）を動作させているNext.jsをオープンソース化することをとても嬉しく思います！ (Next.jsの"Hello World") Next.jsを使い始めるには、package.jsonを含む新しいディレクトリ内で次のように実行してください。
ES6 in Practice
Firefox Developer Conference 2015の講演資料 http://www.mozilla.jp/events/devcon/2015/tokyo/ ES6 Modulesの現状確認がメインです。
ES6 + React + Redux + webpack な環境構築 - kotaroito's notes
ES6 + React + Redux + webpack なフロントエンド環境を構築するためのメモ。 packages.json npm install --save react react-dom react-redux npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react npm install --save-dev webpack webpack-dev-server react-hot-loader npm install --save-dev eslint eslint-plugin-react eslint-plugin-import { "name": "my-env", "version": "1.0.0", "description": "", "scr
Testing React Components with Enzyme and Mocha - Semaphore
Full-stack web developer, passionate about solving engineering problems of all kinds with elegant solutions that deliver incredible user experiences. Some thoughts & some code @ ifelse.io. @markthethomas everywhere else. Introduction React has become an increasingly popular and widely-used JavaScript application tool for developing web applications. Popular frameworks like Angular.js, Ember.js, an
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
package.jsonのdevDependenciesから.babelrcを自動生成する - Qiita
