JavaScript でスタイルシートを構築する CSSStyleSheet 2024.10.26 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 スタイルが適用された CSSStyleSheet オブジェクトは、document.adoptedStyleSheets プロパティに代入することで、ページ

GitHub ActionsではGITHUB_TOKENで権限が足りない場合、PAT（Personal Access Tokens）がよく使われます。しかしPATより優れた選択肢があります。それがGitHub Appsトークンです。本記事ではGitHub Appsトークンの実装方法をゼロから学びます。目標はPATの完全駆逐です。 本記事で学べること PATとGitHub Appsトークンの違い GitHub Appsの作成・インストール方法 GitHub ActionsでGitHub Appsトークンを払い出す方法 本番運用で考慮すべきセキュリティとトレードオフ イントロダクション GITHUB_TOKENはGitHub Actionsのワークフロー開始時に自動生成され、終了時に自動削除されるトークンです。GITHUB_TOKENで済むなら、これがベストです。何も悩む必要はありません。問題

はじめに 競プロ(AtCoder)をやっていると、配列の要素数や検索回数が大きい場合、重複削除目的ではなく高速化のために、配列(Array, List)をSetやMap(Rubyの場合Hash)に変換することはよくあります。 さて、実業務ではどうでしょうか？ 実際に扱う配列の要素数、検索回数が$10^6$程度ということはそんなにないかもしれません。 むしろ、要素数や検索回数が100未満ということが多いのではないでしょうか？ では、この場合に、配列をSetやMap(or Hash)に変換する価値はあるのでしょうか？ もちろん、Set, Map(or Hash)になったものを、検索する速度が速いことはわかります。 しかし、SetやMap(or Hash)に変換するにもコストがかかります。 境界はどこでしょうか？ 今回、Ruby, Javascript, Kotlinで、Set, Map(or

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Rails 7.2 makes counter_cache integration safer and easier - BigBinary Blog 原文公開日: 2024/07/16 原著者: Navaneeth D 日本語タイトルは内容に即したものにしました。 参考: 週刊Railsウォッチ20240416: カウンタキャッシュからの読み出しをcounter_cache: { active: false }で制御できるようになった 参考: Add the ability to ignore counter cache columns while they are backfilling by fatkodima · Pull Request #51453 · rails/rails カウンタキャッシュは、Railsアプリケ

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: HotwireCombobox is pretty damn slick | justin․searls․co 原文公開日: 2024/03/29 原著者: Justin Searls -- Test Doubleの共同創業者です hotwireと相性バツグンの「コンボボックス（Web向けのドロップダウンボックスやセレクトボックスの一種で、項目を手入力すると他のオプションをフィルタできる）」の書き方を知るという大きな幸運を引き当てたので、今週の記事の執筆予定を変更することにしました。その後でたまたま目にしたRuby Weeklyで、同じことを既にやっている人がいることを知りました。 ちなみにその人は作者のJose Fariasで、これをHotwireComboboxと呼んでいます。ドキュメントページにはさまざまなデモが掲載されてい

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Quicktips for ViewComponent with Tailwind CSS/Hotwire | Rails Designer 原文公開日: 2024/01/22 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 フロントエンドのコードは、歴史的に少々軽く見られていました。「HTMLは本物の言語じゃない！」「CSSはサイテー！」「JavaScriptもそうだ！」。嘆かわしい話です。Railsは1個人だけの開発チームに、すべてが完全に揃った製品を構築できる本物のスーパーパワーを与えてくれるのですから。 Railsアプリ作成がさらに楽し

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: How to create Modals with Rails and Hotwire (and Tailwind CSS) | Rails Designer 原文公開日: 2024/01/31 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 2021年に導入されたHotwireのおかげで、Rails開発者はJavaScriptをほとんど書かずに高度なUIを作成できるようになりました。 モーダルは、近年のWebアプリで最も多用されるUIの1つです。たしかにHotwireならモーダルを非常に作成できますが、気をつけておきたい注意点がいくつかありま

英語を勉強していると、「The」という単語は、一度は聞いたことがあるでしょう。ある特定のものをさしたり、「その」と訳したりというイメージがあると思います。 しかし、この「The」は、厄介だと感じたこともありませんか？それもそのはずです。なぜなら、英語にしかない概念であり、普段の日本語にはあまり見られないからです。 しかし、いくつかの使い方とルールを覚えれば「The」の単語も怖くありません。今回は、英語の基本である「the」の使い方について学習していきます。ここでマスターして、「the」を自分のものにしていきましょう。 そもそも冠詞とは？ theの使い方 定冠詞a/anや無冠詞との使い方の違い 特定のものを表す 1つしかないものを表す 名詞が文中で2回以上使われる時 文法的に決められている theをつけない時って？ まとめ そもそも冠詞とは？ 冠詞とは、品詞の一つです。名詞や動詞のように冠詞

概要 わかりにくいタイトルですみません。 needs でjobを順番に実行したい 途中のjobはスキップする可能性あり でも一番最後のjobは必ず実行したい 途中のjobで失敗しなかったら最後のjobは必ず実行したい みたいなときの設定例を書きます。 設定例1 needs で順番に実行

TL;DR 突然ですがクイズです。「追跡ブランチ (tracking branch)」という言葉の使い方で正しいのはどれだと思いますか？ origin/master はリモートリポジトリの master を追跡する追跡ブランチである origin/master はローカルの master に追跡される追跡ブランチである ローカルの master は origin/master を追跡する追跡ブランチである 現在の正解は多分3番です。過去には1番でした。 分からなかった方、分かったけど他人に「追跡ブランチ」と言って伝わるか不安な方。大丈夫です。正確な用語1で言い換えることにしましょう。 origin/master はリモートリポジトリの master を追跡するリモート追跡ブランチ (remote-tracking branch)である origin/master はローカルの master

QAチームのいさな(@isanasan_)です。今回は筆者のお気に入りのツールをご紹介します。 モチベーション 先週コードレビューについての記事を書きました。 ジョインから1ヶ月経ちコードレビューで気を付けていることをまとめた こちらの記事の中でrebaseを使ってコミットログを整形することがレビューコストの低下に繋がると書きました。 しかし筆者はgitをcli上で使いこなすのはそれなりに難しいものだと感じており、特にinteractive rebaseは初学者にとって非常にとっつきにくい機能だと思っています。 そこで、今回は筆者が愛用しているgitのクライアントツールであるlazygitを紹介します。本稿ではハンズオン形式でgitの歴史改変の操作を説明していきます。尚、ハンズオンの題材に使ったコードは動作確認などはしていません。本題とは関係ないので細かいツッコミは無しでお願いします。 #

こんにちは。サーバーサイドエンジニアの三村（@t_mimura39）です。 さて、Railsエンジニアの皆さんは非同期処理にどのようなライブラリを利用していますか？ ちなみに弊社では Sidekiq を利用するプロジェクトが多いです。 tech.medpeer.co.jp 今回はRailsでの非同期処理ライブラリの新たな選択肢として誕生した「SolidQueue」について解説します。 github.com 目次 🙋 はじめに 🙋 📝 SolidQueueとは 📝 🚀 SolidQueueの特徴 🚀 🔓 「FOR UPDATE SKIP LOCKED」 とは 🔓 🍡 3種類のアクターについて 🍡 起動方法 （おまけ）二つの起動モードについて 🚶 SolidQueue実装の歩き方 🚶 モデル アクター 🥞 SolidQueueのモデル（テーブル）🥞 Jobの状態遷移

コンバンハ、千葉（幸）です。 皆さんは、 PassRole と AssumeRole についてきちんと理解ができていますか？どちらも IAM ロールに関するものですね。 私はカラダ（ボディ）の調子がいい時は思い出せるのですが、雨が降っている日や、ちょっと疲れて気を抜いた時にはすぐ分からなくなってしまいます。 ということで、イメージとして脳に刻み付けることによって忘れられなくしてやろうと思いました。 そこで出来上がったのが以下です。 間違えました。以下です。 あ、でもやっぱり忘れづらいのはこちらかもしれませんね。 どうですか？もう忘れられなくなりましたね？ 先にまとめ IAM ロールには以下ポリシーを設定できる アイデンティティベースポリシー Permissions boundary 信頼ポリシー AWS リソースに IAM ロールを引き渡す際には PassRole の権限が必要 PassR

[アップデート] AWS CloudFormation の Git 同期機能がプルリクエストにスタック変更内容をコメントしてくれるようになりました いわさです。 AWS CloudFormation は Git リポジトリとスタックを同期させて、簡易的な CI/CD 環境を用意することが出来ます。 今朝のアップデートでこちらが強化され、CloudFormation がプルリクエストにスタックへの変更内容をコメントしてくれるようになりました。 Git 同期では CloudFormation が特定のブランチを監視し、変更が発生すると自動でスタックがプロビジョニングされるような動きとなっているのですが、このアップデートではユーザーが作成したプリリクエストのマージ先が監視対象のリポジトリだった場合、マージ前でスタック変更セットの内容をプルリクエスト上でコメントしてくれます。 これによってレビュー

こんにちは。サーバーサイドエンジニアの三村（@t_mimura39）です。 さて、Railsエンジニアの皆さんは非同期処理にどのようなライブラリを利用していますか？ ちなみに弊社では Sidekiq を利用するプロジェクトが多いです。 tech.medpeer.co.jp 今回はRailsでの非同期処理ライブラリの新たな選択肢として誕生した「SolidQueue」について解説します。 github.com 目次 🙋 はじめに 🙋 📝 SolidQueueとは 📝 🚀 SolidQueueの特徴 🚀 🔓 「FOR UPDATE SKIP LOCKED」 とは 🔓 🍡 3種類のアクターについて 🍡 起動方法 （おまけ）二つの起動モードについて 🚶 SolidQueue実装の歩き方 🚶 モデル アクター 🥞 SolidQueueのモデル（テーブル）🥞 Jobの状態遷移

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ

はじめに ウホウホ。 Rustを使い始めてちょうど2年くらい経って、すこしRustのことがわかってきたので、改めてGoとRustのそれぞれの違いを整理したいなと思いこの記事を書きました。 筆者はウェブ開発の経験しかないので、ウェブを中心にまとめています。 気づいたらかなりな量になってしまったのとGopher向けにRustを紹介するような記事になってしまいましたが、よければ読んでみてください。 筆者について Goを使い始めて7年ほど経っていて、これまでCLI/TUIツールをいくつか作ってきました。 スペシャリストではないですが、プロダクトでGoを書く分には特に問題ないレベルかなと思います。 Rustは2022年夏ころから使い始めてちょうど2年ほど経ちました。 なにかツールを作ったわけではないですが、勉強がてらにいくつか作ったもの・書いた本があります。 普通にRustを書く分には問題ないですが

Ruby 3 の静的型解析について 私が業務で Ruby を書いていた時期は数年前で最近の Ruby についてキャットアップが遅れていました。 最近は Go・TypeScript など型を書くことがほとんどなので Ruby 3 系で導入された型解析について気になっていました。 Ruby って型が無いよねと肩身が狭い生活をしているので(型だけに)、Ruby でも出来らあっ！というところを見せたいと考え書いてみることにしました。 作るもの HackerNews API を利用して HackerNews の API Client を作ります。要件は以下です。 gem として実装する これはなんやかんやで私が gem を書いたことがないので勉強の一環です。特に gem で書く必要はありません rake タスクを実行すると Hacker News のトップページに相当する情報(タイトル, point