JavaScript の 「ブロック文」 をご存知でしょうか。 波括弧（ブレース）で囲む、コレです。 if ブロック if () {} や、for ブロック for () {} として目にすることが多いですが、 {} 単体でもブロック文になります。 これだけだとオブジェクトと思ってしまうかもしれませんが、ブロック文になります。 （オブジェクトとブロック文の解釈については javascriptのオブジェクトリテラルは評価されるまでは、あくまでブロック文でしかない - メモを揉め が詳しいです） なんの意味もないように見える「ただの {}（ブロック文）」ですが、意外と便利なことがあるのでこの記事ではそれを紹介します！ 1. スコープを制限できる たとえば、処理の前にバリデーションを行い、問題がなければそれ以降の処理に進む関数があるとします。 このとき、 「処理の冒頭だけ使い、それ以降使わない変

Playwrightの公式ドキュメントに「Best Practices」というページがあったので翻訳してみました。 原文： Best Practices | Playwright イントロダクション このガイドは、私たちが提供するベストプラクティスに習い、より弾力性のあるテストを書くために役立つはずです。 テスト哲学​ ユーザから見えるふるまいをテストする 自動テストは、アプリケーションのコードがエンドユーザのために動作することを検証するものです。関数の名前、何かが配列であるかどうか、ある要素の CSS クラスのような、ユーザが通常使用しない、目にしない、あるいは知ることさえないような実装の詳細に依存することを避けるべきです。エンドユーザーはページ上でレンダリングされたものを見たり操作したりします。したがって、自動テストでは通常、レンダリングされた出力のみを表示/操作する必要があります。

html要素にscroll-behavior:smoothを指定するだけのコストの低さ、それでいて従来のアンカーリンクの機能を損ねないことから「スムーススクロールはCSSのみで十分」といった技術記事やポストが多く広まっています。 ただ、そういった技術記事やポストは「CSSのみで対応できる」「ワンライナーで実装できる」と言ったコストの低さばかりが先行していて、肝心のデメリットには触れていません。 実際、CSSのスムーススクロールには多くの問題点が孕んでいます。 全てのページ内リンクがスムーススクロールされるCSSのscroll-behavior:smoothを使用すると、ページ内の全てのアンカーリンクがスムーススクロールの対象となります。そのため、限定的にスムーススクロールを無効化したいと言った場合は別途JSでの対応が必要となります。 僕のブログではJS無効環境のフォールバックとしてhidd

containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。 これまでの関連Blogについては「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証」でご確認いただけます。 layoutの検証 contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。 containプロパティがない場合 containプロパティの設定がないブロックを用意します。 ブロック内に3つの要素を設置します。 1つ目の要素は、position: fixed;を設定して相対的な配置にします。 2つ目の要素は、flo

BackgroundESLint has become an essential tool for today's web development. It helps you to catch errors and enforce a consistent coding style in your project. In Nuxt, we do our best to provide an out-of-the-box experience for ESLint, making it easy to use, configure and follow the best practices we recommend. Over time, both Nuxt and ESLint have evolved a lot since then. Historically, we ended up

はじめに Web アプリケーションを開発する際、バックエンドの API サーバーやデータベースなどの複数のマシン環境を1台の PC で動かすことの可能なコンテナツールとして、Docker は広く利用されています。 この便利な Dockerですが、複数人で Web アプリケーションを開発しているチームで各メンバの開発用 PC の OS が異なる状態（例えば、A さんが Windows、B さんが macOS など）で、Docker をローカル環境に直接インストールしていた場合、下記のような不都合が発生します。 Docker のバージョンがメンバ間で統一されていない 😱 コンテナ外で使用必須のツールのインストール方法・バージョンがメンバ間で異なる 😱 コンテナ外で使用必須のシェルスクリプトは OS 毎で（または OS の差異を考慮して）作成する必要がある 😱 以上の問題は、Docker

初めての方は、初めまして。そうでない方も、初めまして。クラウドエース SRE 部で Professional Cooking Architect をしている zeta です。私はドンドコ島の充実度をオンライン1位(多分)にしましたが皆さんいかがお過ごしでしょうか。 はじめに クラウドエースの SRE 部は Google Cloud のインフラの面倒を見ることが主な業務です。世の中の多くの企業の似たような役割を持つ部署でもそうだと思いますが、インフラの設計・構築・運用といったフェーズを行っていきます。こういったインフラエンジニア的なことをやっていると、みなさんも一度ぐらいは「設計だけやったら勝手にインフラ構築されねーかな〜」なんて思ったことはあるのではないでしょうか。技術の力でコンピュータに働かせてサボるというのは IT エンジニア開闢以来ずっと存在し続けた悲願であり、エンジニアリングのモチ

Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ

構築する開発環境について ここで構築する開発環境は次のようなものを考えています。 仮想化ソフトウェア (Hyper-V + WSL2 + VirtualBox) コンテナソフトウェア (Docker Compose + Docker Engine) 開発エディタ (Visual Studio Code ) バージョン管理システム (Git + Git for Windows + Forgejo) CI/CD (githooks or Gitness or Woodpecker CI or GitBucket + gitbucket-ci-plugin or Jenkins) Intel N100 ミニ PC の特徴は低価格でありながら、仮想化機能を備えており、VirtualBox や Hyper-V といった仮想化ソフトウェアを動作できることが大きな魅力です。メモリ 16GB で SSD

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

PHPカンファレンス小田原2024 の発表資料です。 https://phpcon-odawara.connpass.com/event/296492/ https://fortee.jp/phpconodawara-2024/proposal/7c57d5ca-213a-4d7a-aaf0-26ddc44897f0

PHPカンファレンス小田原2024での発表資料です https://fortee.jp/phpconodawara-2024/proposal/4d39c7ef-058c-4648-b1d7-5510497e0d81

2024 年 4 月 4 日に発表された「Command R+」が GPT-4 とほぼ同じ回答精度で、レスポンスがめちゃくちゃ速く、かつ API の利用が商用利用じゃなければ無料だったので、絶対に LibreChat に組み込みたいと思った。 LibreChat はいわゆる ChatGPT クローンと呼ばれる OSS で、UI は ChatGPT とほぼ同じで、回答に利用する API を GPT4 や Gemini、Claude3 など、自分の好きなものを指定できる。ローカル上で動くのはもちろん、デプロイするのも簡単で、数ある GPT クローンの中では一番使い勝手が良いと思う。UI を忠実に ChatGPT に寄せているのが良い。 LibreChat の UI。ChatGPT とほぼ同じ 今回はこの LibreChat で、Cohere が発表した「Command R+」を動かせるようにす

はじめに お久しぶりです、からころです。 突然ですが、みなさん Vite は利用してますか？ Vitest や Jest をはじめ、Vueでコンポーネントのテストをする際に、 しばしばテスト用にカスタム属性を用意することがあります。 テスト属性がバンドルされてプロダクション環境に出てくると、 意図しない挙動を引き起こしたりするかもしれないから避けたい！ そもそもテストタグを追加するだけなのにビルド後のコードに変更が加わるのは気持ち悪い! といった方に向けた記事になります。 設定について nuxt.config.tsの場合 { ... // 下記を追加する vue: { compilerOptions: { nodeTransforms: [ (node) => { if (node.type === 1 /* NodeTypes.ELEMENT */) { for (let i = 0;

以前書いたsatori/sharp/satori-htmlでOG画像生成を使ってたら、 やたらsatori-htmlの処理に時間がかかるので、 いろいろ調べてみたときの備忘録(*´ω｀*) unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。 使ってるのは前回と同じ、この3つ vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 遅かったときのコード 最初はこんな感じで、 いくつかの画像をBase64で埋め込む感じに。 import satori from "satori"; import { html } from "satori-html"; import sharp fr

unjs/nitroでこんな感じのディレクトリ構成の場合、 _ignore_dir/*やusers/_ignore_path.tsを無視したいなと思い、 色々調べてみたときの備忘録(*´ω｀*) routes/ _ignore_dir/ index.ts users/ _ignore_path.ts index.ts ドキュメントにはちょろっと書いてあるけど、 ignoreオプションを付けばよいっぽい。 Config | Nitro - Next Generation Server Toolkit 使い方 使い方はこんな感じ。正規表現も使えるっぽい。 //https://nitro.unjs.io/config export default defineNitroConfig({ srcDir: "server", // ignore: ["routes/**/_*", "routes/*

共通マスタ基盤チームにおけるソフトウェアエンジニアのyugoです。 共通マスタ基盤チームは、従業員、商品、取引先といった製品横断で利用できるマスタデータを一元管理し、ユーザーにfreeeプロダクトにおける統合体験を提供できる基盤開発をミッションとしております。 そんな共通マスタ基盤チームチームですが、製品横断で利用されるとだけあり、日々の開発フローでPRレビューの割り込みが多いです。そんな中で、開発フローにgit worktreeを導入してみて、個人的にはPRレビューの割り込み作業時に割と使いやすかったので紹介します。 git worktreeを使うに至る背景 実はfreeeで働く以前、前職で先輩シニアエンジニアが「レビューするときにgitのstagingにあげていない自分の変更を、stashしたり、テキトーにcommitしてからrebaseするなりするの嫌だったら、worktree使った

はじめに こんにちは！株式会社 COMPASS でエンジニアをしているやじはむです。私はシステム開発部というエンジニアリングの組織に所属をしており、現在はフロントエンドエンジニアとして先生向けのアプリケーション開発を行っています。 今回は、最近の業務の中で小さく始めていたパフォーマンス改善方法について紹介したいと思います。 この記事はこんな方におすすめ Webパフォーマンスの具体的な改善方法を知りたい人 Core Web Vitalsの改善方法を知りたい人 ちょっと良いコードを少ないエネルギーで書きたい人 筆者は最近Web Speed Hackathon 2024に参加したのですが、そこで学んだ知見も踏まえて記事を書きました。 パフォーマンスについて興味がある人もない人もこの記事を見れば、根拠を持って「ちょっと良いコード」を書けるようになるかも知れません。書いてある内容はどれも小さく始めら

はじめに 「テーブル・DBを設計するときのさいきょうの極意」を完全に理解したので 初心者（私）向けに共有する記事です。 どうぞ揉んでいただければ幸いです。対戦よろしくお願いします。 さいきょうの極意 初心者が「テーブル・DB設計して」と言われると、 「アソシエーションってあったよね・・・バリデーションも？中間テーブルを使うときと使わないときと・・・」と大変に混乱し、何から手をつけていいかわからなくなります。 そんなあなたにこれ！ テーブル・DB設計は「属性」と「関係」の２つだけ 「属性」は必要なものを書くだけ 「関係」は 1:1 / 1:N / N:N しかない（しかも、ほとんど 1:N） これが極意だ！！！ 一般的な、「ユーザーがいて、投稿ができて、コメントといいねができるサービス」で考えてみましょうか。 users / posts / comments / likes のテーブルが必要

dialog要素を使用したアクセシブルなモーダルウィンドウの実装メモです。このブログのハンバーガーメニューで使われている実装と同じものになります。 dialog要素は現在全てのモダンブラウザでサポートされているため、iOS Safariをどこまで対応するかに依りますが実務で使用しても差し支えないでしょう。