99 Blues

2の補数計算をRubyで実装する方法

概要 2の補数計算は、負の数の表現やビット演算などに利用されます。今回は、Rubyを用いた2の補数計算の実装方法について解説します。 2の補数計...

Gemfile で使われる Bundler のバージョンを上げる方法

概要 Gemfile に記載されている Bundler のバージョンを上げる方法を紹介します。手順最新の bundler をインストールします。 gem install bundler # gem install bundler:2.4.5 => バージョンを指定したい場合イ...

Rails 7 で JWT を使った認証 API を実装する

概要 Rails で JWT を使った認証APIの実装例を紹介します。トークンにはアクセストークンとリフレッシュトークンの2種類を使用します。実行環境は以下の通...

Nuxt 3 で Markdown ベースのブログを作る

概要 Nuxt 3 で Markdown を利用したブログサイトを作成します。今回作成する完成形はこちら .iframe-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 環境構築 Nuxt プロジ...

QRコードジェネレーターを Vue3 で実装する

概要 QRコードを生成できるアプリを Vue3 で実装します。生成したQRコードを読み取るとあらかじめ入力したURLにリンクするようにします。 QRコード...

Vue3 でテキスト翻訳アプリを作成する

概要外部APIと連携して入力したテキストを翻訳できるアプリを Vue3 で実装します。今回、実装するアプリの完成品は以下のようになります。 .iframe-wrapper { position: relative; padding-bottom: 56.25%;...

Vue3 で作るカウントダウンアプリ

概要特定の日まで何時何分何秒かを表示してリアルタイムでカウントダウンするアプリを Vue 3 で実装します。 Countdown コンポーネントの作成まずは、src/co...

Nuxt 3 プロジェクトセットアップからページ作成まで

Nuxt 3 プロジェクトの作成 npx nuxi init <project-name> 実行すると新しくフォルダが作成されるので、そこへ移動してパッケージのインストールをします。 yarn dev で localhost:3000 に開発環境が...

Vue 3 の状態管理ライブラリ Pinia のイントロダクション

概要 Vue 3 の新しい状態管理ライブラリ Pinia の使い方について簡単に紹介します。インストールまずはcreatePiniaを呼び出します。その前にuse...

ReactLeafletで画像を地図の代わりに使う方法

概要 ReactLeafletで画像を地図の代わりとして扱う方法について紹介します。セットアップ npm install react-leaflet leaflet CRS.Simple 画像を地図として使うにはCRS.Si...