Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

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
React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。 モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。 react や react-dom などのライブラリは npm でインストール。 そういえば Bower ってオワコン化してしまったな。 # プロジェクトフォルダを作る(名前は適当なやつで) mkdir react-project cd react-project # package.json を作る npm init # React をインストール npm install --save react react-dom npm でインストールしたライブラリを使って書いたアプリは、 browserify でビルドして 1 つの .js ファイルにする。 npm install --save-dev brow
React.js Advent Calendar 2015 17日目の記事です。 Reactベースでプロジェクトを始めようと思うと、Boilerplateとしてreact-starter-kitやreact-static-boilerplateが見つかります。これらはReact以外のツールやライブラリを大量に利用している為、事前知識がないと何がどう動いているのか、何から調べれば良いのかを把握するのが難しかったりします。 この記事では、個人的にプロジェクト構成を作り始める前にざっくりと知っておきたかったと思う事前知識と、その学習リソースについてまとめようと思います。 2015年にWebフロントエンド開発トレンドについてキャッチアップをさぼっちゃったなー、という方がモダンな環境でReact開発をスタートする一助になれば嬉しいです。 以下、ES2015, Babel, Webpack, Flux
〜 "devDependencies": { "react": "^0.13.3", "browserify": "^10.2.1", "babelify": "^6.1.1", "gulp": "^3.8.11", "vinyl-source-stream": "^1.1.0", "gulp-webserver": "^0.9.1" }, "scripts": { "build": "browserify --debug --transform babelify app.jsx --outfile bundle.js" }, 〜 後方互換を期待して各ライブラリのバージョンは固定していないので、もし手元で上手く動かない場合はバージョン番号の前の^を外してバージョンを固定して導入してみてください。 React.js は HTML ファイルの script タグで読み込むのではなく、Brows
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 (実際にはIE9以降から使用することを推奨します) 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同
Babel is a JavaScript compiler.Use next generation JavaScript, today. Babel 7.27 is released! Please read our blog post for highlights and changelog for more details!
2015年6月17日に標準仕様として発行された ECMAScript6 通称“ ES6 ”ですが、脚光を浴びているものの実際のブラウザが対応するには時間がかかると思います。そのような状況の中、トランスパイラの一つである Babel で一足先にES6(ECMAScript6)を体感したいと思います。 ES6からES5へトランスパイラするBabel トランスパイラとはコード変換ツールの意味として利用されています。Babelは現行のES5へ、ES6のコードを変換する(トランスパイルする)ツールです。Babelはランタイムライブラリとちがって、実行時のオーバーヘッドがありません。また、トランスパイル後の変換コードが比較的読みやすいという評判です。 では見ていきましょう! ※ 本記事では、Babelの利用だけに留め、ES6とES5の構文の違いや、ライブラリの説明は行いません。 Babelのセットアッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く