Vue.js 1.x から 2.0 への移行のポイント
{ topic = [".NET", "PowerShell", "Ubuntu", "LibreOffice", "Arduino", ...] } 先日Vue.js 1.xから2.0への移行を行った。まるっと書き換えないといけないというレベルではないが、メジャーバージョンアップだなぁと感じる程には違いを感じられたのでいくつかポイントを書いておく。 もちろん、Vue.jsの機能を全て使いこなしているわけではないため、すべて網羅しているとはとても考えていないので、詳しくは「Migration from Vue 1.x」を参照してほしい。 大きな違い：テンプレートが事前コンパイルできるようになったVue 1.xと2.xの大きな違いは、テンプレートのコンパイルと実行を分離できるようになったこと。実際に移行してみた感じ、このコンパイル処理の邪魔になるようなことに関しては排除するような形で変更され
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
Reactをnpmでビルドする方法 browserify (watchify) + babelify編
2015年10月7日（水）にReactの最新バージョンである「React v0.14」がリリースされました。今回のバージョンでは、「Reactはnpm経由で使用し、browserifyやwebpackのようなツールを使ってコードを一つのバンドルの中にビルドする開発方法」が推奨されています。今回の記事では、browserifyを使った方法になりますが、npm経由でReactを使う方法について詳しく紹介していきたいと思います。 はじめに 今回の記事を書くにあたり、簡単なサンプルをReact v0.14で作りました。フォームに入力したテキストを出力するだけのものです。 ソースコードもGitHubにアップしているので、参考にしていただければと思います。 maechabin/react0.14-sample – GitHubまた最新バージョンのReact 0.14については、以下を参考にしてください
モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ
投稿推進部の外村（@hokaccha）です。 クックパッドブログの開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 RailsはSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みが提供されています。Sprocketsによるasset管理の仕組みは非常によくできており、AltJSのトランスパイルやファイルの結合、minifyなど、assetのコンパイルに必要な機能を一通り備えています。 しかし、JavaScriptにおけるモジュールの依存関係の解決や、ライブラリの管理などについてはモダンなJavaScript開発と乖離してきているのが現状です。そこで、Railsでも以下のようなことを実現できることを目標に環境を作りました。 ECMAScript6のシンタックスを使う モジュ
JavaScriptの素振りする技術
JavaScriptの素振りする技術 ライブラリをちょっと試す ライブラリをブラウザで試す JavaScriptライブラリはデモを置いてることも多い デモがないとローカルで動かすのは面倒くさい わざわざローカルでnpm installして... ちょっとしたこと試す時に使えるツール npmをその場で試す Tonic: a better REPL for node.js Browserify + REPLのようなサービス npmからリンクが貼られてる! 例: Tonic: npm on Tonic 他にも色々 RequireBin Browserify + JSFiddle的なサービス Firefox DevTools URLをページにインジェクト出来る 開発ツールバーの inject コマンド ライブラリを読み込ませてConsoleで叩く JS Envy ライブラリをちょっと試すまとめ ラ
npm で依存もタスクも一元化する - Qiita
タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、
Electron を試す - 開発環境の構築 - アカベコマイリ
これまで NW.js を使ってきたが同じ Chromium + Node 系のフレームワークとして最近は Electron のほうが勢いあるようなので試したくなった。使用感を把握するため、まずは開発環境を構築してみる。 更新履歴 2015/11/5 npm-scripts を babelify 7.2 (Babel 6.x) を採用した内容へ更新。また最新 watchify の Windows 対応について追記した。これらの詳細については babelify v7.2 を試すを参照のこと。 2015/10/19 npm-scripts を最新へ更新、Main プロセスのビルド説明に Browserify の --node オプション解説を追加。 設計方針 package.json と npm だけを使用 AltCSS は Stylus を採用 ユニット テスト対応 コード ドキュメント対応
俺の最近のRailsのJS開発環境を教えてやる - Qiita
こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rails/browserify-rails https://github.com/browserify-rails/brows
モダンJavaScriptアプリケーション開発 in Salesforce - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに HTML5でのアプリケーション開発は、エンタープライズ向けアプリケーションでも当たり前のようになってきました。これはSalesforceにおけるアプリケーション開発でも同じです。 Salesforceでのアプリケーション開発はVisualforce/Apexで行うというのが数年ほど続いてきたので、HTML5つまりJavaScriptを主体とするアプリケーション開発にはなれていないベンダーも多数あるかと思います。自分は創業当時からJavaScriptでのSPA(Single Page Application)をメインプロダクトに
Browserify + GulpでクライアントのJavaScript / CoffeeScriptでrequire
先日以下の記事で、クライアントサイド JavaScript での require による依存解決の方法を読みました。一言で言うと Browserify というライブラリを使って、クライアント側 JavaScript でも、モジュールをファイルごとに分割して require で読み込むための手順。 Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる – ぼくのかんがえたさいきょうのうぇぶさーびす これを真似したくて、昨日日曜日に試したのでその記録です。 ぼくうぇぶさんのページでは、JavaScript のビルドツール（タスクランナー）として Grunt を使ってありますが、個人の好みにより私は Gulp を使用します。Grunt も Gulp も JavaScript/CSS などフロントエンド用のビルドツールで、C言語の Make、Ruby の
Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる - undefined
ブラウザ上もでrequire使いたい 現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClassとか@HogeClassとかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。 grunt-cli のインストール npm install -g grunt-cli package.jsonを作成 npm init 対話形式でpackage.jsonを作成。 必要な情報を入力してください。 プロジェクトに必要な情報を記述するjsonファイルが生成されます。 browserify grunt grunt-browserifyのインストール npm install browserify grunt grunt-browseri
A Year with Browserify - ÆFLASH
NOTE: this guide is out of date. It is only vaild for grunt-browserify@~1.3.0 and its included versions of browserify and browserify-shim. An updated guide is here. It's been a year since I wrote the long Javascript Module Systems article, in which I concluded that CommonJS and Browserify was the best way to write modular javascript for the browser. Over the last year, I've had a chance to test th
Browserify
Browserify Articles Resources for learning the ins and outs of using Browserify, written by the community. Home Source Introductions / Browserify basics These articles give a great introduction to using Browserify. Browserify Handbook github.com/substack/browserify-handbook This document written by @substack covers how to use browserify to build modular applications. Recommended as a starting poin
MQTTでオフィスハック with RasPi
http://iotlt.connpass.com/event/11373/ IoTLT vol.1にて発表。 MQTTを使った電子工作の入門編的なスライドです。 JavaScriptだけで電子工作を完結します。
Getting Started with Browserify — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. JavaScript implementations have been getting more and more complex as the beautiful beast we call the web evolves each year. Many of us now work with JavaScript modules – independently functioning components th
Browserify
Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node. Here is a tutorial on how to use Browserify on the command line to bundle up a simple file called main.js along with all of its dependencies:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiita
GitHub - browserify/browserify: browser-side require() the node.js way