【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】
はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると右側にディレクトリ名が表示されているのですが、薄い文字かつ、目線移動のコストが発生するため分かりづらいです。 この記事では、VSCodeの設定を変更することで、ファイル名にディレクトリ名を含めて表示する方法を紹介します。 設定方法 VSCodeの設定ファイルsettings.jsonに以下の設定を追加します。 { "workbench.editor.customLabels.patterns": { "**/{index,page,layout,template,route,actions,hooks,components,utils,types}.{js,ts,jsx,tsx,md,mdx}": "${dirname}/${
次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
Google Engineering Practices Documentation (日本語訳)
Google Engineering Practices Documentation (日本語訳) Google には、全言語および全プロジェクトをカバーする広範なエンジニアリングの慣行があります。 ここにあるドキュメントは私達が長年の経験からさまざまなベストプラクティスを蓄積してきたことを表しています。 この知識がオープンソースプロジェクトや他の組織の利益になることを願って、私達は可能ならそれを誰にでも利用できるように公開します。 現在、以下のドキュメントがあります。 Google コードレビューガイドライン。これは 2 つのドキュメントからなります。 コードレビュアーのガイド 変更作成者のガイド 用語 ここにあるドキュメントには、Google 内部で使われる用語があります。外部の読者のために意味を掲載しておきます。 CL: 「changelist」の略。一つの独立した変更を意味していて
理解しやすいコードの書き方～理解容易性の7つの観点～ - Qiita
はじめに 「理解容易性」は「保守性」の観点の1つとして重視され、多くの原則や技法が紹介されているが、断片的かつ多様であり、全体像を理解することは難しい。 抽象度は高いが、体系的に観点を整理する事で、その理解の助けとなれば幸いである。 定義 「理解容易性」を簡単に言えば、「理解のしやすさ」であるが、その意味から掘り下げると、「思考する量」と言い換えることができる。 本記事では理解容易性を「思考量の少なさ」と定義し、7つの観点に整理した。 先に要約およびチェックリストを記載し、概略を記載した。 後に詳細で理解のため、各観点毎の説明と個別の原則や技法へのリンクを記載した。 要約 7つの観点の要約を先に示す。 （変数や関数の）名称は分かりやすくする （変数や関数の）役割は１つにする （変数や関数の）参照は狭くする （変数や関数の）状態は変えられなくする （関数やクラスの）面積は小さくする （関数や
知らないとあぶない、Next.js セキュリティばなし
ムーザルちゃんねるのムーです。今回は zaru さんと、Next.js のセキュリティについて話しました。 セキュリティについては様々あると思いますが、今回は以下の3点をピックアップして話しました。 Client Components の Props から露出する Server Actions の引数に注意 認証チェックをやってはいけない場所、やって良い場所 これらは、Next.js 入門者がうっかりとやってしまうリスクがあるものです。 このような罠は、アプリケーション自体は正常に動くので、知らないうちにはまってしまいますし、自力で気づくのも難しいものです。もしも知らないものがあれば、ぜひご確認ください。 楽しくて、安全な Next.js 生活をお送りください！ Client Components の Props から露出する これは、シンプルで当たり前といえば当たり前ですが、Client
Google検索も不要に？ 検索AI「Perplexity」がスゴすぎてちょっと怖い
“AI検索”サービス「Perplexity」（パープレキシティ）がスゴい。 Perplexityは、質問に対してテキストで答えてくれる、チャットbot型生成AIだ。ChatGPTと似ているが、検索に特化しており、「Webの最新情報をベースに検索できる」点が異なる。 例えば、7月4日時点で東京都知事選（7月7日投開票）の最新状況を聞くと、こんなふうに答えてくれる。
アーキテクチャレベルで考える開発生産性 / architecture-and-productivity
2024/06/29、開発生産性カンファレンス2024での登壇発表資料です。 https://dev-productivity-con.findy-code.io/2024?m=2024/m/Z8HnzjZb
ビズリーチが目指す「開発生産性」ダッシュボード 〜 データ収集の壁と乗り越え方 〜 / dev-productivity-con2024
2024年6月28日より開催された「開発生産性Conference 2024」の登壇資料です。 https://dev-productivity-con.findy-code.io/2024 ▼関連資料 SPI原点回帰論：事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改…
「1日1万歩」は意味がない？ 長く健康でいるための効果的なウォーキング方法を、専門家に聞いた｜tayorini by LIFULL介護
「1日1万歩」は意味がない？ 長く健康でいるための効果的なウォーキング方法を、専門家に聞いた #ヘルスケア 公開日 | 2024/06/25 更新日 | 2024/06/25 ウォーキングというものがある。簡単に言ってしまえば歩くことだ。体力の維持や向上のために、ウォーキングはいいと聞く。 私はもうすぐ40歳。ここ最近、体力の衰えを感じつつある。この先さらに年を取っても健康に生きていきたいし、何か運動の習慣をつけたいと考えていた。 ウォーキングは走るより楽だし、ジムのようにお金がかからないので、自分でも時々取り入れている。 この記事を書いている地主です！ 1日に1万歩以上を歩くことも多い。ただ不思議なことに健康診断などに行くと、保健師さんに「運動をしましょう」と言われる。ウォーキングしているのに、1万歩以上歩いているのに。 割とよく歩いているんです！ 位置情報ゲームにはまり、1日1万歩以上
TypeScript 5.5 で追加された正規表現構文チェックを理解する
TypeScript 5.5で、@graphemeclusterさんによって正規表現リテラルの構文チェックが導入されました🎉 この構文チェックによって、正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力してくれます。 この機能について、次のことが気になったので調べてみました。 どんな構文がエラーになるか なぜ導入されたか どうやってチェックしているか JavaScriptで実行できるがTypeScriptでエラーになる構文はあるか ESLintとのカバー範囲の違い 本記事に関して、誤り等があれば指摘いただけると嬉しいです。 どんな構文がエラーになるか TypeScript 5.5では、正規表現に関するエラーメッセージが40個程度追加されています。 例えば、下記のような構文は、5.5でエラーになります。 // 存在しないフラグ var re = /a/b; // エラー
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av
【ChatGPT】英語学習用に素敵な先生を錬成したよ！ - はげあたま.org
chatgpt.com 3行で 英文アウトプット練習の優れた相手をGPTsで実装できたからストアに並べたよ！ 学習ツールとしての気持ちよさが自慢なのでまずは1回遊んでみてください！ 「英語だと中学生レベルの文章すら全然話せない」の克服ができる………と信じて、製作者自身が酷使しています 何ができるの？ 和文による出題→英訳→添削→出題…のループです。 体験の良さと自身のアウトプットカの弱さは触ってもらえばすぐに伝わるはずです。これ読む人の8割はブクマして満足するだけなんでしょうけど、これ以降を読むより先にまずは一度使ってみてください。最初にあるリンクへ飛ぶだけです。 なお「完全無料！」と言いたいですが、ChatGPTへの課金が無いとすぐに制限が入るのが最大の難点です。 特長を教えて ジャンルや問題の難易度を適宜変更可能。激ムズ要求出したら絶望感がすごい…… 日本語混じりの英文や、かなりの意訳
『ドメイン駆動設計をはじめよう ―ソフトウェアの実装と事業戦略を結びつける実践技法』が出版されます - Magnolia Tech
ドメイン駆動設計をはじめよう ―ソフトウェアの実装と事業戦略を結びつける実践技法 作者:Vlad KhononovオライリージャパンAmazon 2021年にO'Reilly Media, Inc.から出版された「Learning Domain-Driven Design」の待望の日本語訳『ドメイン駆動設計をはじめよう ―ソフトウェアの実装と事業戦略を結びつける実践技法』がついに出版されます。 www.oreilly.com 訳者は、増田 亨さん！！ 2020年代に、ドメイン駆動設計を学ぶための最初の入り口としてどの本を読めば良いかは、かなり悩ましい...というのはよく言われるのですが（元祖のエバンス本はさすがにだいぶ古くなってきたし、回りくどい表現も多いし...）、そんな時におすすめできる1冊です。 2021年に原著が出版された時に買ってざっと読んでいたのですが、パート1で戦略的DDD（
世界で話題のブラウザ「Arc」が便利すぎたので魅力を解説する - Qiita
はじめに 社員の皆さんはこんな奴が最近エンジニアになって頑張ってるんだなと暖かい目で読んでいただければと思います。 社外の方やエンジニアを目指している方は少しでも学習の参考や、コネクター・ジャパンに興味を持っていただければと思います。 自己紹介 建築の営業→未経験から独学でプログラミング学習し5ヶ月でLaravelでポートフォリオを作成しました。そして現在は自社開発企業に入社し、WEBエンジニアとしてプロダクト開発に携わっています。 概要 あなたは普段どんなブラウザを利用していますか？ ほとんどの方がGoogleChromeで、fireFox、Vivaldiなど色々ブラウザがありますね。 私は最近世界で話題になっている新しいブラウザ「Arc」を使っており、Chromeから移行のしやすさや、利便性の良さからすっかり虜(ファン)になってしまいました笑 そんな「Arc」を3ヶ月使ってみての使用感
生成AIを使って、思いつきを5分くらいで資料(のプロトタイプ)にする方法
はじめに おれの名前は樋口恭介。突然はじめたn番煎じの生成AI活用シリーズだが、今回は資料生成をテーマにお送りする。 業務時間中に妄想レベルのアイディアはめっちゃ浮かぶものの、他人にちゃんと伝えるレベルでは全然煮詰まってないから一旦放置しておくか、とやっているうちにいつのまにかただ忘れていって、無、みたいなことがよくあるのだが、こういう人はけっこう多いのではないかと思う。 そういうわけで、今日は生成AIを使って思いつきレベルのアイディアを5分くらいでそれらしいプロトタイプにするということをやってみたいと思う。 資料化するアイディア 最近、いろんな生成AI系の案件を見たりやったりするなかで、「もしやPMOが生成AI(LLM)を駆使できるようになるというのが、自動化において一番破壊力があるのでは？」と思うようになった。 この直感はいい感じな気がするのだが、しかし、うまく情報を構造化して資料化す
TypeScriptのパフォーマンス改善
2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマンスの最適化が不可欠です。コンパイル速度を上げることでビルド時間やテスト実行時間の削減を行うことができます。今回の発表では、TypeScriptのコンパイルパフォーマンスを改善するための具体的な手法とその背後にある理論をいくつか紹介します。 ◎内容 1. TypeScriptのパフォーマンスとは何か、そしてなぜそれが重要なのか 2. コンパイル速度を改善するための具体的な手法とその背後にある理論 本資料で紹介している内容については以下の記事で詳しく記載していますので合わせて参照していただければと思いま
プログラミングの生産性向上のためにお金をかけてよかったもの10選 - Qiita
タイトルのとおり、生産性向上のためにお金をかけてよかったものをご紹介します。 基本的には仕事道具と健康系が多いです。 腰痛 睡眠 集中力向上 このあたりにお悩みをお持ちの方の一助になれるかもしれません。 おしりセレブ 他のトイレットペーパーだと、おしりを拭いた後大体痛くなってしまいます。 そのまま長時間椅子に座って作業をするのが辛い…というのがあったのですが、おしりセレブを使うようになってからその悩みがなくなりました。 ステッパー メンタリストDaiGoさんがお薦めされていたのを見て購入しました。 もともと腰痛に悩まされており、「少し運動しようか」という日頃ランニングを日課としていました。 が、ランニングのために決まった時間をガッツリ取らないといけなかったり、雨の日はできなかったりという課題がありました。 ステッパーを買ってからは雨でも気にせず有酸素運動ができるし、Amazon Prime
Announcing TypeScript 5.5 Beta - TypeScript
Today we are excited to announce the availability of TypeScript 5.5 Beta. To get started using the beta, you can get it through NuGet, or through npm with the following command: npm install -D typescript@beta Here’s a quick list of what’s new in TypeScript 5.5! Inferred Type Predicates Control Flow Narrowing for Constant Indexed Accesses Type Imports in JSDoc Regular Expression Syntax Checking Iso
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
集中して作業する技術/how_to_work_deeply
Chrome DevToolsにもGeminiを搭載へ。エラーの解決策などAIが支援
