Movatterモバイル変換

[0]ホーム
URL:

present

トップ>JavaScript

JavaScript

Node のバージョン管理には nvm を使っていたけど、クロスプラットフォームな nvs の存在を知り乗り換えた。 github.com Windows では msi をダウンロードしてインストールするだけ。 Windows では PowerShell Core を使っているので、<ユーザー>\Documents\…

はてなブックマーク - Node のバージョン管理を nvs に移行した

2021-07-06 追記 ZipDeploy で OK だった。 tnakamura.hatenablog.com はじめに React で実装した Single Page Application(SPA)を Azure App Service でホストしたい。Azure Static Web Apps ではなく、Web Apps。というのも、大人の事情で、GitHub や Azur…

はてなブックマーク - React の SPA を Azure App Service でホストする

Vue で無限スクロールを実装するなら、今だと vue-infinite-loading を使うのが良さげ。 github.com ただ、Nuxt で使う場合はひと工夫必要だった。といっても、サーバーサイドレンダリング時は描画しないように <no-ssr></no-ssr> で囲むだけだったが。 <no-ssr> <infinite-loading @infinite="handleInfinite" v-if="hasNext"> </infinite-loading> </no-ssr>

はてなブックマーク - Nuxt で vue-infinite-loading を使うメモ

redux-form の FieldArray を使えば、 複数のデータを同時に編集して一括登録、 みたいなことができる。 表形式入力的なフォーム。 DataGrid もどき。 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createStore, …

はてなブックマーク - redux-form で表形式入力的なフォーム

試行錯誤の末に、 react-bootstrap が提供する FormGroup や FormControl といったフォーム関連コンポーネントを、 redux-form と一緒に使うことができた。 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createSt…

はてなブックマーク - redux-form でも react-bootstrap のフォーム関連コンポーネントを使う

React でフォームを実装するためのライブラリは、決定版と呼べるものが見当たらないので、一番スターが多い redux-form を使っている。 github.com フォームの入力内容をストアに持つのはいかがなものかと思っていたのに、不思議と使っているうちに気になら…

はてなブックマーク - redux-form 慣れてきた

ES2015 + React の開発環境を Browserify で構築していたけど、 近いうち CSS もバンドルすることになりそうなので、 Webpack に移行することにした。 ブログに手順をメモしておく。 新規にプロジェクトを作成するときも同じ手順でいけるはず。 npm で必要な…

はてなブックマーク - Browserify から Webpack に移行した

react-router で遷移先のコンポーネントに props を渡すには React.cloneElement を使う。 tnakamura.hatenablog.com このとき、理性捨てて this.props.children && React.cloneElement(this.props.children, this.props) という風に props をまるごと渡して…

はてなブックマーク - 理性捨てて props 全部渡していたら react-router でハマった

React + Redux で SPA を作成するとき避けられないのが、 Web API の呼び出し。 というか、Web API を呼び出さないなんて、まず考えられない。 Web API の呼び出しでは、redux-thunk を使う。 github.com Redux のミドルウェアで、 Action Creator でオブジ…

はてなブックマーク - React + Redux で Web API を呼び出す

React と Redux には HTTP クライアントは含まれていない。 別途ライブラリを使う必要がある。 Web API を呼び出すためだけに jQuery を使うのはバカげているから、 専用のライブラリがいいね。 Browserify でビルドするから、npm にあるライブラリを使える…

はてなブックマーク - React で使う HTTP クライアント候補として SuperAgent を試してみた

React で SPA を実装する場合も、 デザインは Bootstrap のお世話になりたい。 クラスを指定するだけで使えるコンポーネントは普通に使えそうだけど、 Tooltip や Dropdown や Modal のような、 jQuery に依存したコンポーネントは React でそのまま使えない…

はてなブックマーク - React でも Bootstrap のコンポーネントを使う

react-router でルーティングを試してみたけど、 実際のアプリは React + Redux で開発する予定。 その際、react-router のみではなく redux-router も一緒に使う。 redux-router は react-router の Redux バインディング。 ルーターの状態を Redux のスト…

はてなブックマーク - React + Redux でもルーティング

ネストしたルートに遷移するとき、 遷移先のルートに対応するコンポーネントが、親コンポーネントの props.children にセットされている。 ここで props.children をそのまま表示せずに、 React.cloneElement で props.children を複製すると、 その際に pro…

はてなブックマーク - react-router で遷移先のコンポーネントに props を渡す

SPA を作る上で実装したいのがルーティング。React を使ったアプリでのルーティング実装には react-router を使う。 今回からインストールは npm で。 npm install --save react-router react-router を使って Master-Detail の簡単なサンプルを書いてみた。…

はてなブックマーク - react-router を使って React でルーティング

React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。 モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。 react や react-dom などのライブラリは npm でインストール。 そう…

はてなブックマーク - React 開発環境構築

先日 Redux を試したとき 末端のコンポーネントからコンテナコンポーネントまでイベント(というかコールバック)を伝播して、 コンテナコンポーネントで dispatch を呼び出してみたけど、 これ末端のコンポーネントで dispatch 呼び出したらダメなんだろうか…

はてなブックマーク - React コンポーネントは Redux に依存しないほうがいい

先日 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>

はてなブックマーク - React Meets Redux

Single Page Application を Angular で実装しようと思っていたんだけど、 Angular2 でコンポーネント指向にガラリと変わるみたいなので、 Angular の採用は見送って React を選択｡ 同じコンポーネント指向なら React でいいかな、と。 React 入門ということ…

はてなブックマーク - Hello React World

Rails で AngularJS を使おうと思っていたけど、 ファイルをダウンロードして vendor/assets に直接配置するのは管理が面倒 AngularJS をラップした gem は AngularJS 本体がバージョンアップしたとき対応するまでタイムラグがある そもそも angular-gem や …

はてなブックマーク - Rails Assets を使って Rails プロジェクトに AngularJS をインストール

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 で Underscore.js を使ってみた

AngularJS でテンプレートを入れ子にしたかったけど、ng-view は入れ子にできない。 つまり AngularJS の機能だけでは困難。 おまけに ng-view は複数置いて、別々のテンプレートを表示することもできないときた。 そんな ng-view や ngRoute に置き換わるの…

はてなブックマーク - AngularJS のテンプレートを入れ子にしたかったから angular-ui-router を使ってみた

angular-mocks をスタブとして使ってフロントエンドを開発していて、 ずっと angular.module("sampleApp").run(["$httpBackend", function($httpBackend) { $httpBackend.whenGET("/users").respond([ { id: 1, name: "香川" }, { id: 2, name: "本田" }, { …

はてなブックマーク - angular-mocks でモックが返すデータを動的に決める

script タグの type に text/ng-template を指定したら、 AnguarJS が中のテキストを $templateCache にキャッシュしてくれる。 そして、ルーターでテンプレートの URL を指定するとき、 その script タグの id にすると $templateCache にキャッシュされて…

はてなブックマーク - ng-templat​e でテンプレートを HTML に埋め込む

最近また AngularJS が盛り上がってる気がする。 AngularJS のデータバインディングは魅力的だけど、自分は Backbone 派。 でも Backbone でもデータバインディング使いたい。 そこで New York Times 製の Backbone プラグイン backbone.stickit を試してみ…

はてなブックマーク - backbone.stickit を使って Backbone でデータバインディング

レーダーチャートを表示したいんだけど、 これまで Rails で使ってきた lazy_high_chart はどうも対応していないっぽい。 最近、JavaScript ライブラリをラップした gem を使うことに抵抗が出てきたので、 lazy_high_chart を使うのはやめて、他のライブラリ…

はてなブックマーク - レーダーチャートを描画したかったので Chart.js を試してみた

Rails アプリの JavaScript のテストは、 Konacha 使うのをやめて、Mocha を直接使っている。 Mocha は HTML サポートしているんで、 TestRunner.html 作ってブラウザで表示すればテストが実行され、 お手軽だ。 ただ、複数のブラウザでテストする場合、ブラ…

はてなブックマーク - Testem + Mocha + Chai で JavaScript のテスト

CoffeeScript と Sass のコンパイルを Grunt で行うようにしたら、 ついでに Hogan.js のテンプレートもコンパイルしたくなるのは仕方ないよね。 人として。 Grunt のタスクをインストール Grunt の contrib タスクには Hogan.js 用のタスクがあるので、npm …

はてなブックマーク - Grunt で Hogan.js のテンプレートをコンパイル

最近、Rails の CoffeeScript や Sass のコンパイルをアセットパイプラインではなく Grunt でやりたくなったんで、Grunt を試してみた。 まず Grunt をインストール。 npm install -g grunt-cli CoffeeScript と Sass をコンパイルするタスクは Grunt 公式の…

はてなブックマーク - Grunt で CoffeeScript と Sass をコンパイル

はじめに JavaScript テンプレートには backbone-rails がデフォルトでサポートしている EJS を使っていたけど、 backbone-rails 使うのやめたから EJS をあえて使う理由が無くなった。 自分の観測範囲内だと、JavaScript テンプレートでは Hogan.js と Hand…

はてなブックマーク - Rails で JavaScript テンプレートの Hogan.js を使う

はじめに Rails で Backbone.js を使ってアプリを開発するときは、決まって backbone-rails を使っていた。 codebrew/backbone-rails …んだけど、Backbone.js の v1.0.0 が出たというのに、backbone-rails は未だ対応してない(2013/07/02 現在)。 JavaScript…

はてなブックマーク - backbone-rails から Bower+Backbone.js に移行
検索
カテゴリー

引用をストックしました

引用するにはまずログインしてください

引用をストックできませんでした。再度お試しください

限定公開記事のため引用できません。

読者です読者をやめる読者になる読者になる
[8]ページ先頭
©2009-2025 Movatter.jp