JavaScript

Google SignInするSPAとGoサーバー間のセッション管理

書き出したら長くなってしまい4回分になってしまった日記です。 ReactとGoogle Sign-In ReactRouterを使ってGoogleログイン前と後で画面を変える ReactRouterを使ってGoogleログイン前と後で画面を変える(続き) 今日は、Google SignInでログインした後、自…

ReactRouterを使ってGoogleログイン前と後で画面を変える(続き)

前回、前々回に引き続き、Google Sign-In をReactなSPAで使った時の日記です。 今回は、前回できなかった /login と /private のルーティングを実装する。 /login ログイン前: ログインページを表示 => ログインに成功すると / へ遷移 ログイン後: / へ遷移 …

ReactRouterを使ってGoogleログイン前と後で画面を変える

前回に引き続きGoogle Sign-In をReactなSPAで使ってみた時の日記、2日目です。 今回はReactRouterを使って、ログイン前と後で画面を変えてみます。 ReactRouterを導入 ReactRouterを使う。バージョンは 4.2.2 。 $ npm install --save-prod react-router-do…

ReactとGoogle Sign-In

Google Sign-In をReactなSPAで使った時の日記です。 サーバーとの連携やセッションの管理について少し悩んだのでメモっておきます。ちょっと長くなりそうなので何回かに分けます。 Google Sign-In Google Sign-Inと言っているのはこれのこと。 developers.g…

MobX + Babel + webpack + Flow

地元の勉強会のための準備です。 yokohama-north.connpass.com 前提 $ node -v v8.2.1 $ npm -v 5.3.0 準備。 $ npm init MobX インストールします。 $ npm i mobx -D MobXを使ったストアのサンプル。このチュートリアル分かりやすいです。 MobX: Ten minute…

DropboxのMarkdownをちょっと便利に使うツールをつくった

Githubのwikiで十分足りるんだけど、ちょっと欲しかったのでつくった! Dropboxに保存したmarkdownをGFMに対応して表示したり編集したりするツール。 Markdown-box コードはこちら。 github.com JavaScriptでDropboxのAPIを叩いてるだけ。せっかくなのでReac…

grails-react-boilerplate で React に入門した - 3日目 Babel, ESLint

前回、React Routerを使ったルーティング、サーバーとのデータ通信までできました。しかし、これまでECMAScript 5 (ES5) でJavaScriptを書いてきましたが、grails-react-boilerplateではECMAScript 2015 (ES2015) でJavaScriptが書かれています。 今回はBabe…

grails-react-boilerplate で React に入門した - 1日目 ホットリロード, React Bootstrap

普段の仕事はサーバーサイドばっかりだったので、年末年始でフロントエンドの知識をアップデートしたいなぁ、ReactかVue.jsやろうかなぁと思ってました。それで、こちらの記事を読んでると... uehaj.hatenablog.com サーバサイドJavaをずっとやってきて、モ…

RxJavaを使ってReactiveX (リアクティブ エクステンション)に入門した

ちょっとタイミング遅れてるけど、ReactiveX (Rx, Reactive Extensions) を勉強してみました。 TwitterやWeb上の記事などでよく目にしてたので気にはなってたのだけど、先日やっと触ってみました。 備忘録です。メモメモ。 使ったRxJavaのバージョンは、1.0.…

Fabric.jsを触ってみた

jsCafe19でFabric.jsを触ってみた話をしてきました。 そのときのスライドです。 Fabric.jsを触ってみた 作ってみた簡易なゲームです。 Flappy Ball MV*フレームワークとCanvas系のライブラリを一緒に使うとうまく書けないですよねー、って懇親会で話してま…

D3.jsのenter()が分からなかったのでコードリーディングしたメモ

前回、D3.jsでレーダーチャート書いてて、enter() で何が起きてるのかよく分からなかったのでソースコードを読んでみました。そのときのメモです。 長くなりました。一番下の方にまとめもあります。 読んだD3.jsのバージョンは、3.4.2です。 読んでみたらent…

D3.jsでレーダーチャートを書く(3日目)

前回に引き続きレーダーチャートを書き続けます!とりあえず今回で終わりにします。 今日は頂点にラベルをつけてみるのと、チャートを色分けするのをやってみます。 ラベル 各頂点が何番目のパラメータが対応しているのかを表示したいです。 SVGのtextを使う…

D3.jsでレーダーチャートを書く(2日目)

前回の続きです!引き続き、D3.jsでレーダーチャートを書きます。 レーダーチャートは書くことはできましたが、SVG領域の大きさが100×100であることが前提でコーディングされてます。 たとえば、前回作成したline関数はこんな感じでした。 var dataset = [ […

D3.jsでレーダーチャートを書く(1日目)

今年からD3.jsに入門しました。 チュートリアル(D3 入門 | スコット・マレイ | alignedleft)を読み終えたので、作ってみたかったレーダーチャートを作ってみます。こちらのサイト(->svg要素の基本的な使い方まとめ)を参考にさせていただきました。 D3.js…

Karma + Mocha でRequreJSを使ったJavaScriptをテストする

たまにやると忘れてるのでメモ。 Karmaはnode.jsベースのテストランナーで、ターミナルからテストを実行できて、複数のブラウザを立ち上げてテストを実行したり、ファイルの変更を監視して自動でテストを実行したりもできます。 RequireJSを使ってるJavascri…

RequireJSにはこんな機能もあった

この記事はJavaScript - Client Side - Advent Calendar 2013 17日目の記事です。 JavaScriptでモジュール管理を実現できるRequireJSですが、どんくらい使われてるのでしょうかねー?初めて触ったときは、すげー!って思ったのを覚えています。 でも、試しに…

セレクトボックスを選択しやすくするjQueryプラグイン

都道府県とかで長いセレクトボックス嫌ですよね。セレクトボックスを使いやすくするjQueryプラグインを作りました。 ソースはGistに張りました。 セレクトボックスを選択しやすくするjQueryのプラグイン · GitHub 下のようにすればセレクトボックスが拡張さ…