はじめに GitHub Copilotを使っている開発者の皆さん、.github/copilot-instructions.mdというファイルを作成していますか？ このファイル1つで、Copilotをあなたのプロジェクト専用にカスタマイズし、もっと賢く、便利に使いこなすことができます。 本記事では、その強力な機能と具体的な活用方法を紹介します。 copilot-instructions.mdの紹介 一言で言えば、GitHub Copilot版のCLAUDE.mdです。 つまり、GitHub Copilotに与える指示書です。 このファイルは、GitHub Copilotがユーザーの指示を処理する前に真っ先に読み込む指示書として機能します。 特別な設定は不要で、プロジェクトの.githubディレクトリ配下にcopilot-instructions.mdという名前で置くだけで認識されます。 C
この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W
どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ 2023年5月29日 追記 この記事を読みにきていただきありがとうございます。 私が記事を書いた時期はまだNext.jsのApp Routerが発表されたばかりで、App Routerを使用したディレクトリ構成の考慮はされていません。 先日、App Routerがリリースされ、Next.jsのドキュメントにApp Routerのディレクトリ構成について記事が出ているので、Next.jsを使用されている場合は、まず参照することをオススメします。 はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構
1年以上にわたる初めての技術書の商業執筆活動を終えての感想と今後挑戦したいという方へ -TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 -｜たまにゃん📘 Next.js実践本7/25発売
1年以上にわたる初めての技術書の商業執筆活動を終えての感想と今後挑戦したいという方へ -TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 - 2022年7月25日より「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」が技術評論社より発売されました。3人の著者（@tejitak, @Kourin1996, @tamanyan55）、編集者（@nodawep）、レビュワーの方々が1年以上にわたり執筆に携わった本で紆余曲折しながらもゴールした技術書となっています。本を手にとっていただいた皆様のおかげで非常に好調な滑り出しとなり、早くも増刷が決定となりました。Amazonでの評価もよくソフトウェア開発・言語のカテゴリーで1位を取ることができました。 私自身初めての商業執筆という事で勝手が分からないながらも最後までやり遂げ
はじめに こんにちは、レバテック開発部の河村です。 私はレバテック各種メディアのリプレイスを担当しており、バックエンドを中心にフルスタック開発を行っています。 今回は管理画面のリリースで採用した、フルスタックフレームワークであるfrourioについて、frourioを採用した理由や使ってみて良かったこと、困ったことを紹介します。 この記事を通して、frourioのメリット、デメリットだけでなく、レバテック開発部ではどのような背景のもと、技術・アーキテクチャの選定を行っているのか、どれくらいのスピード感で開発を行っているのかをお伝えできればと思います。 なお、この記事ではfrourioにおける環境構築や使い方等の説明は割愛させていただきます。 開発背景・経緯 今回、開発する対象となった管理画面は、レバテックの各メディアで運用する記事やセミナー情報、エントリー情報を管理するものになります。 す
概要 先日新規の Web サービス開発でフロントエンド側の技術選定を行いました。 利用する技術の中で GraphQL を提案した際に、RESTful な API で呼び出す方法と比較して納得感がないという意見があがりました。 そこで、なぜ、どういうときに GraphQL を選定すべきだと思うか、文章にして自分なりにまとめておこうと思います。 前提 構成が BFF か BE かで意見は大きく変わりません。 例えば BFF として利用されるケースでは、バックエンド側には BE チームとマイクロサービス的な API が存在しており、 BFF として GraphQL を配置するようなケースです。GraphQL のリゾルバは API を叩きます。 一方、 BE として利用されるケースとは、リゾルバが直接 DB を叩くような形です。 今回はフロントエンドのチームが管理する BFF として、JS のみで
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terrafor
Next.js（App router）における開発しやすいディレクトリ構成の例 - TechDoctor開発者Blog
初めまして、テックドクターでフロントエンド開発を担当している大瀧です。 ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。 しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。 そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerのディレクトリ構成については、公式ドキュメントで以下のように記載されています。 There is no "right" or "wrong" way when it comes to organi
これは何? React(Next.js)アプリケーションのテンプレートのための Design Doc React(Next.js)アプリケーションのテンプレートとして実装したリポジトリ shimpeiws/react-boilerplate-2022 の設計についてのDesign Docです SSR/ISRはせずnext exportしてStatic Fileを出力する構成です API Routesを使っていますが、API接続コードをローカルで動作させるためのもので本番動作させるためのものではありません Design Doc 本ドキュメントは実装したリポジトリの構成、ライブラリの選定理由など設計についての背景を示すためのドキュメントという位置づけです 「デザインドックで学ぶデザインドック」(https://www.flywheel.jp/topics/design-doc-of-desig
Spec-Driven Development (SDD) revives the old idea of heavy documentation before coding — an echo of the Waterfall era. While it promises structure for AI-driven programming, it risks burying agility under layers of Markdown. This post explores why a more iterative, natural-language approach may better fit modern development. The Rise of Specification Coding assistants are intimidating: instead of
今さら聞けないビジュアルリグレッションテストをChromaticで始める - Sansan Tech Blog
Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing
GitHub - modelcontextprotocol/servers: Model Context Protocol Servers
Official integrations are maintained by companies building production ready MCP servers for their platforms. 21st.dev Magic - Create crafted UI components inspired by the best 21st.dev design engineers. 2slides - An MCP server that provides tools to convert content into slides/PPT/presentation or generate slides/PPT/presentation with user intention. ActionKit by Paragon - Connect to 130+ SaaS inte
【感想】『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版』【Ⅲ. React応用編】： #りあクト でよりディープにReact入門 - Rのつく財団入り口
りあクト！ 技術同人誌のりあクト！、【Ⅲ. React応用編】の読書記録と感想です。 りあクト！ 【Ⅲ. React応用編】 第10章 React におけるルーティング 第11章 Redux でグローバルな状態を扱う 第12章 React は非同期処理とどう戦ってきたか 第13章 Suspense でデータ取得の宣言的 UI を実現する まとめ：IIIでさらにディープにReactの神髄に触れられる本 関係書籍など oukayuka.booth.pm 【Ⅲ. React応用編】 大変革であるReact Hooks登場を受けて第3部では副作用処理をテーマとし、公式でもこれからリリースでまだ実験的な機能のSuspenseを扱った応用編の話となっています。 りあクト！【Ⅲ. React応用編】 第10章 React におけるルーティング 10-1. SPA におけるルーティングとは サーバーサイド
Atomic Design、どうですか？ フロントエンドをやってる系の人たちはぶっちゃけしっくりきてないとおもいます。 僕を含めて、当初より「これ微妙やね（まぁ流行ってるし適当ではあるから使っておくか）」という見解の人はチラホラみかけました。 それもそのはずです。 朧げな記憶ではありますが、Atomic Designはそもそもプログラマーのために作られたメソッド……ではありません。 デザイナーの方が考案した、デザインシステム構築のためのフレームワークです（そうだよね？）。 Sketchでデザインコンポーネントを作成する際に（たしかSketchだったはず。懐かしいですね）、Sketch上のコンポーネントの再利用性を高めて使いやすくするためのものだったのです（だったはずです）。 それが「増えまくったReactコンポーネントをいい感じにフォルダわけしてえなあ」という需要と噛み合って流行ったと認識
リアルタイム検索最適化：Reactアプリにdebounce処理を組み込む - Techtouch Developers Blog
はじめに そもそも debounce 処理って？ 本題 今回作りたかったもの 検討したこと useDebounce useDebouncedValue 実装したもの 最後に はじめに テックタッチのフロントエンドエンジニアの ozaan (@shzawa) です。関西 (兵庫県姫路市) 在住のため、普段はフルリモートのメンバーとしてサービス開発に取り組んでいます。 最近はスクラム開発の一環でバックエンドのコード (golang) を触らせてもらっていました。golang だと書き方が統一されているためか GitHub Copilot の補完機能がかなり効くので書いていて面白かったです。 そもそも debounce 処理って？ 対象のイベントが発生してから指定した時間が経過するまでは、同じイベントの発生を抑制する仕組みです。 input 要素の onChange イベントのような短い間隔で連
7/25に発売されたばかりの、TypeScript/React/Next.js本読んでみた感想（随時更新） 9/4 moleculesの実装進める、問題点解決？ 9/3 どーしても直せないので方針変更。一度styled-components導入。 8/29 6.6途中。ドロップダウンまで実装。 8/26 わからんところ復習したり。 8/25 6.5章完了まで。しかしわからんことだらけ 8/24 6.5章途中まで。Atoms/TextAreaまで実装。 8/23 6.5章途中まで。Atoms/Buttonの実装に苦戦中。 8/22 5章完了、昨日放置した問題の解決。 8/21 5章途中、storybookインスコした直後まで 8/20 コンポーネントテスト追加、コメント指摘反映 8/19 4章途中(4.4コンポーネントテスト直前まで完了） 8/18 3章完了 8/17 3章途中（React全
gemini-cli-usages-from-gemini-cli.md Gemini CLI に Gemini CLI 自体のソースコードを読ませつつ、高度な使い方を分析させたもの Gemini CLI 実践ガイド: 基本から応用まで Gemini CLIは、単なる対話ツールではありません。その設計の核心を理解することで、私たちはGemini CLIを、自らの開発ワークフローに最適化された、強力な自動化エンジンへと変貌させることができます。このガイドでは、基本的な使い方から、コードリーディングによって明らかになった高度な実践テクニックまでを解説します。 基本的な使い方: まずはここから これからGemini CLIを使い始める方は、以下の基本的なコマンドとコンセプトを覚えましょう。 対話を開始する: ターミナルで、操作したいプロジェクトのルートディレクトリに移動し、geminiと入力しま
コンポーネント粒度と依存関係チェック feat. STORES予約フロントエンド - STORES Product Blog
はじめに STORES 予約 でエンジニアをしているyuta07です。 STORES 予約 の管理画面の新規開発はNext.jsを用いて開発しているのですが、日々のカジュアル面談や採用活動でフロントエンドの技術状況についての質問を受けることが増えてきました。 今回は STORES 予約 のフロントエンド開発の中でもコンポーネント粒度と依存関係チェックについて紹介します。 はじめに 主な使用技術 コンポーネントの分類 Pages Templates Organisms Molecules Atoms 依存関係チェック Eslintによる依存ルール おわりに 主な使用技術 Next.js、React、TypeScriptを採用。 スタイルはTailwind CSSを使用。 STORES 全体で統一されているconfigをユーティリティクラス（フォント・カラー等）として使用してスタイリングしてい
Vol.10 Bill Oneのフロントエンドを通じて学ぶモダンフロントエンド技術入門 - Sansan Tech Blog
こんにちは。技術本部Bill One Engineering Unitの豊田（@helloyuki）です。Bill One 開発 Unit ブログリレー2024 Vol.10、Sansan Advent Calendar 25日目の記事です。実は1pxの微妙な画面上のズレが気になって仕方のないタイプです。 私自身はこれまでのキャリアでは、ほとんどバックエンドエンジニアとして過ごしてきました。正確にはバックエンドを主軸としつつ、多少のフロントエンド、クラウドインフラの構築、データエンジニアリングの経験も含みます。それぞれの領域に詳しい詳しくないは多少ありつつ、世間的にいうフルサイクルエンジニアとしてのキャリアを歩んできました。 Bill Oneでは各チームに配属後、ソフトウェアエンジニアは基本的にはフロントエンド、バックエンド、インフラ関係なく、すべての領域の開発を一通り担当します。私も最近
Storybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組み - ZOZO TECH BLOG
こんにちは、FAANS部の田中です。普段は、WebのフロントエンドエンジニアとしてFAANSの開発を行なっています。 FAANSの由来は「Fashion Advisors are Neighbors」で、「ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツール」です。現在正式リリースに向けて、WEARと連携したコーディネート投稿機能やその成果を確認できる機能など開発中です。プラットフォームとしてはWeb、iOS、Androidが存在し、今回取り上げるWebはショップ店長をはじめとした管理者向けツールという立ち位置です。 本記事では、FAANSのWebにおけるStorybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組みを紹介します。 はじめに FAANSのWebはReact、TypeScriptで構成されています。設計に関しては、ロ
技術のトレンドと開発テクニックの知見を、無料で公開します！
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 この記事は、定期的にトレンドに沿って更新していこうと思います。 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ますます流行り、開発体験の良いものになると思います。 最初にReactから述べます。 https://reactjs.org/ 数年前は、Reac
こんにちは。ひらやまです。 今回は、これまでフロントエンド環境を作ったり、運用したり、設計のアドバイスをしたりしてきた私がひとまずたどり着いた、このくらいの塩梅の設計が良いのではないかと考えている一つの案をみなさんに共有しようと思います。 フロントエンド設計の必要性 フロントエンドは JSON 色づけ係と言われることもありますが、ただ JSON をきれいにしてユーザに見せる以上の難しさを感じることもあるのではないでしょうか。 実装を完遂するために必要となるスキルが広いため、様々なバックグラウンドを持つ人がコードを書くことになりやすいです。フロントエンドエンジニアと呼ばれる人も、私みたいにマークアップエンジニアからフロントエンド領域に手を伸ばした人もいれば、デザイナーやバックエンドエンジニアなどの領域からこの環境に挑戦される方もいらっしゃいます。 このような様々な背景を持つ人たちが一つのコー
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
フロントエンドエンジニアのための技術マップ【2025】
Webフロントエンドの全体的な構造をざっくりまとめてみました。 フロントエンド開発で欠かせない技術要素から、Node.jsの立ち位置、今さら聞けないモジュールバンドラーやトランスパイラなど... 順を追って必要な知識を整理していきます。 ここでは各要素について深掘りはせず、あくまで全体像を把握できるような内容を目指しています。 🌱 1. Web開発の基礎 インターネットの基礎知識 HTTP / HTTPS / DNS / IP：通信プロトコルと名前解決の基礎 ブラウザの仕組み：レンダリングやJavaScript実行の流れ クライアントとサーバーの関係：役割と通信の基本 フロントエンドに限った話ではないですが、改めて。 とくにDOMのレンダリングの仕組みやJavaScriptの実行タイミング（非同期処理など）の理解は必須です。 Webページは、ブラウザがHTMLやCSS、JavaScrip
フロントエンドエンジニアのキャリア戦略
この記事は？ フロントエンド領域が複雑性を増してきており、経営効率化の戦略として部門としてフロント、バック、インフラで完全分業の体制を取る会社が増えてきました。それに伴い、完全未経験からフロントエンドエンジニアになる人たちも増えてきましたが、単にフロントの現場で開発をしているだけではエンジニアリング全般を含む広範な基礎は身につきにくく、能動的に全領域を勉強していく必要があります。その上で、フロントエンドに強みを持つエンジニアとしてバリューを発揮していくには、具体的にどのようなキャリア戦略があるのか？この記事では考えていきます。 著者は？ AWS環境でのフロントエンド開発中心に、エンジニア3年目。新卒2年間は自社サービス系の大企業でフロントエンドを担当。教育ではなく「崖に落とされて自力で登る」。裁量を得るには、先輩方を技術力で倒してロールをもぎ得る、といった競争主義が根付く徹底したハードボイ
MAI-Thinking-1: Building a Hill-Climbing Machine The Microsoft AI Team 1 Abstract Progress in AI is driven not by a single model, but by the ability to continually improve upon the current state of models. Achieving this requires treating model development as a system-level optimization problem, for which the solution is building a hill-climbing machine for rapid improvement. Our process includes
学生エンジニアのためのチャットサービスをNext.js + TypeScript + AtomicDesign + Firebase9 + Dockerで作った（β） - Qiita
はじめに ※今回の開発は、株式会社OwN様からいただいた技術課題の一環で行ったものになります。 自己紹介 会社員やりつつ、趣味で個人開発を行っております。 フロントエンジニアのふぁると申します。 【Twitterリンク】 itamaster サービスについて サービス名 hacker-class-roomを略して、「はかくら」です！ リポジトリURL こちらになります。 https://github.com/FAL-coffee/hacker-class-room サービスの概要 「プログラミングの授業が始まるが、ついていけるのか不安......」 「情報処理の勉強が難しい。もしかして、こんなに苦労しているのは私だけ？」 「ゲーム作りに興味があって、プログラミングを始めてみたいけど、何から始めればいいのかわからない」 「ネットで見た通りにやったのに、環境構築でつまずいてしまった。」 「プロ
ゆめみフロントエンド採用コーディング試験で確認しているポイントやよくある質問を公開｜YUMEMI（株式会社ゆめみ）公式
株式会社ゆめみのフロントエンドコーディング試験で確認しているポイントや、よくある質問を公開します！試験の課題内容はこちらの記事をご確認ください。 公開に至った背景徹底的な透明性を大事にしている。 ゆめみのAndroid、iOS、サーバーサイドグループのコーディングテストを既に公開している。 弊社からの情報発信を通じて興味を持っていただく方が多い反面、応募するハードルが高いというフィードバックをいただく。 上記の理由からフロントエンドコーディング試験に関するより詳しい内容を公開することにしました。 可能な限り公開し、より多くの方に興味を持っていただくこと、選考フローにおいてミスマッチがなくなるきっかけになると幸いです。 よくある質問実際に応募者からよくある質問をピックアップしてお答えします！ Q. ワイヤー通りに実装すればいいの？見た目は変えても良い？A. 基本的な使い勝手さえ変わっていなけ
Figmaconfig2022で発表されたComponent PropertyとAutoLayoutについても追記しました。 2023年にリリースされたVariables、NestedComponentに対応しました。 2024年のmulti-editとcode connect対応しました。 このドキュメントの目的デザインガイドライン・システムに関する理解を深め、UIUXを通したプロダクト価値の最大化が業界として底上げされるといいなと思っています。 あとは、私rikikaが個人的にいろいろなお仕事で作らせて頂く機会をいただくのですが、そのたびに事例や作り方のハウツーが目まぐるしく変わっていき、インターネット上に情報が散らばっていると感じていたのでそのsingle source of truthの役目を担いたいという気持ちもあります。 とはいえ、絶対これが正しいというのもない分野だと思うので
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
弊社では社内システムが多く運用されています。そのうちの一つに私が開発・運用している「Nicole」というシステムがあります。 これは、いわゆるニコカレ(ニコニコカレンダー)をWebベースで入力・閲覧できるシステムで、今では社内SNS的な位置付けにもなりつつあります。 今回、このシステムをNext.jsとRuby on Rails(以降、Railsと表記)でリニューアルしました。リニューアルによりフロントエンドとバックエンドの分離に成功し、より速く・安全に開発が進められるようになり、UI/UXも洗練されたものになりました。今回はリニューアルの裏側を解説します。 目次 背景 システム構成 フロントエンドとバックエンドを分離 Dockerコンテナも分離 フレームワーク フロントエンド: Next.js バックエンド: Ruby on Rails API OpenAPIのスキーマ記述にStopli
GitHub - BehiSecc/awesome-claude-skills: A curated list of Claude Skills.
web-artifacts-builder - Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). test-driven-development - Use when implementing any feature or bugfix, before writing implementation code using-git-worktrees - Creates isolated git worktrees with smart directory selection and safety verification. finishin
フロントエンドの開発における負債化の要因
概要 バックエンドのプロダクトに比べ、フロントエンド開発が負債化しているチームに出会うことは珍しくありません。特に、設計や実装方針が揺らぎやすいフロントエンド開発では、技術的な負債が蓄積しやすく、結果的にプロダクトの品質や開発効率が低下することが少なくありません。 これまで様々な現場に携わり、なぜフロントエンド開発において統一的な設計(ディレクトリ構造、コンポーネントの分離方針、状態管理の一貫性)が維持が難しい理由を考え、その理由を今回整理してみました。 本記事は、過去の経験を基にした一個人の意見です。そのため、何かお気づきの点やご指摘がありましたら、ぜひお知らせいただけると嬉しいです。また、主にReactに関する話になりますが、Vue.jsやSvelteにも適用できる話題を意識して書いています。なお、専門用語についての説明は省略していますので、その点はご了承ください。 この記事を読むこと
フロントエンド開発で気をつけていること忘備録
はじめに 本業がSIerの身分からフロントエンドに足を踏みいれてしばらくが立ちました。自分の忘備録も兼ねて、私がフロントエンド開発で気をつけていることを技術要素ごとにまとめてみました。 HTML 用途に応じた適切なタグを利用する。SEO対策やアクセシビリティ向上の効果があり、開発者にとってもHTMLの構造を把握しやすくなる。 aタグやimgタグのalt属性やrole属性、label属性などを適切に設定することでアクセシビリティの向上を図る。 CSS 余計なプロパティは書かないこと。画面の表示に影響がなくとも、後から追加した要素に予期せぬ悪影響を与えるリスクある。また、後でcssを見返したとき理解に苦労する。(普通はプロパティ１つ１つにコメントは入れないと思うのでなおさら) 複数のプロパティを記述する順番を統一する。 (Vscodeの拡張機能でできる） 余白の取り方について、兄弟要素間にはm
2021年にブックマークした記事まとめ - ぷらすのブログ
2021年にPocketに保存した記事をマークダウン形式で出力するツール. Contribute to p1ass/list-pocket-saved-items development by creating an account on GitHub. 注意: タグはかなり適当 バックエンド Go Nintendo Switch™ ネイティブバイナリへの Go コンパイルを成功させた話 Go の入力バリデーションパッケージ ozzo-validation を試した。 k0kubun/pp: Colored pretty printer for Go language OpenTelemetry in Go Go のロギングライブラリ 2021 年冬 GraphQL の静的解析基盤を作った Go のリリースプロセスとブランチ戦略 Go 1.16 の signal.NotifyContext
swyx Posted on Dec 27, 2021 • Edited on May 31, 2022 • Originally published at swyx.io TurboRepo was acquired by Vercel recently and I caught up on Jared Palmer's excellent intro demo to see what the fuss is all about: Here are quick notes for those too busy to view the whole thing, followed by personal reflections at the end. TLDR See the TLDR of this post in thread form: Why Monorepos You can re
Just Talk To It - the no-bs Way of Agentic Engineering | Peter Steinberger
I’ve been more quiet here lately as I’m knee-deep working on my latest project. Agentic engineering has become so good that it now writes pretty much 100% of my code. And yet I see so many folks trying to solve issues and generating these elaborated charades instead of getting sh*t done. This post partly is inspired by the conversations I had at last night’s Claude Code Anonymous in London and par
Jest + react-testing-library でフロントエンドテストをコツコツ積み上げている話 - コネヒト開発者ブログ
こんにちは。コネヒト歴7ヶ月目のWebエンジニアの古市です。 私の所属するチームではReactで構築されたCMSを開発しています。 Atomic Designに則り、コンポーネントを Atoms/Molecules/Organisms/Pagesの区分で作成しています。このうち、Atoms,Molecules,OrganismsについてはJest+react-testing-libraryの組み合わせで必ずテストを書くようにしています。 今回は実際に書いているテストコードを例に挙げながら、どのような点をテストコードで担保しているか、また、テストを積み重ねるための施策について説明いたします。 具体的なテストコード これは業務で書いているテストコードを抽象化した一例です。 以下のような構造のコンポーネントのテストだとイメージしていただければと思います。 名前が表示される アバター画像が表示され
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 皆さんは、習慣化していることはありますか？私は3ヶ月前からプログラミングの勉強を毎日の習慣にしてきました。今回は、私が挑戦してきた #100DaysOfCode がついに100日を迎えたので、この3ヶ月間を振り返ってみたいと思います。（執筆時4ヶ月目に突入） 過去の記事もぜひご覧ください！ 何が変わったのか？ 環境・生活 JISOUに入会 ハッカソンに参加 朝活の開始 生活リズムの変更 Reactの案件にアサイン この3ヶ月で生活面でも多くの変化がありました。一番大きな変化は、夜型の生活から朝型へ切り替えたことです。夜早く寝て
[Browser Use] 触ってみた結果と感想
# 必要なライブラリをインポート from langchain_openai import ChatOpenAI # OpenAIのチャットモデルを利用するためのライブラリ from browser_use import Agent # エージェント機能を提供するライブラリ import asyncio # 非同期処理を使うためのライブラリ # 非同期関数mainを定義 async def main(): # Agentのインスタンスを作成 agent = Agent( task="Zennで小倉さんというユーザーの最新記事を教えて", # エージェントに対するタスク（質問） llm=ChatOpenAI(model="gpt-4o", api_key="xxxxxxxxxxxxxx"), # GPT-4oモデルを使う（APIキーは仮の値） ) # エージェントにタスクを実行させ、その結果
![[Browser Use] 触ってみた結果と感想](https://cdn-ak-scissors.b.st-hatena.com/image/square/27a6a4206c6ccf3936294efcfba85be9ce922f90/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--41ff8_pi--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BBrowser%252520Use%25255D%252520%2525E8%2525A7%2525A6%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%2525E7%2525B5%252590%2525E6%25259E%25259C%2525E3%252581%2525A8%2525E6%252584%25259F%2525E6%252583%2525B3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E5%2525B0%25258F%2525E5%252580%252589%2525E3%252581%252582%2525E3%252582%252593%252520%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2FhZTc3ZDA0MzcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub Copilotを使っている人は全員"copilot-instructions.md"を作成してください - Qiita
【Web】知っておきたいWebエンジニアリング各分野の基礎知見80
私の推しフロントエンドディレクトリ構成と気をつけたいポイント
frourioを使って1ヶ月で管理画面をリリースした話 - Leverages Tech Blog
React 時代に選ぶ GraphQL - とろろこんぶろぐ
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
Design Doc for react-boilerplate-2022
Spec-Driven Development: The Waterfall Strikes Back
いいかげんAtomic Designを捨てて別の統一解が欲しい - タオルケット体操
7/25に発売されたばかりの、TypeScript/React/Next.js本読んでみた感想（随時更新）
gemini-cli-usages-from-gemini-cli.md
いい塩梅を目指したデザインエンジニアによるフロントエンド設計 - estie inside blog
Panda CSS - The Origin Story
MAI-Thinking-1: Building a Hill-Climbing Machine
デザインシステム完全版｜Figmaでの作り方、事例など【2025年版】｜rikinemu
Next.js + Railsでリニューアルした社内ニコカレシステムの技術スタックを公開します
Why TurboRepo Will Be The First Big Trend of 2022
毎日プログラミングを続けて3ヶ月、生活とスキルがこう変わった - Qiita