読者です 読者をやめる 読者になる 読者になる

Babelを使うとアロー関数内のthisがundefinedになる

ややこしい問題に直面したので、メモしておく。 問題 次のように、jQueryでコールバック関数にアロー関数を用いたスクリプトを記述する。 $("item > title").each(() => { let title = $(this).text(); console.log(title); }); このES6の構文ををBabelでES5…

Uncaught ReferenceError: require is not defined 対処法まとめ

前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。 さて、クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…

Webpack + React + ES6の最小構成を考えてみる。

Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + B…

快適な開発環境を目指して(4)

fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。 (Gulp + Browserify + ES6 + Babelify + Watchify + Brower-sync) 前提知識 gulp ES6(ES2015) 材料 gulp...自動タスク管理ツール Browsersync...ブラウザの自動リロード browserify...依存物を…

快適な開発環境を目指して(Gulp + Browserify + ES6)

参考: Using ES6 with gulp — Mark Goodyear — Front-end developer and designer gulp 3.9からgulpfile.jsにES6が使えます。 JavaScriptを使うなら早めに慣れておきたいところ。 前の記事で作ったgulpfileをES6で書き換えてみましょう。 uraway.hatenablog…

React.jsとES6でTodoListアプリを作ってみる v2.0.0

uraway.hatenablog.com前に作ったTodoListをアップデートしてみました。 主な変更はチェック機能と削除機能の追加です。入力されたvalueをTodoListのデータの一つであるtextで取得できず苦労しました。 最初からデータのtextも、valueと名付けていればこんな…

ES6版ReactでTodo Listを作ってみる

これが、See the Pen Todolist by uraway (@uraway) on CodePen.ES6版だとこうなるSee the Pen TodoApp(ES6) by uraway (@uraway) on CodePen.でも、これだと不便なので、手を加えてみよう。 次回へ続く…

Stack Overflow で英語で質問してみる

Stack Overflow とは: Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a…

ES6版React.jsでBMI calc を作ってみる

BMIカテゴライズ 参考: Calculate Your BMI - Metric BMI Calculator See the Pen BMI calc by uraway (@uraway) on CodePen.bmiCalc関数によって、BMI数値を計算し、stateを更新して、BMI数値をカテゴライズする。トリガーを書き忘れてて数十分詰まった。 …

ES6版React.jsでCowntdown Timerを作ってみる

See the Pen countdown timer by uraway (@uraway) on CodePen. 参考: reactjs - React.jsでFormを扱う - Qiita Forms | React タイトル通り。 class CountdownTimer extends React.Component { constructor() { super(); this.tick = this.tick.bind(this)…

ECMAScript6を目標を理解する

ECMAScript Language Specification ECMA-262 6th Edition – DRAFTのIntroductionには、次のようにECMAScript6の機能追加の目標が定められています。 Goals for the sixth edition include providing better support for large applications, library creati…

ECMAScript 2015を理解する-クラス定義

参考: いまからはじめるECMAScript 6 どうやってECMAScript 6を学び始めるか ES6(ECMAScript6)でのJavaScriptの書き方 | 姫路のホームページ製作屋WILDWEST-SERVICE ECMAScript 6 compatibility table Rubyist Magazine - 2015 年の JavaScript と babel の…