はてなブックマーク

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 chat はGithub Copilot で課金していれば、無料で利用できます。 GitHub Copilot chatのヘルプ チャット欄から /help と入力するとヘルプが表示されます。 GitHub Copilot chatは毎日にように更新されています。 GitHub Copilot chatの言語 日本語が設定してあれば、GitHub Copilot chatの言語も日本語になります。 デフォルトでは、Copilot Chat は最初、VS Code で設定された表示言語を使用して応答するように

無料で始めるAmazon CodeWhisperer on VSCode（Github Copilotと同等の性能？）AmazoncopilotCodeWhisperer 現在の AIを一言で説明すると・・・ フミコ・フミオさんはTwitterを使っています: 「ほぼ全員がご高齢者の会社上層部からの「対話型AI とは何かその功罪について簡潔に分かりやすく出来たら一言で説明しろ」という難題にヤケクソで「ドラえもんです」と答えたら「便利だけど取扱注意ということだな」とほぼ正解な認識をしてくれたので藤子・F・不二雄先生は偉大すぎる。」 / Twitter Github Copilot と Amazon CodeWhisperer の比較 現時点では Github Copilot の方が使いやすい。 単純な機能だと同じくらいだが、 Github Copilot は、コマンドパレットがあるので、その

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

VSCode 拡張機能 ChatGPT - Genie AI を使用するための下準備。モデル選択や日本語化等（Windows版 gpt-4対応)拡張機能VSCodeChatGPTsetting.json 現在の AIを一言で説明すると・・・ フミコ・フミオさんはTwitterを使っています: 「ほぼ全員がご高齢者の会社上層部からの「対話型AI とは何かその功罪について簡潔に分かりやすく出来たら一言で説明しろ」という難題にヤケクソで「ドラえもんです」と答えたら「便利だけど取扱注意ということだな」とほぼ正解な認識をしてくれたので藤子・F・不二雄先生は偉大すぎる。」 / Twitter 下準備 VSCode 上で ChatGPT を便利に使うためのツールの下準備をします。 これは過去に削除された拡張機能の代替ツールであり、その削除された拡張機能の機能をほぼ全部受け継いでいます。 主な機能 コード

追記 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

更新履歴 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の公式サンプルは前回（2021年7月版）から49本増えて合計317本あります。新たに追加されたサンプルには(new)がついています。（2022/07/06) しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。 基礎、中級、上級と付

出来ること 大型リポジトリの中の一部のコード、サンプルをダウンロードしたい。 使用ツール tiged degitの後継ツールです。 degit 2021年から開発が止まっています。 インストール方法 npm install -g tiged もしくは、npx を付けて実行します。(この方法は実行時に少々時間がかかります) 使用方法 Next.jsのリポジトリの中にあるサンプル hello-world （約2KB） https://github.com/vercel/next.js/tree/canary/examples/hello-world 適当な空フォルダの場所に行き、terminalを開きます。 tiged ＋ ユーザーアカウント名 ＋ パス tiged vercel/next.js/examples/hello-world npx tiged vercel/next.js/exa

更新履歴 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

GitHubのブランチ名とそのローカルのブランチ名を変更する。2023年12月版 (ブランチ名 masterからmainに変更する場合等)GitGitHubbranchMastermain 2023年12月25日 追記 ブランチ名の変更方法が変わりました。 リポジトリのトップ画面で 左上のタブバー(Code Issues Pull requests Actions Projects Wiki Security Insights Settings)の下にある リポジトリ名の更に下にある masterを押します。 そうするとその下にプルダウンメニューが開きます。 その中にあるView all branchesを押します。 ブランチの一覧が表示されます。 その中にある三点リーダー(...)を押します。ゴミ箱アイコンの横です。 そうすると「Rename 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

更新履歴 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の公式サンプルは現在236本あります。（2020/07/22） しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。 （基礎）Next.jsで基礎的な内容を扱っているサンプル。 （公式）公式ドキュメント で説明するのに使われているサンプル等。 degitを使ってソースのみを取得したい（npx create-next-appをつかってインストールまではしなくていい場合） Next.js公式examples集 Next.

目的 タイトル通り ＆ 備忘録的なもの。 対象 Chrome、AutoHotKeyを使っている人。 使い方 拡張子.ahkファイルの最下部にでも貼り付ける。 引用 How can I get google chrome to switch tabs using the mouse wheel? - Super User https://superuser.com/questions/504687/how-can-i-get-google-chrome-to-switch-tabs-using-the-mouse-wheel puts 'code with syntax' ;; Wheel Scroll Tabs for Google Chrome #IfWinActive ahk_class Chrome_WidgetWin_1 ~$WheelDown:: ~$WheelUp:: Mous

競技プログラミング 競技プログラミングは 言語の入門書を読み終わったあとに挑戦すべきものの一つ。 技術者としてトップレベルまで近づきたいと目標を持っている人等はオススメです。 現在の競技プログラミングは数学的知識がかなり必要になっています、中学、高校の数学が怪しい人はそちらの知識を固めておく必要があります。 競技プログラミングとは、数学オリンピック等の「競技数学」をプログラムで書ける問題を解くという意味のほうが近いです。 数学の問題を解くのが第一で、プログラムを書く能力はその次です。プログラムはソースコードを書く能力以外に、設計やセキュリティ、テスト等の力が必要ですが、競技プログラミングではその能力はほぼ問われません。 （※競技プログラミングは、最初プログラムを書く能力が最重要であり、数学の能力はオプションとして必要になるぐらいかな？と勘違いしていました。実態はその真逆で、主に数学の問題を

使い方 各タイトルのリンクは引用元の日本語の文章へ飛びます。 英文のリンクは原文へ飛びます。 原文はこちらで公開されています。 97-things/97-things-every-programmer-should-know: Pearls of wisdom for programmers collected from leading practitioners. 概要 [プログラマが知るべき97のこと＋１０by Kevlin Henney 和田卓人、夏目大] (https://プログラマが知るべき97のこと.com) この本はエッセイとして書かれており、その中で重要と思われる部分を抜き出してみました。 日本語文と英語文それぞれ比較して英語学習としても使えます。 （※公開方式がGithubへ移行したことにより、日本語版と英語版でタイトルの番号と著者がずれている可能性があります。） 引用元

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 リポジトリに

注目はPower Assert Power Assertはテスト途中の値を視覚的に表示してくれる。 library test/unit http://docs.ruby-lang.org/ja/2.1.0/library/test=2funit.html （このページのテストでtest-unit3の動作を見てみる。） test-unit3を動かす。 動作確認環境 ubuntu14 ruby 2.1.2 gem 2.3.0 test-unitのインストール gem install test-unit 使い方: require "test-unit" ファイル foo.rb test_foo.rb （今回は特にtestディレクトリを作らず、同じ階層に置いた。）

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