フリーランスWebライター兼Web製作者。Webライターとしてガジェットメディアやプログラミングに関する記事を執筆する傍ら、LP制作とWordPressの改修案件もこなしつつ、活動しています。 profile ClineはVisual Studio Code（VSCode）やCursorで利用できるAIアシスタント型の拡張機能。コードの作成や修正、プロジェクト構成の支援、ターミナルコマンドの実行など開発者の幅広い要望に応えるよう設計されているのが特徴です。 ClaudeやGeminiなどのAPIキーを指定し、プロンプトを通してファイル作成からコード生成、ターミナルでの実行までの一連作業を実行できるのが魅力です。 特にAnthropic社のClaude 3.5 Sonnetモデルを活用することで、複雑なソフトウェア開発プロセスを効率的に進めることが可能。プログラマーの生産性向上をサポートしま

In this article, I show you how to use VS Code's "Run and Debug" panel to connect directly to a debugger instance, using the VSCode rdbg Ruby Debugger extension. We're lucky in the Ruby on Rails world to have the powerful debug gem available, and it becomes even more handy when it's integrated directly into VS Code, where you can take advantage of breakpoints, automatically debugging Exceptions an

この記事はとあるサークルのOB/OGが行っているN代アドベントカレンダー2024の24日目です。 はじめに インターネットで拾った野良コードをよく考えずに実行してはいけないという話は皆さん耳タコだと思います。今日びそんな野蛮なことをする人はいないでしょうが、世の中には実行しなくてもエディタに貼り付けただけで悪さをしだすコードもあります。 本題 以下のコードをVSCodeなりRustRoverなり、お好きなエディタに貼り付けてみてください。 ......いや、やっぱり貼り付けないでください。 #![allow(dead_code)] fn main() { println!("Hello, world!"); } type T1<T> = (T, T, T, T); type T2<T> = T1<T1<T1<T1<T>>>>; type T3<T> = T2<T2<T2<T2<T>>>>;

はじめに データベース設計のER図について、VSCodeなどで作成する以下３つの方法を比較した記事です。 Draw.io PlantUML Mermaid 以前、Webアプリケーションを作成した際には、 Draw.io を使用して、作図しました。 （そのアプリのER図を今回サンプル図としています） 最近、 PlantUML を利用するようになり、ER図や、シーケンス図、クラス図の作図に利用しているのですが、とても編集しやすいと感じています。 ただ、どのツールにも、一長一短あるかと思いますので、それぞれ以下目次の内容を書いて、ご紹介したいと思います。 目次 1. Draw.io 1-1. VSCodeでの使い方 1-2. ER図 1-3. 感想 2. PlantUML 2-1. VSCodeでの使い方 2-2. ER図 2-3. 感想 3. Mermaid 3-1. VSCodeでの使い方

はじめに Markdownって便利ですよね？ README.md、PR や Issue の本文やコメント、Qiita や Zenn はもちろん、Google Docs や Trello や Notion や Jupyter Notebook でも使えるみたいです。もっといろいろな文書を Markdown で書ければいいのになあ、あらゆる文書のソースコードを Markdown にできればいいのになあ。 さあ、Markdown の可能性を広げましょう！ 本記事では「スライド」と「(電子)書籍」をMarkdownで書く方法をご紹介したいと思います。もちろん、VSCodeでMarkdownを効率よく便利に書いていくためのチップスもご紹介していきますよ。 ご参考スライド VS Code Conference Japan 2021 で発表した際の以下スライドもご参照ください。 もちろんこのスライドもV

はじめに VSCodeには色々と便利なショートカットがあります。 もっと早く知っておきたかったなぁと思うショートカットをいくつか書いていきたいと思います。 今回の記事の内容をおおまかに分けると、 カーソル移動・範囲選択系 矩形選択 置換 という感じです順に解説します。 カーソル移動・範囲選択系 単語単位でのカーソル移動 option + ← or → 行頭、行末のカーソル移動 command + ← or → 1文字ずつ範囲選択 shift + ← or → 単語単位での範囲選択 option + shift + ← or → 現在のカーソル位置か行頭 or 行末までの範囲選択 command + shift + ← or → 上下の行の入れ替え option + ↑ or ↓ ファイルの先頭と最後の移動 command + ↑ or ↓ 矩形選択, マルチカーソル 次は矩形選択, マルチ

Amazon CodeWhispererでinvalid clientエラーが出て使えなくなった vscodeでCodeWhispererを使おうとAWS Toolkitから以下の画面を開いてvscodeに表示されているコードを入力し、 メールアドレスとパスワードを入力すると認証が完了するはずだけれども以下の画面が出て認証に失敗した。 調査 ブラウザのデベロッパーツールを開いて通信を除いてみるとSSOのあたりで失敗している。 調べてみたら以下のIsusueが見つかった invalid_client error when signing in with AWS Builder ID #3706 解決 windowsの場合は以下のフォルダにあるファイルを削除すると良いらしいので削除したところ無事使えるようになった。

ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について

最近流行りのテキストから画像を生成する機械学習モデルが一般公開されたとのことで、興味本位で触ってみました。ざっと書いちゃったので、後で見直すかも。 目的 GPUアクセラレーションを活かしつつコンテナ内でStable Diffusionのモデルを動かしたい。メインPCなのでLinuxじゃなくWindowsを使いたい。 前提条件 以下のスペックのPCで、本記事の内容を実行しました。 OS: Microsoft Windows 11 Pro CPU: AMD Ryzen7 3700X メモリ: 32GB ストレージ: 1TB GPU: nVidia Geforce RTX 3080(10GB) とりあえず、OSとGPUベンダーだけそろっていれば本記事の内容は実行できると思います。 ちなみに、Windows 10の場合はInsider版を使えばCUDA on WSL2が可能です。(つまり、本記事の

はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく「最初はチートシートでカンニングしつつ徐々に体で覚えていく」ことを意識して使うことが大切です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者~中級者 作業効率を上げたい人 コードを書くテクニックを知りたい人 VsCodeチートシート はじめに紹介するのはエンジニアなら必ず使うであろうVsCodeのショートカットチートシートです。 VsCodeのショートカットは大幅に作業効率を上げてくれます。そのため早い内からショートカット

```plantuml skinparam sequence { ArrowFontSize 20 } !define AWSPUML https://raw.githubusercontent.com/milo-minderbinder/AWS-PlantUML/release/18-2-22/dist !includeurl AWSPUML/common.puml !includeurl AWSPUML/Compute/AmazonVPC/AmazonVPC.puml !includeurl AWSPUML/Compute/AmazonVPC/Internetgateway/Internetgateway.puml !includeurl AWSPUML/Compute/AmazonVPC/VPCNATgateway/VPCNATgateway.puml !includeurl AWS

@startuml !include <archimate/Archimate> title Archimate Sample - Internet Browser ' Elements Business_Object(businessObject, "A Business Object") Business_Process(someBusinessProcess,"Some Business Process") Business_Service(itSupportService, "IT Support for Business (Application Service)") Application_DataObject(dataObject, "Web Page Data \n 'on the fly'") Application_Function(webpageBehaviour,

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

最新バージョンについては適宜 公式サイト をご確認ください。 AWS アイコン最新バージョン（2022/09/11 時点） 2022/09/11 時点の AWS Icons for PlantUML の最新バージョンは v13.1 です。 このバージョンにすると、アイコンが最近っぽい感じに変わります（語彙力 記事中のバージョンは古くなっているので、適宜以下のように読み替えてください。 インポートするアイコンによってはパス名が変わっていることがあるので、エラーが出たら適宜 アイコン一覧 を見て現在のパス名に修正してください。 （一文字だけ小文字が大文字になっているなど、微妙に変わっている場合があります） 最新バージョンについては適宜 公式サイト をご確認ください。 本記事は株式会社 Works Human Intelligence の アドベントカレンダー の 20 日目の記事となります。

連載「Visual Studio Code TIPS」 一定のフォーマットで、プログラムで使用するデータを列挙しているような場合には、それらをまとめて選択できると都合が良いことがある。Visual Studio Code（以下、VS Code）で、複数行にわたって、特定のカラムから別のカラムまでを矩形状に範囲選択するには以下の操作を行う（本稿ではLinuxについてはUbuntu版で動作を確認している）。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 先日、 Visual Studio Code の Extension に Draw.io Integration という、VSCode で draw.io を使用出来る拡張機能がリリースされ話題になりました。 リリースされるや否や、界隈では盛り上がりを見せまして、Qiita の記事や #InfraStudy でも導入方法や事例が紹介されたりしました。 VSCodeでDraw.ioが使えるようになったらしい！ - Qiita Infrastructure as Codeにおける理想のドキュメント管理を目指して #infrastu

追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。

初めに 今までbinding.pryでデバックしていたのですが、下記の手順を踏むのでデバックに時間がかかる。 処理を止めたい所にbinding.pryを打ち込む 処理を止める。 確認後binding.pryを消す。 次の処理を見たい時はこれを繰り返す。 VScodeでデバックすると 止めたい処理の所にブレイクポイントを貼る（複数貼る事が出来る。） デバックの開始ボタンを押す。 3.処理を止める。 となり、binding.pryを書かない事、複数箇所ブレイクポイントを貼る事が出来るので、効率化を測れる。 インストール 下記を記述してインストール - ruby-debug-ide - debase

ruby/debug と連携してデバッグを行える VSCode extension が出てるので試す。 marketplace.visualstudio.com github.com 前提 $code -v 1.57.0 b4c1bd0a9b03c749ea011b06c6d2676c8091a70c x64 $ruby -v ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [x86_64-darwin19] 準備 debug はプレリリース版をインストールしてねと README にあるので従う。 gem install debug --pre ためしに以下のようなコードを書いてブレークポイントを貼ってみる class A attr_accessor :x end def main a = A.new a.x = 2 puts a.x end