この記事では、DeviseとOmniAuthを使ってGitHubのOAuth認証を導入する手順を解説します。 Deviseのユーザ認証機能を持つRailsアプリに「GitHubでログイン」する機能を追加します。 OAuthの概要については、以下の記事をご参照ください。 qiita.com qiita.com…

2023/11/25に開催されたISUCON13に参加しました。(チーム名：gogo511) 最終スコアは6909点で、(多分)351位でした。 isucon.net 事前準備 メンバー全員ISUCON初参加。とりあえず参加してみてインフラ周りの勉強になったらいいねくらいの感じでした。 自分は開…

rubyide/vscode-rubyが非推奨になり、代わりに Shopify/vscode-ruby-lsp を使うように公式から勧告が出ました。 この記事ではShopify/vscode-ruby-lspを導入する手順を紹介します。 formatterにはrubocopを使用します。 1. 開発環境 VSCode：1.84.0 Ruby：3.…

この記事では、ヘッドレスブラウザ(Chrome)でRailsアプリのJavaScriptをデバッグする方法を紹介します。 この方法を用いると、ヘッドレスブラウザでも通常のChrome DevToolsのデバッグと同じようにページのライブビューを表示しながらデバッグすることが可能…

<ul> <li><a href="#top">TOP</a></li> <li><a href="https://developer.mozilla.org">mozilla</a></li> <li><a href="https://example.com">example</a></li> <li><a href="https://www.yahoo.co.jp">yahoo</a></li> </ul> /* 前方一致 "#"から始まる */ a[href^="#"] { color: fuchsia; } /* 後方一致 ".org/"で終わる */ a[href$=".org"] …

1. 検証環境 MacBook Pro (13-inch, 2020) macOS Ventura 13.4.1 Rails 6.1.4.7 Ruby 3.1.0 rbenv 1.2.0 capybara 3.39.1 webdrivers 5.2.0 selenium-webdriver 4.9.1 Google Chrome 115.0.5790.114 2. エラー内容 Railsでテストを実行しようとしたら以下の…

1. はじめに rails db:migrate:statusを実行すると、時々NO FILEと表示されることがある。 up 20230331081736 ********** NO FILE ********** 主に以下のパターンの時にNO FILEのマイグレーションが表示される migrate実行後に誤ってマイグレーションファイ…

1. はじめに Railsアプリの開発において、スキーマに変更がある状態でgitのブランチを切り替える際には注意が必要です。 ブランチを切り替えると、ソースコードは切り替わりますが、データベースのスキーマは変更されません。 これはスキーマがブランチを跨…

この記事では、Prettier for Rubyを使って、Railsのコードを自動フォーマットする方法を紹介します。 VSCodeでファイルを保存する際に自動フォーマットできるようになります。 1. 検証環境 2. 設定手順 2-1. @prettier/plugin-rubyのインストール 2-2. gemの…

この記事ではletter_opener_webを使ってRailsの開発環境で送信したメールをブラウザ上で確認する方法を紹介します。 1. 実行環境 macOS：12.5.1 Ruby：3.1.2 Rails：6.1.7 letter_opener_web：2.0.0 2. letter_opener_webの設定方法 gemのインストール confi…

Railsアプリはデフォルトでbin配下に各種のbinstubを作成する。 bin/yarnはyarnのbinstub。 bin/yarnがどうやってyarnを実行しているのか気になったので、bin/yarnのコードを読んでみた。 1. 実行環境 Rails：6.1.7 Ruby：3.1.0 2. bin/yarn 自分の環境では…

Railsのシステムテストのテスト失敗時に作成されるスクリーンショットなんかを見る時に便利。 open path/to/file.png open Man Page - macOS

レビューステータスでのフィルタリングでは特定のユーザーがレビューしたPRのフィルタリングはできない。(自分がレビューしたPRのフィルタリングはできる) PRをレビュアーで絞り込むには以下の検索修飾子を使う。 reviewed-by:USERNAME 特定のユーザーによっ…

この記事ではReactにおけるスプレッド構文の使い方を解説します。 Reactにおいて、スプレッド構文は主にstateが保持するオブジェクトや配列を更新する際に使われます。 1. オブジェクトのスプレッド構文 ネストしたオブジェクトの場合 2. 配列のスプレッド構…

この記事では、ESモジュール(ECMAScriptモジュール, JavaScriptモジュール)のimportとexportの使い方を紹介します。 Node.jsでESモジュールを使う方法は以下を参照ください。 ama-tech.hatenablog.com 1. 名前付きエクスポート(Named exports) 2. デフォルト…

結論 safe_joinを使えば、タグをエスケープしてXSS攻撃を防ぎつつ、連続した改行も反映される。 <% text = "1行目\n\n\n2行目<script>alert()</script>" %> <%= safe_join(text.split("\n"), tag.br) %> # 1行目 # # # 2行目<script>alert()</script> 結論に至るまでの道のり その1 <% text = "…

この記事ではVue.jsで基本的なSPA(Single Page Application)を作成する方法を紹介します。 create-vueを使用 Vue3でComposition APIを使用 データはLocalStorageに保存 PiniaやVue Routerは使用しない 1. 実行環境 2. アプリの要件 3. 作成手順 3-1. create-…

この記事ではnpmパッケージの公開・バージョンアップ・削除方法を紹介します。 npmパッケージを公開するには、事前にnpmアカウントの作成とGitHubリポジトリの作成が必要です。 docs.npmjs.com 1. 環境 2. npmパッケージの公開 2-1. package.jsonの作成 2-2.…

この記事では、Node.jsでメモの追加・一覧・参照・削除ができるコマンドラインアプリを作成します。 データの保存先にはJSONファイルを使い、JavaScriptのclass構文を使って作成します。 1. 実行環境 2. アプリの要件 2-1. メモの追加 2-2. メモの一覧 2-3. …

1. 環境 MacBook Pro (13-inch, 2020) macOS Ventura 13.1 Homebrew：3.6.20(※) xcode-select：2396(※) ※ エラー解決後のバージョン 2. 発生した問題 rbenvでRuby 3.1.1をインストールしようとしたら以下のエラーが発生。 $ rbenv install 3.1.1 Downloading…

CLIでフラッシュ暗算ができるnpmパッケージを作成しました。 www.npmjs.com npmパッケージの公開方法は以下を参照ください。 ama-tech.hatenablog.com この記事では、JavaScriptでフラッシュ暗算ゲームを作成する方法を解説します。 1. 実行環境 2. フラッシ…

この記事ではVue.jsでToDoリストアプリを作成する方法を紹介します。 HTML, CSS, JSだけを使用し、データはLocalStorageに保存し、Vue3でOptions APIを使用します。 1. 実行環境 2. ToDoアプリの要件 3. 作成手順 3-1. ToDoの登録と一覧表示 3-2. ToDoの削除…