もふもふ技術部

IT技術系mofmofメディア

JavaScript

【Rails7】任意のviewsからJSファイルを個別に読み込む

このviewsだけにこのJSを読み込みたい・・・! という時があると思います。 今回はそんな時のためにJSファイルを個別に読み込む方法を紹介します。 (esbuildを使用している前提で進めていきます) 手順 package.json に記載されているビルドスクリプトのビ…

【Recharts】Reactでレーダーチャートを描画する

今回は、Reactでチャートを描画するライブラリ、Rechartsを使ってレーダーチャートを描画します。 早速余談ですが地名からじゃんけん力を算出してじゃんけんできるサービスをつくりました。グー力(りょく)とかが算出されます。残念ながら対人戦はできません…

Apolloをストアとして活用する Next.jsのwith-apollo exampleをベースに解説

2020終わり頃のApollo Client 3から、 reactive variables なるものが追加されたようです。リアクティブな変数を持たせることができるようになったということです。 New in Apollo Client 3, reactive variables are a useful mechanism for storing local s…

Next.jsでログイン機能の実装 NextAuth.js

Next.jsで使える認証ライブラリ、next-authでGoogle認証を試してみます。 公式を参考にしつつ動くところまでやってみます。永続化とかはしません。 ちなみに今回の内容はこのあたりに何もかも書いてあります。 https://next-auth.js.org/getting-started/exa…

【超便利】Javascript日付ライブラリ・date-fns

Javascriptを使ってフロントエンドで日付操作をする事って結構あると思いますが、Dateオブジェクトを使うとクセが強すぎて意図しない動きになったりしますよね。 最近会社のプロジェクトで日付操作をDateオブジェクトを使っていて悲鳴をあげてたんですが、da…

Vue.jsはどのようにComputed Propertyの依存関係を解決しているのか

photo by Josh Hallett Vue.jsのcomputed property(以下computedと表記)がどのように依存しているdataが更新されたときだけ再計算されるのかを調べてみました。 基本的なcomputed propertyの使い方 目的の異なるcomputedが複数あるとします 依存関係が違う…

RubyをJavaScriptにしてしまうOpalを触ってみる

公式 TL;DR Opal導入する TL;DR 全部Rubyでかけるのがうま味? Rubyに慣れ親しんだJS初心者は嬉しいかも? なOpal入門してみます。導入からアプリがちょっと動くところまで。 Opal導入する 適当なプロジェクトを作成して、準備します。 GemfileにOpalを追加 …