patorashのブログ

方向性はまだない

JavaScript

SprocketsをやめてWebpackerに移行したのでどうやったか公開する

ようやくSprocketsからWebpackerに移行したので、そのためにやったことをまとめておきます。 移行前の状態 Railsのバージョンは6.0系 Sprockets4 CoffeeScript Sass Bootstrap3を使用 yarnは使ってる 筆者(私)はECMAScriptに関してはそこまで詳しくなくて…

webpack実践入門を読んだ

先日子供を車に乗せるときに背中を痛めてしまってしんどいです 寝返りを打つのも痛いし、咳・クシャミしても痛い状態です。どうも「ぎっくり背中」というらしいです。 出かけるのもしんどかったため、家でゴロゴロしつつ、この本を読んでみました。 webpack …

Docker上でWebpackerがファイル変更を検知できない件に対応した

担当しているRailsプロジェクトのフロントエンド環境をSprocketsからWebpackerに移行しようとしていて、ここ最近辛い毎日です。 とりあえず、scssの移行は終わったので、今はCoffeeScriptのコードをできるだけそのままでWebpackerに乗っけようとしているので…

c3.jsのスタックバーチャートの表示順を変更する

c3.jsでスタックバーチャートを書いた際に、スタックバーの順番を変更できないか?という要望を受けたので調査しました。凡例の順番とツールチップで表示される順番がリンクしていないので、見辛いということでした。 公式ドキュメントによると、data.order…

c3.jsでスタックバーチャートをパーセント表示にする

またまたc3.jsネタです。 c3.jsでスタックバーをするのは簡単で、そのスタックバーの軸を100%にするように表示するのも簡単です。dataのところでstack: { normalize: true }とすればできます。 しかし、それだとチャートは%表示になるのですが、ツールチップ…

c3.jsでスタックバーチャートのラベルを縦中央揃えにする

c3.jsでスタックバーチャートを描画するのは、比較的簡単です。dataのところでgroupsに含めてしまえばいいです。 しかし、値のラベルがバーの上に表示されてしまいます。これでもいいケースは多いと思いますが、ラベルの色がバーの色になるため、合わない色…

d3.js, c3.jsで描いたチャートを印刷する

d3.jsを皆さまはご存知でしょうか?data-driven-documentの頭文字をとって、d3.js。JavaScriptでsvgでチャートを書くためのライブラリです。 d3js.org そして、d3.jsをベースにチャートを生成しやすくしたライブラリがc3.js。 c3js.org c3.jsで描いたチャー…

GETメソッドのFormでの画面遷移をTurbolinksに委ねる

今作ってるアプリケーションではTurbolinksを効かせてて、かなりいい感じだな〜と思ってるのですが、一覧で検索した結果や表示件数を変更した場合に、ページの更新が発生してサクサク移動してたのに、ここでもたつくなぁ…と課題に感じていました。 なんとな…

プロジェクト配下のnodeのコマンドを実行する

Rubyでいうところのbundle exec 〜に該当するNodeのコマンドってなんだろう?と思って雑に呟いたら、色々と教えてもらえました。 npx とか npm install --global とかあります— りんごガチアサリをXにした (@mstssk) 2019年4月2日 npxがいやだったらyarn run…

「はじめてのフロントエンド開発」を写経した(React Native以外)

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎出版社/メーカー: 技術評論社発売日: 2018/05/09メディア: 単行本(ソフトカバー)この商品を含…

コンポーネント内でreCAPTCHAを使う場合の注意点

昨日Qiitaに書いたのですが、knockout.jsでreCAPTCHAのURLを貼ってデフォルトの動作に任せると、うまく動きませんでした。 qiita.com 原因はコンポーネントの中で使っているから、コンポーネントの描画が終わる前にreCAPTCHAのデフォルトのonloadイベントが…

Stimulus Handbookを大体やったので所感を書く

Ruby on Railsを開発したDHHの会社のBasecampがStimulusというJSライブラリを発表したという話があり、気になっていたので試してみました。 Stimulusとは? Stimulusはいわゆるフロントエンド系のJSライブラリなのですが、JSでゴリゴリにHTMLを操作する系で…