今年2015年6月にJavaScriptの標準仕様であるECMAScript 2015(ES2015 / ES6)が正式にリリースされ、フロントエンド界隈ではかなり盛り上がってきています。先日のHTML5とか勉強会も『ECMAScript 2015 & 2016特集』というテーマで開催されていました。そうした盛り上がりの中で思うのは、「すでにBabelありきで話が進められている」ということです。Babelも最初のコミットからやっと1年経ったくらいです。まだまだ使い方についてわからない方もいると思うので、ここでまとめておこうと思います。特に使用頻度が高いファイル状態を監視し自動でコンパイルする環境構築方法となります。 はじめに(ES2015とは)今年2015年6月に、これまで長々と仕様の策定が進められてきたECMAScriptの6thエディションがECMAScript2015(ES2015)
お断り事項 本記事は、Angularjsの公式サイトの5分クイックスタートのチュートリアルを 純粋にやってみているだけです。 英語苦手な方には悪くないと思いますが、本家のほうが、アップデートもかかるし、 英語問題ない方は本家をみたほうがよいです。 本題(フレームワーク選定) Javascriptフレームワークをやらないとな、、、 というわけで、重い腰をあげて触ってみましたよ、と。 JSのフレームワーク、なんだか沢山あるようです。 backbone.js react.js knockout.js ember.js aurelia angularjs1.x angularjs2.x などなど沢山あります。 今回の選定基準はこれ!!! ES6が新しいらしいので、ES6対応(または対応しはじめてる) そこそこ有名でユーザが多い ぶっちゃけはじめて使うので、感覚値身に付けるために、「どれでもいい」
Node.js学園祭2015に行ってからESLintを導入したかった やっぱりJavaScriptって柔軟で優秀だから色んな書き方できるじゃないですか。 関数宣言の中に関数宣言やったり(うっ) 上記は関係ないんですけど、 私は自分のJavaScriptのコードに不安を感じることがあって Lintの導入は考えていました。 JavaScriptですから潮流が激しくて色々なツールがありますよね。 JSHint, JSLint, JSCS, そして ESLint。 ありすぎんのよ…どれなんだよと… 環境の構築のこだわりすぎて 本当に作りたいものがおろそかになる気がして Lintは考えることをやめていました(泣) こんな私の火付け役、それが表題のNode.js学園祭2015です。 Node.js学園祭2015「フロントエンドに秩序を取り戻す方法」を聞いて、 駄目だこいつ(私のコード)… 早くなんとか
やんなくちゃなー、と思っていたので Lint Like It’s 2015 — Medium を眺めながら、ahomu/es6-Kameita の JavaScript Linter を ESLint に乗り換えました。 Lint の設定つくるのがダルイ問題 本当にだるい。この投稿を書いている時点では .eslintrc を以下のようにしました。 スペースの入れ方については、強い意志をもって堅めの設定になっているはず。 max-params はちょい甘めです。consistent-this を全力で否定しているので、流用したい方は気をつけた方がよろしいかと。 { "parser": "babel-eslint", "env": { "browser": true, "node": true }, "rules": { "strict": 2, "default-case": 2, "no-
基本的にIDE支援の恩恵を得て楽をしたい派なので、こんな感じでエディタを使い分けていました。 iOSアプリ開発: Xcode Windows開発: Visual Studio (最近はParallels上で) その他の開発: IntelliJ それ以外ちょっとした編集: Sublime Text Visual Studio Code(以下vscode)は、初期リリース時にちょっと触った程度でしたが、0.10.1アップデートで改めて触ってみたらとても気に入り、Sublime Text + IntelliJの一部の領域を代替出来そう、と思って乗り換えました。 Sublime Textに満足してたから、Visual Studio Codeは試用程度しかしてなかったけど、昨日けっこう触ったらとても気に入ったのでほぼ乗り換えモード( ´・‿・`) TypeScriptで拡張書けるのも良い。 http
In my ongoing love affair with static code analysis tools, I wanted to find a good code linter for Javascript, to use with Sublime. More specifically, a React.js project, with Mocha for tests, and of course using the awesome ES6 syntax (with Babel). With a background in Ruby and Go, I'm used to some great tooling like Rubocop/BeautifyRuby/govet/gofmt/golint. I enjoy the tight feedback loop of runn
成果物 github.com 目的 ReduxとES6への入門。 React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 いろいろ情報を集めると、flummoxが人気!!みたいなのを見て、覗いてみたら4.0 will likely be the last major release. Use Redux instead. It's really great.って書いてあってReduxを触ってみることにした。exampleとawesome-reduxを眺めたらどれも当たり前のようにES6で書かれていて、合わせて入門することにした。 Redux概要 まだかなり理解が怪しいんだけど、以下の図がイメージしやすかった。 André Staltz - Unidirectional User Interface Architecturesより S
1)快適なReact.js開発環境をgulpで作る React.jsはJSX という言語を利用して開発します。 JSX はトランスコンパイル言語と呼ばれるもので、JavaScriptに変換して利用します。 jsxというコマンドを利用すればJSX ファイルをJavaScriptに変換することが可能ですが、ソースコードを変更するたびにJSX をコンパイルするのは面倒です。まずはソースコードの変更を検知して自動的にコンパイルし、ブラウザのリロードまでを行ってくれる環境を構築しましょう。 JavaScriptには便利なツールがいくつかありますが、今回はgulp + webpackを利用して環境を構築します。これらの動作にはNode.js が必要となりますので、まずはNode.js のインストールから行いましょう。なお、この組み合わせの他にもGrunt + Browserifyなどがあります。 No
Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + Browserifyを用いた環境ビルド uraway.hatenablog.com React Tutorial uraway.hatenablog.com プロジェクトセットアップ $ npm init インストール webpackとreactをまずはインストール。 dev serverのグローバルインストールにはsudoコマンドが必要かも。 $ npm install --save react react-dom $ npm install -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く