これ読めばOK。私が使ってるものだけの、Claude Code チュートリアル
Claude Codeに関して、どわーーっといろんなノウハウが各所で散見されていて、辞書的な記事があったらいいなと思い、これを書いています。 いざ1から使い始める時に、これさえ読めば、ある程度使いこなせることを目指して、この記事を書きました。 細かい話はいろいろなところで書かれていると思うので、ざっくりと書いていきます。 社内で行ったチュートリアル資料です。 Claude Codeとは？ ターミナル内で動作し、コードベースを理解し、自然言語コマンドを通じてより高速なコーディングを支援するエージェンティックなコーディングツールです。 Cursorとかと違って、ターミナルで動くAIコーディングツールってことです。 そもそもなんでClaude Codeが強いの？ なんだか AIコーディングツールで、同じくSonnet4/Opusとか使うんだったら、CursorやClineでも同じじゃない？ と思
Anthropicが提案するClaude Codeのベストプラクティス
なんとなくClaude Codeを使っていませんか？ 私自身、まさにそうでした。 AIの力は強力なので、それでもある一定のプロダクトや機能は作れていました。 しかし、 修正してほしくないところが修正されてしまう UIが崩れてしまう 思った通りの動作にならない など問題が生じてきていて、そろそろ「なんとなく」コーディングをするのではなく AIコーディングの基礎から学び直したい、と思ったわけです。 そしたら見つけました。 「Anthropic公式が提案するベストプラクティス」 これは…信頼できる！！ Anthropic社が言うには、単なるコード生成ではなくAIと一緒に考え、設計し、改善していく "Agentic Coding" をしましょうとのこと。 この記事では、そのAgentic Codingの基本的なベストプラクティスを、公式記事に基づいて解説していきます。 英語が読める方はぜひ公式記事
Claude Code のすすめ
はじめに 「〇〇する方法」という切り口で Claude Code の一次情報をまとめてみました Claude Code は Terminal 上で動作するエージェント型のコーディングツール インストールはたったのコマンド一行（Node.js 環境が必要） ほぼ毎日アップデートが続いており、機能が増えることはもちろん減ることもあるので注意 公式ドキュメントが開発に間に合っていないので、半信半疑で読むことをお勧めします 今日は何を話さないか Claude の理論的な話（手を動かしていただきたいのですっ飛ばします） Claude Code Action（お話しできるほど使い込んでいません） Codex や Devin などのコーディングエージェントツールとの比較 追い付き追い越されの時代にどれが良いか決めるのは不毛、翌週には変わります 1 / 28 まず何からやればいいの？ 1. Claude
Gemini CLI の簡単チュートリアル
この記事はほぼすべて Gemini CLI に書いてみてもらいました。ただし、ファクトチェック＆手修正済みです。もし間違えていたらこっそり教えてください。さいごにとおまけは人力です。 Gemini CLI チュートリアル tl;dr コマンドラインで対話的に使えるオープンソースのAIエージェント。 npx https://github.com/google-gemini/gemini-cli ですぐに利用開始。 @ でローカルファイルやディレクトリをAIのコンテキストに追加。 ! でシェルコマンドを直接実行、シェルモードへの切り替えも可能。 GEMINI.md ファイルでプロジェクト毎のカスタム指示をAIに記憶させる。 Google検索との連携、安全なサンドボックスでの実行、ツールの自作など高い拡張性。 1. はじめに Gemini CLI へようこそ！ このドキュメントは、Googleが
バイブコーディングチュートリアル：Claude Code でカンバンアプリケーションを作成しよう
バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。 気がつけばコーディングの分野で AI エージェントを活用することが一般的になりつつあります。特に「バイブコーディング（Vibe Coding）」と呼ばれる新しいタイプのコーディングスタイルは一種のバズワードになっています。Vibe とは元々音楽シーンで使われていた言葉で「雰囲気・フィーリング・ノリ」といった意味を持ちます。プログラマーは技術的な詳細にとらわれるのではなく、自らの直感的なアイディアを AI エージェントに自然言語で伝えることで、AI エージェントが主体になってアプリケーションの開発を進めていきます。このスタイルではプログラマーはほとんどコー
p5.jsによるクリエイティブコーディング入門 - ICS MEDIA
ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。
A JavaScript Developer's Guide to Go
A JavaScript Developer's Guide to GoLast updated on 31 May 2025 by Prateek Surana • - min read After spending five years as a JavaScript developer building both frontend and backend systems, I spent the last year transitioning to Go for server-side code. During that time I couldn't help but notice the differences between syntax, fundamentals, practices, and runtime environments between the lan
Cursor入門のツボ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? VScodeは使ってる。コードもAIに書かせてる。Cursorは使ってない。ツボだけ知りたい。 この記事の対象 ・ふだんVScodeを使っている人で、 ・すでにChatGPTやClaudeなどでAIコーディングをしている人で、 ・コードのコピペ作業が大変と感じている人で、 ・しかしながらCursorみたいな新しいツールを覚えるのもイヤだという人 この記事はそういう人（一週間前の自分）向けの記事です。 一連の導入にあたって、つまずきポイントやツボのところにざっと触れていますので、上記のリテラシーのある方ならすんなりとCursorに移行でき
ひとり社長の経理の基本｜Tetsuya Morimoto
2019年12月に自分の会社を設立した。 なんの考えもなく意味なく3月決算にしてしまい、4ヶ月弱で決算を迎え、2ヶ月以内に法人税を納める必要があるので5月に入ってから法人決算を行った。そのときに役立った本の紹介と実際に法人決算をやってみた経験談 (失敗談) を書いておく。 (2024-05-05 追記) 本稿の続編として時間が経ってからわかったことなどをまとめました。 法人設立のきっかけ仕事を辞めようと思ったとき、次にやりたいことはとくになかったし、40歳を超えて年齢的にも雇ってくれる会社をみつけるのは難しいだろうということは容易に予測できた。少し転職活動をしてみたものの、自分自身にやりたいことがないのもあり、あまり手応えを感じなかったので消去法のような流れで起業することにした。 私の場合、会社設立 freee を使って法人設立のための手続きをした。必要な手続きや書類作成など、法人登記まで
ChatGPT Plugins開発
Chat Plugins https://platform.openai.com/docs/plugins/introduction OpenAPI仕様書を公開しておくとGPTがそれを解釈してユーザーの入力からWebリクエストを作って処理してくれるすごいやつ プラグイン開発者は自分の作った各APIのdescriptionをちゃんと書いておけばあとはChatGPT側でよしなにやってくれる LangChainのOpenAPI Agentに仕組みは似ている Retrieval Plugin そのままフォークして使える検索用の知識を与えるプラグイン（APIサーバー）の雛形 こんな感じでAPI作れば動くよというリファレンス実装で、別にPython必須というわけではない 開発者は好きなベクトルDBを選んで自分で構築したインデックスを突っ込んでおけばOK ベクトルDBが必要な理由はテキストを入力してテキ
デザインパターンを TypeScript で
複雑なオブジェクトを段階的に構築できます。 このパターンを使用すると、 同じ構築コードを使用して異なる型と表現のオブジェクトを生成することが可能です。
Dockerfile自信持って書けてますか？おすすめlintツール 「hadolint」について紹介 - Qiita
はじめに Dockerfile、サッと書こうと思ったのに、書き始めたら意外と時間かかったりしますよね。 突き詰めるとすごく奥が深いなと思います。 公式のドキュメントでも、Dockerfileのベスト・プラクティスという形で公開してくれていますが、 これを毎回意識するのは大変です。 また、意識できていたとしても、複数人で管理していると、各個人のスキルレベルによって差が出てしまいます。 そんなときにおすすめのツールを見つけたので紹介します。 hadolintというツールです。 Haskell Dockerfile Linterの略だそうで、Dockerfileの静的解析を行ってくれるlintツールです。 hadolintを使うとこんな利点があります。 build前にシンタックスエラーなどに気付ける (地味にトライアンドエラーしてると時間食うんですよね...) 自然とベストプラクティスに則ったD
OmniAuth の使い方 [Rails] – Site-Builder.wiki
参考： OmniAuth 実装まとめ (Twitter / Facebook / GitHub) – Qiita OmniAuth を使ってみる | Kludge Factory 概要 参考： difference between OAuth2 and OmniAuth – Stack Overflow ストラテジー 参考： List of Strategies · omniauth/omniauth Wiki – GitHub ストラテジーを作る 参考： OmniAuth OAuth2 を使って OAuth2 のストラテジーを作るときに知っていると幸せになれるかもしれないこと – Qiita OAuth2 に対応した API の OmniAuth Strategy を書いてみる – Qiita omniauth-chatwork を作った | くりにっき Strategy Contrib
OmniAuthの公式のwikiを読んでみた。 - Qiita
はじめに OmniAuthの公式のwikiを読んで学習した内容を備忘録としてこちらに投稿します。 OmniAuthって？ Deviseのバージョン1.2から追加された、OAuthに関するモジュールのこと。 このモジュールを利用すれば、twitterやfacebookといったプロバイダーに登録されている情報でユーザー認証を行うことができます。 Before you start config.omniauthは、アプリケーションにomniauth プロバイダーのミドルウェアを追加します。これは、config/initializers/omniauth.rbにconfig.omniauthを記述するべきではないことを意味します。なぜなら、そうしてしまうとお互いのomniauth プロバイダーのミドルウェアが衝突し、認証ができない事態に陥ってしまうからです。 config/initializers
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
OAuth 2.0 全フローの図解と動画 - Qiita
RFC 6749 (The OAuth 2.0 Authorization Framework) で定義されている 4 つの認可フロー、および、リフレッシュトークンを用いてアクセストークンの再発行を受けるフローの図解及び動画です。動画は YouTube へのリンクとなっています。 English version: Diagrams And Movies Of All The OAuth 2.0 Flows 追記 (2019-07-02) 認可決定エンドポイントからクライアントに認可コードやアクセストークンを渡す方法については、別記事『OAuth 2.0 の認可レスポンスとリダイレクトに関する説明』で解説していますので、ご参照ください。 追記（2020-03-20） この記事の内容を含む、筆者本人による『OAuth & OIDC 入門編』解説動画を公開しました！ 1. 認可コードフロー RF
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ruby on Rails の楽しみ方
Javascript to Typescript converter with ChatGPT | Js2TS.com
ReactではじめるChrome拡張開発入門
minutes/1/Railsの勉強法.md at master · Entaku-rb/minutes
