ryogift | web developer blog

Web開発者のブログです。

技術

Rails 7にアップグレード後に脱Webpackerしてみた

はじめに Ruby on Railsのバージョンが7系になってから、Webpackerが廃止されました。 詳しい経緯はWebpackerのリポジトリから確認できます。 github.com 個人的にWebpackerは扱いにくくビルド時間が遅いため、脱Webpackerをするにはどうすればいいのかが気…

2021年のWeb開発者としてのふりかえり

今年も残すところ僅かですね。1年が過ぎるのが年とともに早くなっている気がします。今年はWeb開発者の仕事をするようになってから8年目を迎え、転職をした年でした。記憶の新しいうちにWeb開発者として、今年はどんなことをしてきたのかを記録に残したいと…

TypeScript と Jest で単体テストの環境構築

Freepik - jp.freepik.com によって作成された background ベクトル TypeScript を使ってみたくなりましたが、単体テストを実行するまでの環境構築に手間取ったので、手順を残します。

railsでwebpackerのみ使う方法

Macrovector - jp.freepik.com によって作成された design ベクトル rails6で新規にアプリケーションを作成するとアセットパイプラインは、SprocketsとWebpackerが同梱されています。主にCSSファイルと画像ファイルはSprockets、JavaScriptファイルはWebpack…

Hash#transform_keysを利用する

先日行った知床峠の写真です。本記事とは無関係です。 久しぶりにRuby on Rails APIモードのアプリを確認していたら、rubocop さんからの警告が表示されていました。Class: RuboCop::Cop::Style::HashTransformKeys の警告でハッシュのキーを変換するだけで …

Next.js + Material-UIでリロードした時のエラーについて

Next.js + Material-UI(styled-components)を使ってリロードしたときに、以下のエラーが発生してスタイルが崩れました。 Warning: Prop `className` did not match.

Vue.jsで簡単なテストを書いてみる

Vue.jsによって、生成されたDOMの結果を確認する。

Reactで簡単なテストを書いてみる

Reactによって、生成されたDOMの結果を確認する。

ダック・タイピングを例に動的型付け言語と静的型付け言語の違い

ダック・タイピングとは If it walks like a duck and quacks like a duck, it must be a duck. (もしも、それがアヒルのように歩き、アヒルのように鳴くのなら、それはアヒルに違いない。) デーブ・トーマスより ダック・タイピングは、オブジェクトに何…

ES6とReactとVue.jsの基礎を学ぶ

JavaScriptの勉強 最近、JavaScriptを中心に勉強しています。業務ではVue.jsを使っていますが、Reactにも興味があり少しずつコードを書き始めました。ReactはSimple、Vue.jsはEasyと言われておりますが、その意味も理解できるようになってきました。私は下記…

Vue.jsでfunctionの省略記法

Vue.jsのガイドでfunctionを使っている部分を見つけたので直感でArrow Functionの記法を使ってみましたが、正常に動きませんでした。 引用元: はじめに — Vue.js // functionありの記法 const app = new Vue({ el: "#app", data: { message: "Hello Vue.js!"…