前回の記事はこちら。 patorash.hatenablog.com 今回は、prettierを導入して、gitでcommitする際にrubocopだけでなくprettierでもフォーマットチェックをさせるようにした話です。 prettierとは？ prettierは、フロントエンド用のコードフォーマットツールで…

仕事で、とあるRailsアプリを作っているのですが、そこでstimulusを採用していました。そうしたらちょうど少し前にstimulusのバージョン2.0.0がリリースされていました。このバージョンアップによって、かなり書きやすくなりました。 今までと何が違うのか？…

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

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

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

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

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

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

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

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

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

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

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

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