JavaScript
Node のバージョン管理には nvm を使っていたけど、クロスプラットフォームな nvs の存在を知り乗り換えた。 github.com Windows では msi をダウンロードしてインストールするだけ。 Windows では PowerShell Core を使っているので、<ユーザー>\Documents\…
2021-07-06 追記 ZipDeploy で OK だった。 tnakamura.hatenablog.com はじめに React で実装した Single Page Application(SPA)を Azure App Service でホストしたい。Azure Static Web Apps ではなく、Web Apps。というのも、大人の事情で、GitHub や Azur…
Vue で無限スクロールを実装するなら、今だと vue-infinite-loading を使うのが良さげ。 github.com ただ、Nuxt で使う場合はひと工夫必要だった。といっても、サーバーサイドレンダリング時は描画しないように <no-ssr></no-ssr> で囲むだけだったが。 <no-ssr> <infinite-loading @infinite="handleInfinite" v-if="hasNext"> </infinite-loading> </no-ssr>
redux-form の FieldArray を使えば、 複数のデータを同時に編集して一括登録、 みたいなことができる。 表形式入力的なフォーム。 DataGrid もどき。 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createStore, …
試行錯誤の末に、 react-bootstrap が提供する FormGroup や FormControl といったフォーム関連コンポーネントを、 redux-form と一緒に使うことができた。 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createSt…
React でフォームを実装するためのライブラリは、決定版と呼べるものが見当たらないので、一番スターが多い redux-form を使っている。 github.com フォームの入力内容をストアに持つのはいかがなものかと思っていたのに、不思議と使っているうちに気になら…
ES2015 + React の開発環境を Browserify で構築していたけど、 近いうち CSS もバンドルすることになりそうなので、 Webpack に移行することにした。 ブログに手順をメモしておく。 新規にプロジェクトを作成するときも同じ手順でいけるはず。 npm で必要な…
react-router で遷移先のコンポーネントに props を渡すには React.cloneElement を使う。 tnakamura.hatenablog.com このとき、理性捨てて this.props.children && React.cloneElement(this.props.children, this.props) という風に props をまるごと渡して…
React + Redux で SPA を作成するとき避けられないのが、 Web API の呼び出し。 というか、Web API を呼び出さないなんて、まず考えられない。 Web API の呼び出しでは、redux-thunk を使う。 github.com Redux のミドルウェアで、 Action Creator でオブジ…
React と Redux には HTTP クライアントは含まれていない。 別途ライブラリを使う必要がある。 Web API を呼び出すためだけに jQuery を使うのはバカげているから、 専用のライブラリがいいね。 Browserify でビルドするから、npm にあるライブラリを使える…
React で SPA を実装する場合も、 デザインは Bootstrap のお世話になりたい。 クラスを指定するだけで使えるコンポーネントは普通に使えそうだけど、 Tooltip や Dropdown や Modal のような、 jQuery に依存したコンポーネントは React でそのまま使えない…
react-router でルーティングを試してみたけど、 実際のアプリは React + Redux で開発する予定。 その際、react-router のみではなく redux-router も一緒に使う。 redux-router は react-router の Redux バインディング。 ルーターの状態を Redux のスト…
ネストしたルートに遷移するとき、 遷移先のルートに対応するコンポーネントが、親コンポーネントの props.children にセットされている。 ここで props.children をそのまま表示せずに、 React.cloneElement で props.children を複製すると、 その際に pro…
SPA を作る上で実装したいのがルーティング。React を使ったアプリでのルーティング実装には react-router を使う。 今回からインストールは npm で。 npm install --save react-router react-router を使って Master-Detail の簡単なサンプルを書いてみた。…
React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。 モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。 react や react-dom などのライブラリは npm でインストール。 そう…
先日 Redux を試したとき 末端のコンポーネントからコンテナコンポーネントまでイベント(というかコールバック)を伝播して、 コンテナコンポーネントで dispatch を呼び出してみたけど、 これ末端のコンポーネントで dispatch 呼び出したらダメなんだろうか…
先日 React で作ったタスクリストのサンプルを、 React と Redux で書き直してみた。 <html> <head> <meta charset="utf-8" /> <title>Redux Sample</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></meta></head></html>
Single Page Application を Angular で実装しようと思っていたんだけど、 Angular2 でコンポーネント指向にガラリと変わるみたいなので、 Angular の採用は見送って React を選択｡ 同じコンポーネント指向なら React でいいかな、と。 React 入門ということ…
Rails で AngularJS を使おうと思っていたけど、 ファイルをダウンロードして vendor/assets に直接配置するのは管理が面倒 AngularJS をラップした gem は AngularJS 本体がバージョンアップしたとき対応するまでタイムラグがある そもそも angular-gem や …
AngularJS にユーティリティ関数あるにはあるけど、配列やオブジェクトを操作する関数が足りないので、 Underscore.js を使うことにした。 AngularJS らしく依存性注入したいから、Underscope.js を AngularJS モジュール化している。 <html ng-app="UnderscoreSample"> <head> <meta charset="utf-8"> <title>UnderscoreSample</title> </head> <body ng-controller="MainCtrl"></body></html>…
AngularJS でテンプレートを入れ子にしたかったけど、ng-view は入れ子にできない。 つまり AngularJS の機能だけでは困難。 おまけに ng-view は複数置いて、別々のテンプレートを表示することもできないときた。 そんな ng-view や ngRoute に置き換わるの…
angular-mocks をスタブとして使ってフロントエンドを開発していて、 ずっと angular.module("sampleApp").run(["$httpBackend", function($httpBackend) { $httpBackend.whenGET("/users").respond([ { id: 1, name: "香川" }, { id: 2, name: "本田" }, { …
script タグの type に text/ng-template を指定したら、 AnguarJS が中のテキストを $templateCache にキャッシュしてくれる。 そして、ルーターでテンプレートの URL を指定するとき、 その script タグの id にすると $templateCache にキャッシュされて…
最近また AngularJS が盛り上がってる気がする。 AngularJS のデータバインディングは魅力的だけど、自分は Backbone 派。 でも Backbone でもデータバインディング使いたい。 そこで New York Times 製の Backbone プラグイン backbone.stickit を試してみ…
レーダーチャートを表示したいんだけど、 これまで Rails で使ってきた lazy_high_chart はどうも対応していないっぽい。 最近、JavaScript ライブラリをラップした gem を使うことに抵抗が出てきたので、 lazy_high_chart を使うのはやめて、他のライブラリ…
Rails アプリの JavaScript のテストは、 Konacha 使うのをやめて、Mocha を直接使っている。 Mocha は HTML サポートしているんで、 TestRunner.html 作ってブラウザで表示すればテストが実行され、 お手軽だ。 ただ、複数のブラウザでテストする場合、ブラ…
CoffeeScript と Sass のコンパイルを Grunt で行うようにしたら、 ついでに Hogan.js のテンプレートもコンパイルしたくなるのは仕方ないよね。 人として。 Grunt のタスクをインストール Grunt の contrib タスクには Hogan.js 用のタスクがあるので、npm …
最近、Rails の CoffeeScript や Sass のコンパイルをアセットパイプラインではなく Grunt でやりたくなったんで、Grunt を試してみた。 まず Grunt をインストール。 npm install -g grunt-cli CoffeeScript と Sass をコンパイルするタスクは Grunt 公式の…
はじめに JavaScript テンプレートには backbone-rails がデフォルトでサポートしている EJS を使っていたけど、 backbone-rails 使うのやめたから EJS をあえて使う理由が無くなった。 自分の観測範囲内だと、JavaScript テンプレートでは Hogan.js と Hand…
はじめに Rails で Backbone.js を使ってアプリを開発するときは、決まって backbone-rails を使っていた。 codebrew/backbone-rails …んだけど、Backbone.js の v1.0.0 が出たというのに、backbone-rails は未だ対応してない(2013/07/02 現在)。 JavaScript…
