みなさんは VSCode の設定をどのように管理していますか？ この記事では、プロファイル機能を使って VSCode の設定をきれいに保つ方法を紹介します。 結論 私は VSCode の設定を以下の3つに分類して管理しています。 ① どのワークスペースでも有効化したい設定 → 既定（Default）のプロファイルで管理する ② 特定のワークスペースにおいて、チームで合意した設定 → 各ワークスペースの.vscode/settings.jsonで管理する ③ 特定のワークスペースにおいて、個人的に有効化したい設定 → 各プロファイルで管理する 前提 VSCode の設定には異なる2つのスコープが用意されています。 ユーザー設定 ワークスペース設定 簡単に言うと、ユーザー設定はグローバルに適用される設定、ワークスペース設定は特定のフォルダにおいてのみ適用される設定です。 ワークスペース設定はプ

タイトルの通り、めちゃくちゃ良さげなライブラリ react-call を見つけたので紹介するコーナー 実際の動きはわかりやすいデモページがあるので見てください👍 react-call とは react-call がもたらす効果は「ReactComponent を手続き的に処理できるようにする」というのが私の理解です。 これが何を意味するのかというと、Modal や Confirm のような「別のコンポーネントから任意のタイミングで呼び出したい(≒表示したい)」また「その結果(≒値など)を受け取りたい」というごく一般的な要件をシンプルに解決します🙌 詳しく見ていきましょう！ window.confirm との比較 下記は README にある例です。

2025/1/18 北陸三県.rb Lightning Talks in Kanazawa

こちらは「medicalforce New Year's Blog 2025」8日目の記事です。 今回はUI構造が変わっても状態を保持したいときに便利なReact-Reverse-Portalというライブラリを紹介しようと思います。 解決する課題 例えば、タブレット向けの画面実装で横向きのときは2-column型のレイアウトで表示して縦向きのときはタブを使ったレイアウトで表示したいということがあったとします。 Reactのコードで表現するとおおよそ以下のような実装になるかと思います。 export default Page = () => { // 中略 return isLandscape ? ( <Grid cols={2}> <GridItem> <Content1 /> </GridItem> <GridItem> <Content2 /> </GridItem> </Grid>

こんにちは。 苦しんでプログラミングを学んだ柴犬こと、くるしばです。 独学でプログラミングを学習し、Webサービス作りITベンチャーを起業しました。 その後個人開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 下記のTwitterにてプログラミング学習に関して発信し、1.9万人以上の方々にフォローして頂きました。 また、最近はUdemyでReactとFlutterのプログラミング講座も出して、ベストセラーにも入っています。 初心者のうちは知らなかったが、学習を進めたり実務に入って経験が長くなってから 「こんな便利なものあったんだ...！」 となるツールってありませんか？ 僕はめちゃくちゃありました。 こういったツールは他の詳しい人から教えてもらうケースも多いので仕方がないのですが、もしこれらを初心者のうちに知ってたら色々楽だったのにな...と思うものが沢山あります

Reclineの構築手順本記事では、Reclineの構築手順について解説します。Reclineは、CLIおよびエディタ内で動作し、コードの作成、編集、実行を支援します。このプロジェクトはClineをフォークしたものであり、Claude 3.5 Sonnetによって真価が発揮されます。。 これ何がすごいって、VSCodeのLanguageModelAPIとCopilotを使用するため、実質月額10ドル払えば無限にClaudeがClineで使えちゃうんですよね！！！！！！！！！！（ついでにcopilotも使えちゃう） ということで、下記構築手順まとめます。 本記事を作成するにあたり、以下の情報を参考にしました。 Reclineリポジトリ: https://github.com/julesmons/reclineVSCodeダウンロードページ: https://code.visualstudio

概要 開発者向けの AI ツールは数多くありますが、その中で「Cody」は 無名ながらも知る人ぞ知る優れたプロダクトです。私が普段いるAI技術者コミュニティでは密かに絶大な支持を集めていますが、SNSなどでの一般的な知名度はほとんどないため、ここで紹介します。 Cody は無料プランが圧倒的に強い他、課金プランも、GitHub Copilot、Cursor、ChatGPT と比較して機能性で大きく抜きん出ています。私はすでに半年課金愛用していて、おそらく来年も愛用するでしょう。 Cody とはなんぞや Cody くんは、VSCode や、JetBrains IDEs、Neovim、Eclipseなどのコードエディタの拡張機能として使えるコーディング補助 AI ツールです。 他の生成 AI コードツールと同様に、AI コード補完とAIチャットがあります。 なぜ Cody がおススメなのか C

Practice RustLearn Rust by practicing, choose from a variety of coding exercises and challenges to help you improve your Rust programming skills

SaaS の管理画面を開発していると新規作成画面と編集画面を実装することがよくあります。 これらの画面は一見似ているので共通のコンポーネントで実装できそうですが、意外と多くの違いがあります。 この記事では新規作成画面と編集画面を実装するときに気をつけていることをまとめてみます。 コンポーネント設計について シンプルな例でも新規作成画面と編集画面には違いがありました。 これらを1つの共通コンポーネントで実装するとコンポーネント内でIF分岐が発生し可読性が下がったり、再利用性が低くなったりします。 では両者を完全に別コンポーネントで実装したら良いのかというとそれも微妙です。新規作成、編集の入力項目は仕様的に同じであり、バリデーションも同じであることが多いです。 ここを別に実装してしまうと仕様が変わったときに変更する箇所が多くなってしまいます。 なのでフォーム部分(入力とバリデーション)は共通化

これはなに ども、レバテック開発部のもりたです。 今回はトランザクション分離レベルについてまとめました。トランザクション分離レベルって基本情報技術者試験とかで学ぶものの、座学だけだとあんまりピンとこずに忘れちゃいますよね。もりたも長らく曖昧な状態で生きていたのですが、よい理解の仕方があったので今回はその解説をします。 トランザクション分離レベルを構成するふたつの変数 トランザクション分離レベルとは まず初めに、概要を掴むところからいきましょう。 トランザクション分離レベルとは、あるトランザクションのデータベースに加えた変更が、他のトランザクションにどの程度影響を与えるか？　というもの（分離性、独立性）を一定基準でレベルに分けてまとめたものです。 どの程度影響を受けるか？　については三つの影響が定義され、その影響度合いに応じて分離レベルが４つ存在します。これは大体こんな図で解説されます。 よ

プロファイルでできることは環境の設定だけです。シェルの設定は実際にはできないことはないのですが、やっても無意味なことになるのでできないとします。無意味なことになるというのは新しく起動したシェルにはプロファイルで行うシェルの設定は反映されないということです。環境の設定とは、特定のシェルに依存しない初期化処理のことで、その一つが環境変数の設定です。環境変数は OS の機能であってシェルの機能ではありません。環境の設定には、他に stty コマンドによる端末の設定や umask コマンドによる umask の設定などがありますが、プロファイルで設定することはあまりありません。 rc ファイルでは環境の設定とシェルの設定の両方ができます。シェルの設定、例えばプロンプト文字列の設定やシェルの機能を有効にしたり補完スクリプトの読み込みなどは rc ファイルに書きます。つまり、ほとんどのことは rc フ

便利ツール 私たちは日々の開発の中で様々な便利ツールを使います。 その中でもBurpは多くの機能を持ち、エンジニアにとってかかせないツールとなっています。 今回の記事ではフロントエンド開発においてBurpがどのように役立つかを紹介します。 Burpとは BurpはPortSwiggerにより提供されているツールで、Professional、Enterprise Editionなどの種類があります。中でもCommunity Editionは無料で提供されており、誰でも公式サイトからダウンロードすることができます。 では早速Burpの使い方を紹介していきます。 Proxy ProxyはBurpを使う上で最もベーシックな機能になります。 準備 Burpを立ち上げ、タブからProxyを選択 Open browserをクリックし、ブラウザを立ち上げる 解析したいページを開く 上記のようにBurpで立

紹介すること TypeScriptの型を厳密に定義し、ドメインモデリングを行います。 ソースコードがドキュメントとして機能することを目指します。具体的には、Branded Typeやタグ付きユニオンなどの技法を扱います。 この記事は、TypeScriptをこれから使いこなしてみたい方向けの内容です。 紹介しないこと ドメイン駆動開発や関数型プログラミングの概念については、深くは触れません。 Make Illegal States Unrepresentable あり得る型だけを定義するという考え方です。 詳細は以下を御覧ください。 この考え方は、ほとんどのTypeScript開発に適用できると思います。 例1 仕様: すべてのユーザは、id、nameを持っている 認証されるとisVerifiedがtrueになり、verifiedDateが付与される 認証前はisVerifiedがfalse

2014年から先端テクノロジーの研究を論文単位で記事にして紹介しているWebメディアのSeamless（シームレス）を運営し、執筆しています。 1週間の気になる生成AI技術・研究をピックアップして解説する連載「生成AIウィークリー」から、特に興味深い技術や研究にスポットライトを当てる生成AIクローズアップ。 今回は、「私はロボットではありません」でお馴染みのGoogleが開発する「CAPTCHA」（コンピュータと人間を区別するための完全に自動化された公開チューリングテスト）を突破するAIシステムを提案した論文「Breaking reCAPTCHAv2」に注目します。 ▲CAPTCHAを突破するAIシステム CAPTCHAは、ウェブサイトのセキュリティを向上させるために広く使用されている技術です。この研究は、そのシステムの効果を詳細に検証し、AI技術を用いてどの程度突破できるかを明らかにしま

Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。

概要 AWS とかで踏み台ホスト経由（ここでは AWS っぽく bastion と呼ぶ）で ssh する必要があるなら ~/.ssh/config は↓みたいにしとくのが良いんじゃないかな？ Host bastion Hostname bastionのIPアドレス User bastionのユーザ名 # ↓は規定のファイルだったり ssh-agent 使ってれば不要 IdentityFile bastion接続用の秘密鍵ファイル名 # ↓の3つはWindowsでは使えないので諦めて ControlMaster auto ControlPath ~/.ssh/cp-%r@%h:%p ControlPersist 10m Host 好きな接続先名 Hostname 接続先のIPアドレス User 接続先のユーザ名 # ↓は規定のファイルだったり ssh-agent 使ってれば不要 Identi

2024年度リクルート エンジニアコース新人研修の講義資料です

本記事では、ブラウザ拡張機能開発を加速させる、個人的に注目な3つの拡張機能開発フレームワーク・ツール（WXT、Plasmo、Extension.js）を紹介します。 サンプル拡張機能の実装を通して、それぞれの特徴、セットアップ方法、実際の開発フローを見ていきます。お好みの拡張機能開発ツールが見つかれば嬉しいです。 各フレームワーク・ツールの紹介 WXT WXTは、Viteベースのブラウザ拡張フレームワークです。次のような特徴を持っています（トップページから抜粋）。 クロスブラウザ対応 Chrome、Firefox、Edge、Safari、その他Chromiumベースのブラウザ Manifest V2、V3の両方に対応 開発モードでのHMRと、開発用ブラウザの自動起動 内部的にChrome Launcher等を使用 ファイルベースのエントリーポイントでマニフェストを自動生成 Nuxt風の自動

はじめに あえてどことは言いませんが、先日某サイトで「ネット速度を高速化する方法」としてDNSサーバの設定をpublic DNSサービスに変更する記事が出てました。その記事の結論としては「変更しても大差ない」というものでしたが、DNSでネットワークを高速化するというこのような記事は何年も前からときどき見かけます。いい機会なので、このあたりについてもう少し深く掘り下げて考えてみましょう。 ※この記事では、とくに明示しなければDNSサーバとはキャッシュDNSサーバ(フルサービスリゾルバ)を指すものとします。 DNS応答の速さ DNSの設定を変えることによりネットワークの速度が速くなるとすれば、(1)DNSそれ自体の応答が速くなるか、(2)その後のWebアクセスが速くなるか、のどちらか(または両方でしょう)。このそれぞれについて検討してみましょう。 前者が速くなると画像やJavascriptなど

注意事項 予想以上に本記事に対する反応があり、残念ながら誤った情報が流れているのを見かける様になったのでここに現状を注記しておきます。 2024年8月2日 16:00 (JST)時点の状況まとめ 3サービス共通 制限されるのはあくまでも特定条件を満たすアカウントでの新規利用のみであり 既存の利用者は一切影響を受けない また、サービス終了については一言も明記されていない[1] 当初は公式アナウンスが無かったが、2024年7月31日に各サービスの移行ブログの冒頭に新規受付停止の旨が追記された Jeff BarrがX(旧Twitter)でコメントを出している AWS CodeCommit AWS社員によるre:Postの投稿 (既に削除済み) によれば2024年6月6日より新規アカウントでのCodeCommitの利用を制限している 同re:Postによれば2024年7月25日以前にCodeCom