npxを使って一時的に特定バージョンのnodeとnpmで「npm install」する｜TechRacho by BPS株式会社
小ネタです、タイトルにはnpm installと書きましたがもちろんnpm startなどにも使えます。 TL;DR npx --package=node@16.20.2 --package=npm@8.19.4 -- npm install 説明 最近はNodeインストール時にデフォルトで一緒にインストールされるnpx、これは例えば npx create-next-app@latest （https://nextjs.org/docs/app/api-reference/create-next-appより など、その場で手軽にnodeパッケージを実行する時に使われたりします。 ところでこのnpxは実行したいコマンドのパッケージのバージョンを指定するオプションがありますが、さらに 実行したいコマンドと別にパッケージのバージョンを指定できる、しかも--packageの書式なら複数OK という
GAS: Slackからフォーム入力でDocBaseのメモを生成したい｜TechRacho by BPS株式会社
皆様こんにちは、BPSの協力会社として横浜を拠点に活動しております、株式会社ECNのFuseです。 突然ですが、みなさんはDocBase、使ってますか？ ECNではDocBaseを議事録の記録だけでなく、TechRachoの記事の下書きを保存するスペースとしても使っています。 ですが… 解決したい問題 現状、新しい記事を書こうと思った時には記事の執筆状況を管理するためのスプレッドシートに手作業で行を追加し、手作業でテンプレートから新しいメモを生成し…と手作業だらけです。 現状に特に不満はなかったのですが事故が怖いのと新しい技術を身につけたかったので ワークフローで便利にしていきましょう。 目次 まえがき 解決したい問題 目次 使う技術やサービス Slackから表にデータを追加したい 下準備 ワークフロー作成 データの追加に反応してGASを走らせる プロジェクト作成 GASが自動で走るように
supabase + Next.jsでトランザクションを実装する方法を探った｜TechRacho by BPS株式会社
BPSの協力会社として横浜を拠点に活動しております、株式会社ECNのすぎもです。 今回はsupabaseでトランザクションを行うのにかなり悩んだのでメモがてら記事にしてみました。 余談 supabaseについて軽く 本題に入る前にsupabaseについてです。 参考: The Open Source Firebase Alternative | Supabase FirebaseやAmplifyなどさまざまある中supabaseは他と違う特徴がいろいろあって一番今後も使っていきたいBaaSの一つです。 ほかのBaaSとの大きな違いはデータベースがRDBでPostgreSQLをデータベースとしていて既存の知識が活かしやすかったりsupabaseクライアントの機能も充実している印象があります。 データベースからTypeScriptの型を自動生成できることもとてもつよつよポイントかなという感じで
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が推奨ライブラリでなくなったこ
週刊Railsウォッチ: 中高生国際Rubyプログラミングコンテスト2022、W3Cの分散型識別子仕様が勧告にほか（20220726後編）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。 ／ 夏場に注意！「電気火災」 熱や衝撃に弱いリチウムイオン電池が突然発火 ＼https://t.co/4U8adxnRo3 夏場に注意が必要なのが「#電気火災」です。特に気を付けなければいけないのが、スマートフォンなど電子機器に搭載されている「リチウムイオン電池」です。 #newsdig #BSN — TBS NEWS DIG Powered by JNN (@tbsnewsdig) July 20, 2022 つっつきボイス:「熱と衝撃が両方加わるとヤバそう」「そういえば自動車にノートPC置きっぱなしにしてた😅」「それヤバいですやん」 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたと
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ガイド 05: ライフサイクルイベントによるセットアップ・終了（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use Lifecycle Events for Setup and Teardown - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS セットアップや終了にはライフサイクルイベントを使う 🔗 1. ライブサイクルイベントを使えば、サードパーティJSライブラリとTurbolinksの互換性を完璧に保てる Bad import EasyMDE from "easymde" let editors = []; document.addEventListener("turbolinks:load", function() { document.queryS
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ガイド 02: DOMステートを元に戻す（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use <template> to Restore DOM State - Better StimulusJS 原文更新日: 2020/10/08 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 DOMステートを<template>でリストアする こんなときに使いたい 使っている外部ライブラリがHTMLの一部を削除したときに復元する必要がある場合 Turbolinksのキャッシュに備えて、ページ遷移の前に既知のステートにリストアしたい場合 Good <!-- index.html --> <div data-controller="modal"> <template data-target="modal.templat
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
Better Stimulusガイド:アーキテクチャ2: コントローラはコンフィグ可能にしよう（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Configurable Controllers - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 2.コントローラはコンフィグ可能にしよう Bad <!-- index.html --> <a href="#" data-controller="toggle" data-action="click->toggle#toggle"> Toggle </a> // toggle_controller.js import { Controller } from "stimulus"; export default class extends Cont
週刊Railsウォッチ:書籍『Polished Ruby Programming』、DragonRuby、ES2021の新機能ほか（20210629後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ。 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙇 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Ruby 🔗 VSCodeのRubyデバッガextension「VSCode rdbg Ruby Debugger」 元記事: ruby / vsco
週刊Railsウォッチ（20201013後編）ruby-type-profilerがtypeprofにリネーム、AWS API Gatewayの実行ログは便利、M5Stackほか｜TechRacho by BPS株式会社
2020.10.13 週刊Railsウォッチ（20201013後編）ruby-type-profilerがtypeprofにリネーム、AWS API Gatewayの実行ログは便利、M5Stackほか こんにちは、hachi8833です。 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙇 ⚓Ruby ⚓ruby-type-profilerがtypeprofにリネームされた つっつきボイス:「jnchitoさんの以下のツイートを見て自分もこの間ruby-type-profiler周りを触り始めたんですが、READMEに書いてある手順でうま
週刊Railsウォッチ（20200908後編）Shopify版Rubyスタイルガイド、JavaScript Primerが2.0に、GitHub Container Registryほか｜TechRacho by BPS株式会社
2020.09.08 週刊Railsウォッチ（20200908後編）Shopify版Rubyスタイルガイド、JavaScript Primerが2.0に、GitHub Container Registryほか こんにちは、hachi8833です。私も早速防災アプリを入れました。 最近の Yahoo の防災速報アプリ入れてるのだけど、ゲリラ豪雨の直前に「まもなく雨が降ります」って通知が来てくれるので洗濯物取り込むのに非常に役立ってる。 — mattn (@mattn_jp) September 1, 2020 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 今回もつっつき成分が少なめとなります🙇。 ⚓Ruby ⚓Shopify版「R
TypeScriptにヤバい機能が入りそうなのでひとしきり遊んでみる｜TechRacho by BPS株式会社
こんにちは。yoshiです。 先日（9月1日）にオープンされた TypeScript のプルリクエストがヤバいわよ！という話をします。 ※※※注意ここから※※※ 一応先に言っておきますと、これからする話はまだ PR 段階なのでそのまま取り込まれるかどうか分からないし、どのバージョンでリリースされるかも分かりません。ここで書いていることはリリース時には仕様が変わっている可能性は大いにあり、リリース後に検索等でこの記事にたどり着いた方は、もっと良い解説がどこかにあると思うのでそちらを参照することをおすすめします。 ※※※注意ここまで※※※ 該当の PR はこれです。 Template string types and mapped type 'as' clauses by ahejlsberg · Pull Request #40336 · microsoft/TypeScript この PR
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
