Next.js13.4(app directory)でfaviconを設定する方法 - Qiita背景 favicon.icoを public/に配置してもfaviconが表示されない。 解決策 用意したfavicon.icoを icon.ico にリネームして app/に配置 元々あるfavicon.icoは削除する 公式の情報（↓）だと、この結論に辿り着かない。 https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons 参考
【React 18 新機能】Automatic Batching って何?【初心者にも分かりやすく】 - Qiita
はじめに 前回に続いて,Reactの新機能のAutomatic Batchingついて解説していきます！！ React18の中でもかなり重要な機能になっているので、今回の記事を見て概要だけでも 理解しておいてください！ Automatic Batchingとは...? 以下公式より引用 バッチングとは React がパフォーマンスのために複数のステート更新をグループ化して、単一の再レンダーにまとめることを指します。自動バッチング以前は、React のイベントハンドラ内での更新のみバッチ処理されていました。promise や setTimeout、ネイティブのイベントハンドラやその他あらゆるイベント内で起きる更新はデフォルトではバッチ処理されていませんでした。自動バッチングにより、これらの更新も自動でバッチ処理されるようになります 端的にいうと、更新を1回の再レンダリングにまとめることでパフ
zodのエラーメッセージをカスタマイズする - Qiita
zodとは GitHub 定義したバリデーションスキーマからTypeScriptの型を生成してくれます。 これにより、型定義とバリデーション定義を一括管理できます // バリデーションスキーマ const userSchema = zod.object({ // テキストのバリデーション userId: zod .string() .regex(/^[a-zA-Z0-9]+$/) .min(5) .max(15), // チェックボックス（複数選択可）のバリデーション interest: zod.array(zod.string()).min(1), // チェックボックス（項目が1つだけ。値がtrue or false）のバリデーション // trueのみ許可 confirm: zod.literal(true), }); // バリデーションスキーマから型定義を作成 type user
【React】react-material-uiでリンクにdownload属性を付与する - Qiita
概要 HTMLのアンカーリンクには、HTML5入門-download属性のページにある通り、指定したパスをクリックするとダウンロードが行われるよう設定できます。 react-material-uiではLinkのコンポーネントが用意されていますが、このLinkでクリック時にダウンロードが行われるにはどうするかメモ書きします。 対応 HTMLと同様にdownload属性が付与できますので、Linkコンポーネントにdownload属性を設定します。 実装サンプル import { Link, Typography } from '@mui/material' export const Sample = () => { return ( <Link href="https://sample.com/test.csv" download> <Typography fontSize="14px">サン
えっ、まだChatGPT使ってんの？ Bingは無料でGPT-4使えますよ！ - Qiita
はじめに こんなタイトルをしていますが、私はChatGPTを悪く言う意図は全くありません。ChatGPTは非常に優れた製品ですし、実際に、世界はChatGPTによって大きく変わりました。LLMを大きく普及させた先駆者として、とても偉大な存在です。 今回は、利用料金に焦点を当てた話になります。 Chat GPT Plusを使いたいけど（もしくは、使っているけど）、ちょっと金額が高いな･･･と感じている方に向けた記事になりますので、ご理解いただけると嬉しいです。 ChatGPT、ちょっと高い･･･！ GPT-4、精度が高くていいですよね！ 僕もプログラムを書くときや、採用するプロダクトを決めるときなんかによく使っています！ でも、ChatGPTのGPT-4を使うには、月額3,000円(※)を払う必要がります。 会社が払ってくれるのなら全く問題ないのですが、個人で使うとなると、正直ちょっと高いっ
「Waiting for a runner to pick up this job...」と表示されてGithub Actionsがスタートしない - Qiita
「Waiting for a runner to pick up this job...」と表示されてGithub ActionsがスタートしないGitHubActions 「Waiting for a runner to pick up this job...」と表示されてGithub Actionsがスタートしない せっかくGithub Actionsを設置したのに、「Waiting for a runner to pick up this job...」と言われて、いつまでたってもCIがスタートしないことがあります。↓実際のエラー Requested labels: ubuntu Job defined at: kojix2/chatgpt-cli/.github/workflows/build.yml@refs/heads/main Waiting for a runner to
GitHubの権限管理をTerraform化して幸せになろう - Qiita
この記事はterraformアドベントカレンダー 2021 10日目の記事です。 会社等でgithubを使っている方の多くは Organization を作って各リポジトリへのアクセス権を管理していると思います。 ところで以下のような出来事に心当たりはありませんか？ 新しく組織に参加したメンバーが毎日のように「リポジトリにアクセスできないんですが・・・」と言ってきて 足りない権限を逐一手動追加させられる 久々にリポジトリのアクセス権を確認したら 数ヶ月に退職したはずのアカウントが残ってる たまに志のある人がOrganization内にTeamを作成して権限を整理してくれても、 Team自体がメンテされなくなって意味をなさなくなる (そもそもチームの存在が気付かれなくて使われない等) 個人的には今まで関わってきた多くの組織でこういう経験をしてきました。 ということで、terraformでgi
JSON Patchをキャッチアップしました - Qiita
前書き JavaScript Object Notation (JSON) Pointer JavaScript Object Notation (JSON) Patch についてキャッチアップしました。 今は API デザインしているので、PATCHに関する操作であれば、 上記のJSON PATCHともう一つ、JSON Merge Patchがあります。 今回はJSON PATCHについてフォーカスしてキャッチアップしました。 由来 JSON RFCは JSON を定義しました。 また、PATCH Method for HTTPは HTTP の PATCH メソッドを定義しました。 もともと PATCH 以外に、PUT というメソッドがあり、 PUT の場合にリソースに対して全て更新するというふうに使われています。 PATCH は PUT と違って、リソースに対して一部を更新することが可
オニオンアーキテクチャとは何か - Qiita
概要 オニオンアーキテクチャはJeffrey Palermo氏により考案されたアーキテクチャパターンである。伝統的な階層化アーキテクチャとオブジェクト指向の考え方を踏襲しつつ、これまでよりも保守性、テスト容易性、依存性の点で優れたアプリケーションを構築することを目的としている。本記事ではこのオニオンアーキテクチャとは何かについてPalermo氏の記事を参考にして考察する。 前提となる知識 オニオンアーキテクチャを理解する上で前提となるいくつかの知識を挙げる。 オブジェクト指向 オニオンアーキテクチャはオブジェクト指向を前提としたアーキテクチャである。 階層化アーキテクチャ オニオンアーキテクチャは多層アーキテクチャを利用している。 依存性逆転の原則 オニオンアーキテクチャでは依存性逆転の原則がオブジェクトのモデリングに利用されている。 ドメイン駆動設計 Entity, Repository
Astro.js - Next.jsからWebアプリケーションを移行してみた感想 - Qiita
はいさい！ちゅらデータぬオースティンやいびーん！ 概要 最近、Astro.jsに、Next.jsのWebアプリケーションを移行しましたが、本投稿は、Astroの紹介と、移行作業の感想をまとめるものです。 Astro.jsは欧米ではとても注目されているフレームワークですが、日本ではまだまだ話が広まっていない気がします。 Astro.jsとは Astro.jsは、MPAの静的サイトをレンダーするJavaScriptフレームワークです。 フレームワークといえども、Next.jsのように、Reactなどのフロントエンドフレームワーク専用ではないのです。 どのようなJavaScriptを使っても大丈夫なのです。 React.js === React.js、Vue.js => Nuxt.jsなどのように、フロントエンドフレームワークに一体化したバックエンドフレームワークという従来の考え方から完全に脱出
知識0の状態からたった2時間でVSCodeの拡張機能を作った話 - Qiita
はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか？ 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最初は拡張機能の開発をどのように進めていけばよいのか全くわからず、そもそも拡張機能でどこまでのことを実現できるのかすらわかりませんでした。ましてや実装についての知識なんて皆無です。 「これは完成まで1日くらい、いや下手すると3日くらいかかるかな」と考えていたのですが、いざやってみるとたった2時間で作れてしまったので今回はその経験についてお話ししたいと思います。 この記事を読んで、 「こんなにお手軽なら自分にも作れそうだ！」 と感じてくれたら幸いです。 本題 作りたかったものと
TypeScript v3.9.2 変更点 - Qiita
こんにちはメルペイ社な@vvakameです。 TypeScript 3.9がアナウンスされました。 What's new in TypeScript in 3.9 Breaking Changes in 3.9 TypeScript 3.9 Iteration Plan TypeScript Roadmap: January - June 2020 Roadmapはこちら。 この辺に僕が試した時のコードを投げてあります。 変更点まとめ Promise.all 関係の型推論を改善 Improvements in Inference and Promise.all 3.7で Promise.all 周りの改善を入れたけどリグレッションが発生してた undefined などが絡んだときの型推論がおかしくなってたのを修正 awaited という演算子の導入をしませんでした What About t
「ふりかえりの手法をたくさん学ぼう」で紹介された手法まとめ - Qiita
10/5 の「ふりかえりの手法をたくさん学ぼう」でいいふりかえり手法をたくさん紹介いただいたので、改めてまとめます。 記事の元になったお話、資料 ここに記載しているのは、以下で紹介された手法です。 ふりかえりの手法をたくさん学ぼう(ふりかえりam #27-28公開収録) - connpass podcast ep.27【#ふりかえりam】ふりかえり手法をたくさん学ぼう（前編）～ 紹介した手法：いっぱい ep.28【#ふりかえりam】ふりかえり手法をたくさん学ぼう（後編）～ 紹介した手法：いっぱい YouTube ふりかえりの手法をたくさん学ぼう ふりかえり手法の確認には、以下が紹介されていました。 ふりかえりチートシート 各手法、簡単に実践方法と効果を書いています。 実践例の記事が見つかったものはリンクを貼っているので、詳細はそちらをご参照ください。 各手法の参考リンクは、適当にググって出
シェルスクリプトでlsをパイプでつなぐのはなぜ悪いのか ～ ShellCheck: SC2010, SC2011, SC2012 とファイル名改行問題 - Qiita
シェルスクリプトでlsをパイプでつなぐのはなぜ悪いのか ～ ShellCheck: SC2010, SC2011, SC2012 とファイル名改行問題ShellScriptUNIXshellシェル芸POSIX はじめに シェルスクリプトで ls コマンドの出力結果（ファイル名一覧）をパイプで他のコマンドに渡して処理するのは推奨されません。ls コマンドを使ったコードを ShellCheck で検査するとおそらく問題があると警告が表示されるでしょう。ls を使うなという指摘自体には賛成なのですが SC2010、SC2011、SC2012 に書いてある理由については正しい説明がされていないと思っています。この記事ではなぜ ls の出力結果を他のコマンドにパイプで渡すのが悪いのか、ls を使わずに実現するにはどうしたら良いのかを解説したいと思います。一つ補足をしておくと、この問題は CLI コマ
TypeScript: satisfiesオペレーターの使い所のひとつとして - Qiita
TypeScript 4.9で追加されたsatisfiesオペレーターですが、「これ何に便利なの？」「使いみちある？」という声を聞くところですが、使いどころのひとつとして、あるかなと思ったのがあったので紹介したいと思います。 僕もsatisfiesオペレーター自体、使い所を模索しているところなので、いちアイディアとして読んでいただければと思います。そのうえで、感想やツッコミなど頂けると嬉しいです。 JavaScriptで書いてた頃 一旦、TypeScriptは忘れて、JavaScriptを書いてた頃のマインドセットでコードを考えてみます。 たとえば、次のようなオブジェクトリテラルをJSONにしたいと考えたとします。
ESLintだけでは守れない。Dependency cruiserによるアーキテクチャー保護 - Qiita
自ブログより 本記事では、dependency-cruiserというツールを利用してTypeScriptのコードベースに依存関係のルールを設定していく方法をご紹介します。意外と小規模、初期段階から導入しておきたいルールが多くありますので是非参考にしてみてください。 背景 私は現職の入社時に新規プロダクトの立ち上げてから1.5年がったのですが、徐々にコードベースが大きくなってきてコードベースの品質管理の必要性を感じる一方、アーキテクチャーの維持や、チームメンバーとの規約・思想の共有に苦心することが出てきました。 もちろんドキュメントの整備や、ESLint + Prettierの設定などは行ってきていたのですが、それでカバーできる範囲は限定的です。レビューの工数なども考ると、もっと広範において可能なものは自動テストがかけられる状態を作りたいものです。 そこで、最近はコードメトリクスに関心を持ち
TypeScript 10年の歩み - Qiita
TypeScriptは、2022/10/01に10周年を迎えました。 ということで、それを記念してMicrosoftの中の人が振り返りのエントリーを書いていました。 以下は該当の記事、Ten Years of TypeScriptの紹介です。 Ten Years of TypeScript 2022年10月1日は、TypeScript10歳の誕生日です。 10年前の今日、2012年10月1日に、TypeScriptは初めて公にされました。 The Early Days 初めてTypeScriptが表に現れたとき、それももっともなことでしたが、多くの否定的な意見がありました。 一部のJavaScriptユーザにとって、JavaScriptに型を強制する試みは冗談か邪悪な陰謀のように見えたかもしれません。 しかし、その試みには、多くのメリットがありました。 型チェックのおかげで、ファイルを保存
若手エンジニア育成において大切だと思うこと - Qiita
先日以下のイベントにお声がけいただき、LT登壇をさせていただきました。 今回はエンジニアリングマネジメントという括りでもあり、我々ARIで行っている若手技術者育成の取組みをご紹介させていただきました。 登壇資料はこちらで公開しておりますが、サマリーや補足用にこちらの記事を用意しました。 我々が目指す理想の技術者像 ずばり「事業をエンジニアリングできる技術者」です。 ベストセラーとなった「事業をエンジニアリングする技術者たち」で紹介されている「フルサイクルエンジニア」の概念がまさに理想像です。 引用：https://techblog.cartaholdings.co.jp/entry/2019/02/04/171325 事業ドメインに関心を持ち、社会や顧客の課題を解決できること。 技術をビジネス価値を変換できる力の高い技術者を理想とし、そうした技術者を多く輩出できる組織を目指しています。 ち
WebのフロントエンドでもDockerで開発環境を構築する理由。（余談としての脱node依存開発） - Qiita
１．数ヶ月ぶりにビルドしたらエラーになる 開発中は問題がないのですが、数カ月ぶりにWebpackなりをつかってビルドしてみるとエラーがでる。 フロントエンド開発者なら一度は経験したことがあるのではないでしょうか？ いろんな原因があると思いますが、以下のような条件で起こることが多いのではないでしょうか？ ・複数のプロジェクトを開発する端末に直接配置している。 ・nodeenvなどのバージョン切り替えツールをいれずグローバルでnodeを使っている。 ・ライブラリをプロジェクト内で限定せずグローバルでつかっている。 要は、手元のMacやWindows、Ubuntuなど開発端末上に直接、複数のプロジェクトを配置して開発しつつ、nodeを共有したり、安易にバージョンアップとかしているとビルドができないなどのエラーが発生したりします。 ２．nodeをつかったフロントエンドのビルドの脆さ （１）特定の団
ドメイン駆動設計の比類なきパワーでRailsレガシーコードなど大爆殺したるわあああ！！！ - Qiita
この記事は クラウドワークスアドベントカレンダー2019 12日目の記事です。 概要 こんにちは、怒り駆動リファクタリングを生業としている @MinoDriven です。 弊社リファクタリング専門チーム「バグハンター」で現在実施中のリファクタリング設計について紹介致します。 ドメイン駆動設計 を用い、Railsレガシーコードに対しViewとControllerを ActiveRecord非依存 に変更する設計です。 状況 弊社ブログの過去エントリにあるように、弊社サービスcrowdworks.jpはサービスインから8年経過し、 30万行 を超えるモノリシックRailsアプリになっています。 開発生産性が低下してきています 。 生産性低下の課題を解決しようにも、大規模な上に複雑かつ密結合な構造になっており、 マイクロサービスへの移行も、リプレイスも困難な制約 があります。 そこで半年前にリフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
