SQLAlchemy の使い方: インストールからCRUD操作まで
概要 SQLAlchemyはPythonのORMフレームワークです。 SQLデータベースとのやりとりを抽象化し、Pythonで簡単にデータベース...
@rails/ujs パッケージを拡張して ajax メソッドを Promise 化する
概要 Ruby on Railsフレームワークの便利なライブラリである@rails/ujsには、Ajaxリクエストを簡単に行うためのajaxメソッドがあり...
Vue で コンポーネント内から子要素のテキストを取得する方法
概要 コンポーネント内の子要素のテキストを取得する方法について。 方法にはTemplate RefsとSlotsを使った2パターンがあります。 Template Refs...
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...