はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 注意: この記事はGitHub Copilotの指示書の自分なりの使い方です。 GitHub Copilotに新しい機能が追加されたので、その機能と自分なりの使い方がメインとなります。 翻訳部分は、第一版に相当するSCode の Rules for AI 全体のルール設定 翻訳 GitHub Copilotを御覧ください。 まとめて１ファイル 複数ファイルに分割 どのような形だろうとGitHub Copilotには伝わります。 この記事は、 GitHub Copilotに正確な情報を伝えつつ、 人間とAIとのギャップを埋めるための指示書

GitHub Copilotシリーズ GitHub Copilotの新機能で、GitHub Copilotに対するAIの振る舞いを細かく調整できるようになりました。 👇️ このCursorの Rules for AI とまったく同じことができます。 Cursor の Rules for AI 全体のルール設定 翻訳 #Next.js - Qiita https://qiita.com/masakinihirota/items/4b55471205f7dd17482e 追記 2025年3月12日 GitHub Copilot のプロンプトファイル(実験的) プロンプトファイルはタスクや機能や、目的ごとのプロンプトを作成して、AIに指示できるファイルです。 copilot-instructions.md ファイルが GitHub Copilot への全体設定ならば、 プロンプトファイルは、G

TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI、Tailwindのエキスパート。 コードのスタイルと構造 - 正確な例を用いて、簡潔で技術的な TypeScript コードを書きます。 - 関数型と宣言型のプログラミングパターンを使用し、クラスは避ける。 - コードの重複よりも反復とモジュール化を優先する。 - 補助動詞(isLoading, hasErrorなど)を用いた説明的な変数名を使用する。 - 構造ファイル：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型。 命名規則 - ディレクトリにはダッシュ付きの小文字を使用する（例：components/auth-wizard）。 - コンポーネントには名前付きエクスポートを使用する。 TypeScriptの使用法 - すべての

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Next.js Middleware ドキュメント Routing: Middleware | Next.js ※Middleware v13.1.0 時点のドキュメントを参考にしています。 対象 Middlewareって何？ どんな事ができるの？ どんな機能があるの？ と疑問を持っている人。 切り貼りコピペで使っていた人（＝自分）向け。 Middleware について 初心者向けなことや Next.js 公式ドキュメントを調査していきます。 Middlewareを5歳でも理解できるように説明をしてください。 (by GitHub Co

v0 という shadcn/ui ＋ AI サービス by Vercel (開発者がAIに提案してもらい、UIをコピペできるコードにしてくれる。)tailwindcssVercelshadcnv0 追記 2023年10月18日 ↓この簡単な使い方の動画がわかりやすいです。 Announcing v0: Generative UI – Vercel Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供 － Publickey 無料は 月当たり20回まで 月額 10ドルで 150回まで 月額 30ドルで 500回まで 月額 50ドルで 1000回まで 追記終了 追記 2023年10月1日 参加許可のメールが来ました。 ↓実際に使用してみた結果。 ※日本語で命令してもきちんと意味を汲み取って返してくれています。 中身はChatGP

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? GitHub Copilotシリーズ Github Copilot chat はGithub Copilot で課金していれば、無料で利用できます。 GitHub Copilot chatのヘルプ チャット欄から /help と入力するとヘルプが表示されます。 GitHub Copilot chatは毎日にように更新されています。 GitHub Copilot chatの言語 日本語が設定してあれば、GitHub Copilot chatの言語も日本語になります。 デフォルトでは、Copilot Chat は最初、VS Code で設定

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 現在の AIを一言で説明すると・・・ フミコ・フミオさんはTwitterを使っています: 「ほぼ全員がご高齢者の会社上層部からの「対話型AI とは何かその功罪について簡潔に分かりやすく出来たら一言で説明しろ」という難題にヤケクソで「ドラえもんです」と答えたら「便利だけど取扱注意ということだな」とほぼ正解な認識をしてくれたので藤子・F・不二雄先生は偉大すぎる。」 / Twitter Github Copilot と Amazon CodeWhisperer の比較 現時点では Github Copilot の方が使いやすい。 単純な機能だ

※GitHub Copilotが長いコードを提案してきた時、ショートカットキーの「単語単位で受け入れる」を使用すると便利です。 ※ インライン候補をトリガーするとは提案が表示される場所ならばどこでも GitHub Copilot が動きます。 例えば、提案が表示される場所からカーソルが動かしてしまっても、カーソルを元の場所に戻してトリガーコマンドを使うと提案が表示されます。 ※ インライン候補をトリガーするはデフォルトのキー設定では動きません。：Windows で確認 自分でキーボードショートカットキーを設定する必要があります。（これは自分の環境だけかもしれません。） 導入後（課金後） 導入後に何をしていいのか？何が出来るのかがよくわからなかったので調べてみた。 環境 Windows10 GitHub Copilot (導入 1年契約 or 1月契約) VSCode VSCode Insi

現在の AIを一言で説明すると・・・ フミコ・フミオさんはTwitterを使っています: 「ほぼ全員がご高齢者の会社上層部からの「対話型AI とは何かその功罪について簡潔に分かりやすく出来たら一言で説明しろ」という難題にヤケクソで「ドラえもんです」と答えたら「便利だけど取扱注意ということだな」とほぼ正解な認識をしてくれたので藤子・F・不二雄先生は偉大すぎる。」 / Twitter 下準備 VSCode 上で ChatGPT を便利に使うためのツールの下準備をします。 これは過去に削除された拡張機能の代替ツールであり、その削除された拡張機能の機能をほぼ全部受け継いでいます。 主な機能 コードを範囲選択します。 右クリックメニューから選択します。 右クリックメニュー コメントからコードを生成する （Code-xxx 系モデルのみ使用可能です。） 選択した範囲からお手本を作る テストコードを作る

追記 2023年6月11日 TeleportHQが日本語に対応していました。 追記終了 FigmaのデザインからNext.jsのプロジェクトを作るまでのハンズオンです。 TeleportHQとは FigmaのデザインファイルをNext.jsのコードに変換します。 無料です。 （他にもたくさん便利な機能があります。） サイト TeleportHQ Low-code Front-end Design & Development Platform | TeleportHQ https://teleporthq.io/ デザインのコード化ツール 無料 (3プロジェクトまで) Figma https://www.figma.com/ デザイン設計ツール 無料 (3つのFigmaファイルと3つのFigJamファイルまで) Next.js by Vercel - The React Framework

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 更新履歴 Next.js公式examples集を分類（2023年7月版） Next.js公式examples集を分類（2022年7月版） Next.js公式examples集を分類（2021年7月版） Next.js公式examples集を分類（2021年1月版） Next.js公式examples集を分類（2020年7月版） サンプルの場所 Next.js公式リポジトリのexamples内ディレクトリ https://github.com/vercel/next.js/tree/canary/examples はじめに Next.js

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Faunaとは Fauna | The data API for modern applications https://fauna.com/ Faunaの紹介 Faunaとはデータベースの名前です。 MySQLとかPostgres、SQLite等のように、 たくさんあるデータベースアプリケーションの一つです。 （少し前まではFaunaDBでした。） Faunaは英語で 動物相（どうぶつそう、英:Fauna） ある特定の地域と時間における動物を表す集合的な用語です。 これに対応する植物の集合の概念は植物相です。 さらに全生物を対象とする

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 出来ること 大型リポジトリの中の一部のコード、サンプルをダウンロードしたい。 使用ツール tiged degitの後継ツールです。 degit 2021年から開発が止まっています。 インストール方法 npm install -g tiged もしくは、npx を付けて実行します。(この方法は実行時に少々時間がかかります) 使用方法 Next.jsのリポジトリの中にあるサンプル hello-world （約2KB） https://github.com/vercel/next.js/tree/canary/examples/hello-w

更新履歴 Next.js公式examples集を分類（2023年7月版） Next.js公式examples集を分類（2022年7月版） Next.js公式examples集を分類（2021年7月版） Next.js公式examples集を分類（2021年1月版） Next.js公式examples集を分類（2020年7月版） サンプルの場所 Next.js公式リポジトリのexamples内ディレクトリ はじめに Next.jsの公式サンプルは前回(2021年1月版)から9本増えて合計277本あります。新たに追加されたサンプルには(new)がついています。（2021/07/03) しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。 （基礎) Next.jsで基礎的な内容を扱っているサンプル。 （公式） 公式ドキュメント で説明するのに使われているサンプル等。 ※

追記 2023年9月15日 こちらの拡張機能は、エディタ上に結果が出力されます。 Quokka.js - Visual Studio Marketplace (無料版) Quokka Editions (有料版との比較) [小ネタ] VSCodeの拡張機能にQuokka.jsを入れたらとても便利だった | DevelopersIO VSCode拡張機能 Quokka.jsの紹介｜wharaguchi 追記終了 VSCodeでRubyを気軽に実行する環境を作る。 - Qiita https://qiita.com/masakinihirota/items/ec90086bab86f369fa15 このTypeScript版です。 同じくVSCodeの拡張機能である CodeRunner を使います。 VSCodeにTypeScriptが動く環境を追加します。 node.jsが入っていればts

2023年12月25日 追記 ブランチ名の変更方法が変わりました。 リポジトリのトップ画面で 左上のタブバー(Code Issues Pull requests Actions Projects Wiki Security Insights Settings)の下にある リポジトリ名の更に下にある masterを押します。 そうするとその下にプルダウンメニューが開きます。 その中にあるView all branchesを押します。 ブランチの一覧が表示されます。 その中にある三点リーダー(...)を押します。ゴミ箱アイコンの横です。 そうすると「Rename branch」がありますので、押します。 名前を変更して「Rename branch」を押します。 ブラウザをリロードしたり、リポジトリのトップ画面に戻ると ブランチ名が変更されているのが確認できます。 Default branchを

更新履歴 Next.js公式examples集を分類（2023年7月版） Next.js公式examples集を分類（2022年7月版） Next.js公式examples集を分類（2021年7月版） Next.js公式examples集を分類（2021年1月版） Next.js公式examples集を分類（2020年7月版） はじめに Next.jsの公式サンプルは前回(2020年7月版)から34本増えて合計268本あります。新たに追加されたサンプルには(new)がついています。（2021/01/10） しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。 （基礎）Next.jsで基礎的な内容を扱っているサンプル。 （公式）公式ドキュメント で説明するのに使われているサンプル等。 ※今回の更新で一番目についたのはwith-mysqlで、その他DB関連も多く追加さ

Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ReactreduxSWRRecoilreact-query 2021/09/24 追記 これまでは状態管理にReduxやVuexなどの状態管理用ライブラリを使いますが、Graphqlを採用した場合にApollo Clientを利用することでフロントエンドの状態管理の実装がかなり楽になります。 追記終了 2021/01/17 追記 2020年版 満足度ランキング State of JS 2020: JavaScript Flavors https://2020.stateofjs.com/ 最近よく聞く状態管理 pmndrs/jotai: 👻 Primitive, flexible state management for React https://github.com/pmnd

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 競技プログラミング 競技プログラミングは 言語の入門書を読み終わったあとに挑戦すべきものの一つ。 技術者としてトップレベルまで近づきたいと目標を持っている人等はオススメです。 現在の競技プログラミングは数学的知識がかなり必要になっています、中学、高校の数学が怪しい人はそちらの知識を固めておく必要があります。 競技プログラミングとは、数学オリンピック等の「競技数学」をプログラムで書ける問題を解くという意味のほうが近いです。 数学の問題を解くのが第一で、プログラムを書く能力はその次です。プログラムはソースコードを書く能力以外に、設計やセキュ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 使い方 各タイトルのリンクは引用元の日本語の文章へ飛びます。 英文のリンクは原文へ飛びます。 原文はこちらで公開されています。 97-things/97-things-every-programmer-should-know: Pearls of wisdom for programmers collected from leading practitioners. 概要 [プログラマが知るべき97のこと＋１０by Kevlin Henney 和田卓人、夏目大] (https://プログラマが知るべき97のこと.com) この本はエッセ

Sublimergeの使い方 備忘録程度のもの インストール コマンドパレット（Ctrl+shift+p）から Sublimerge Pro をインストールします。 Sublimergeの使い方 基本コマンド コマンドパレット（Ctrl+shift+p）から Sublimerge Compare to View Sublimerge Compare to Clipboard もしくは 右クリックから Sublimerge>>Sublimerge Compare to View Sublimerge>>Sublimerge Compare to Clipboard のどちらかを選択します。 そうすると別ウィンドウにマージ専用ウィンドウが開きます。 差分がない場合警告が出てマージ専用ウィンドウは開きません。 開いているファイルが1つだけの場合 クリップボードとの比較のみできます。 開いているフ

gulp設定ファイルをcoffeescriptで書く node.js、npmインストール後 環境 node -v v0.10.35 npm -v 1.4.28 gulp -v 3.8.10 （gulpのversion3.7ぐらいからcoffeescriptに対応したようです。（未確認）） 事前知識 npm install --save-dev gulp ↓短縮形 npm i -D gulp このコマンドはgulpの設定ファイルにプラグインを使えるように書き込むコマンド。 最初 まずはプロジェクトフォルダを作りそこの中に入り、npmを初期化する。 npm init package.jsonファイルが作られる npm i -D gulp gulpコマンドが使えるようになる npm i -D coffee-script gulpでcoffeescriptが使えるようになる gulpをcoffee

gitをインストールした最初の初期設定の後で別の名前やメールに変更したい。 問題 Ubuntu14.04のインストール直後gitの初期データを設定した、しかし後に別の名前とメールを変更する必要に迫られ設定を変更したが、そのデータ設定が反映されなかった。 原因 .zshrc（zshシェルの設定ファイル）に直接書き込んでいた。 （.zshrcをコピペしたため。） 最初gitの設定ファイルは3箇所あると調べあげ、それぞれ設定しなおしてみたがぜんぜん反映されず色々時間を使ってしまった。 git設定ファイルは基本3箇所 /etc/gitconfig Git でこのファイルの読み書きをするには、 --system オプションを指定します。 ~/.gitconfig ホーム直下 Git でこのファイルの読み書きをするには、 --global オプションを指定します。 .git/config リポジトリに

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

テスト駆動開発 TDDという開発手法を使いつつ動的プログラミング言語 Rubyを学ぶ ローカル環境にダウンロードして実際にファイルを触りつつ動かしたほうが実際の感触やエラーメッセージ等が勉強になります。 （ウェブサイトのオンライン上でも学べますが穴埋め問題だけで終わってしまいます。） 中を見てもらえればわかりますが、 Rubyの問題自体は非常に簡単な初心者レベルから始まっています。 たのしいRuby等の入門書をひと通り読んでからこの問題を解いていくと実際の動きがよくわかると思います。 環境設定 テストファイル＆ツール＆その他 端末から TDDを自動実行できるように設定して、エディタから Rubyを保存自動実行できるように設定します。 Rubyのインストール Ruby学習用のテストファイル エディタ( sublime text3を推奨 ) Ruby Rubyのインストール https://w