Rails: Webpackをesbuildに移行してJSのビルドを縮小・高速化（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: How I migrated a Rails app from Webpack to esbuild and got smaller and faster JS builds | Arkency Blog 原文公開日: 2022/08/29 原著者: Jakub Kosiński サイト: Arkency 原文の章立ての一部を訳文で変更しています。 先週、私はJavaScriptコードが30万行を超えるかなり大規模なプロジェクトで、Webpack 4をesbuildに移行する作業を担当しました。私たちのRailsプロジェクトではJavaScriptスタックをメインアプリケーションに統合するのにWebpackerを使っていました。ここ数か月はもっぱら長時間のビルドと格闘し続け、さらにWebpackerが推奨ライブラリでなくなったこ
Better Stimulusガイド 08: Rails-ujs（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Submit a Form Programmatically - Better StimulusJS 原文更新日: 2022/01/29 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS フォームをプログラムで送信する <div data-controller="remote-form"> <%= form_with(model: @article, html: { data: { action: "ajax:success->remote-form#onPostSuccess" } }) do |f| %> <%= select_tag "author", options_from_collection_for_select
Better Stimulusガイド 07: SOLID原則（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Single Responsibility Principle - Better StimulusJS 原文更新日: 2020/04/13 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 単一責任の原則 特に、StimulusJSを初めて自分のアプリケーションに適用するときは、コントローラを「ページコントローラ」スタイルで書きたくなる誘惑に負けて、1個のコントローラ内に無関係な機能が散らばる結果になりがちです。誘惑に打ち勝って、コントローラを再利用可能な形で書くよう心がけましょう。 以下は両者を簡潔な形で並べたものです。 Bad <!-- page.html --> <div data-controller="page
Better Stimulusガイド 06: コントローラ間通信にコールバックを使う（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use Callbacks to Communicate Between Controllers - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 コントローラ間通信にコールバックを使う（翻訳） 単一のStimulusJSコンポーネントで複数のロジックを管理したい場合 機能を実行するために他のコントローラの値が必要な場合 あらゆるケースに対応するためにイベントをたくさん作りたくない場合 話を簡単にするために、以下の例ではカスタムイベントのコンストラクタが不要なjQueryを使っていますが、素のJavaScriptも使えます。 Bad // fir
Better Stimulusガイド 06: コントローラとDOMのマッパー（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Controller DOM Mapper - Better StimulusJS 原文更新日: 2020/03/09 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 コントローラとDOMのマッパー こんなときに使いたい あるコントローラの内部ステートに外部からアクセスしようとする場合 コントローラから別のコントローラのメソッドを呼び出す必要がある場合 たとえば、コントローラが処理を行うために、今どのページにいるのかという情報を別のコントローラから得る必要があるとします。 <!-- index.html --> <div data-controller="pagination test" data-pagination
Better Stimulusガイド 04: イベントリスナーの追加・削除はStimulusで行う（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Events - Better StimulusJS 原文更新日: 2021/07/16 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 1. マークアップにグローバルなイベントを登録する Bad connect() { document.addEventListener(...); } Good <div data-controller="gallery" data-action="resize@window->gallery#layout">...</div> layout(e) { ... } そうする理由 イベントリスナーの追加や削除はStimulusが行うからです。 この方法が使えない場合 コントローラのコー
Better Stimulusガイド 03: エラーハンドリング（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Global Error Handler - Better StimulusJS 原文更新日: 2022/02/17 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 グローバルなエラーハンドラ こんなときに使いたい Stimulusに関連するエラー（connectエラー、targetsにアクセスできないなど）やアプリケーションエラーをコントローラ内でキャッチして、SentryやHoneybadgerなどのエラートラッキングサービスに送信したい場合。 ソリューション 最初に、自分のStimulusコントローラが継承するグローバルなApplicationControllerを作成します。 このApplicationCont
Better Stimulusガイド:アーキテクチャ4: 名前空間化された属性（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Namespaced Attributes - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 名前空間化された属性 Good <!-- index.html --> <input data-controller="filter" data-filter-param-category="cats" data-filter-param-rating="5" data-filter-param-color="black" type="text" data-action="input->filter#update"> // filter_controll
Better Stimulusガイド:アーキテクチャ3: ミックスイン（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Mixins - Better StimulusJS 原文更新日: 2020/10/08 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 3. ミックスイン Bad // overlay_controller.js import { Controller } from "stimulus"; export default class extends Controller { showOverlay(e) { // ... } hideOverlay(e) { // ... } } // dropdown_controller.js import OverlayController from "./overlay_con
Rails 6+Webpacker開発環境をJS強者ががっつりセットアップしてみた（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Rails 6: the missing developer setup guide - DEV Community 💻💻 原文公開日: 2019/11/19（最終更新: 2019/12/17） 著者: Vincent Voyer 日本語タイトルは内容に即したものにしました。画像はすべて元記事からの引用です。 原文の目次は省略しました。原文の乱れは訳文で修正してあります。以下のRailsガイドもどうぞ。 Webpacker の概要 - Railsガイド 更新履歴: 2019/11/28: 初版公開 2021/05/06: 更新 👋皆さんこんにちは。本記事では私がRubyやRuby on Railsを学んだ一環として、ドキュメントに書かれていないことを全部盛りしました。RubyやRailsのエコシステムは初めてなので、皆さまか
JavaScriptスタイルガイド 15〜26: 比較演算子、ブロック、制御文、型変換、命名規則ほか （翻訳）｜TechRacho by BPS株式会社
1〜8: 型、参照、オブジェクト、配列、関数ほか 9〜14: クラス、モジュール、イテレータ、プロパティ、変数、巻き上げ 15〜26: 比較演算子、ブロック、制御文、型変換、命名規則ほか -- 本記事 概要 AirbnbによるJavaScriptスタイルガイドです。 MITライセンスに基いて翻訳・公開いたします。 英語スタイルガイド: airbnb/javascript: README.md 更新日: 2017/09/08 著者: Airbnb github.com/airbnbより 凡例 原文にはありませんが、項目ごとに目安となる分類を【】で示しました。 【必須】【禁止】：従わないと技術的な悪影響が生じる 【推奨】【非推奨】：技術上の理由から強く推奨される、または推奨されない 【選択】：採用してもしなくてもよいスタイル 【スタイル】：読みやすさのためのスタイル統一指示 【知識】：指示に該
JavaScriptスタイルガイド 9〜14: クラス、モジュール、イテレータ、プロパティ、変数、巻き上げ（翻訳）｜TechRacho by BPS株式会社
2017.09.21 JavaScriptスタイルガイド 9〜14: クラス、モジュール、イテレータ、プロパティ、変数、巻き上げ（翻訳） 1〜8: 型、参照、オブジェクト、配列、関数ほか 9〜14: クラス、モジュール、イテレータ、プロパティ、変数、巻き上げ -- 本記事 15〜26: 比較演算子、ブロック、制御文、型変換、命名規則ほか 概要 AirbnbによるJavaScriptスタイルガイドです。 MITライセンスに基いて翻訳・公開いたします。 英語スタイルガイド: airbnb/javascript: README.md 更新日: 2017/09/08 著者: Airbnb github.com/airbnbより 凡例 原文にはありませんが、項目ごとに目安となる分類を【】で示しました。 【必須】【禁止】：従わないと技術的な悪影響が生じる 【推奨】【非推奨】：技術上の理由から強く推奨さ
RailsConf 2017のパフォーマンス関連の話題（3）「あなたのアプリサーバーの設定は間違っている」など（翻訳）｜TechRacho by BPS株式会社
「RailsConf 2017のパフォーマンス関連の話題」は今回で完結です。 第1回: BootsnapやPumaなど -- 開発中のRailsをBootsnapで倍速起動するなど 第2回: rack-freezeやsnip_snipなど -- スレッドバグや未使用カラムの検出など 第3回: 「あなたのアプリサーバーの設定は間違っている」など（本記事） 概要 原著者より許諾を得て翻訳・公開いたします。 元記事: Railsconf 2017: The Performance Update 著者: Nate Berkopec (@nateberkopec): Railsのパフォーマンスコンサルタントです。 主著: The Complete Guide to Rails Performance 楽しい画像はすべて元記事からの引用です。 7. あなたのアプリサーバーの設定は間違っている 私は今回
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
