【CSR】なぜCSRだとAPIキーがバレちゃうの？どうしたらいいの？ - Qiita
はじめに 先日、CSR、SSR、SSGについて学習していました。 その中で、CSRだとAPIキーやトークンがブラウザ上で確認できるということを知りました。 私が作ったReactのプロダクトはAPIを使用しているけど、大丈夫？ .envファイルに定義したけど、それは意味ないの？など様々な疑問が発生しました。 CSRの場合、なぜ確認できてしまうのか、どのように対策したらいいのか自分なりに学んだことをまとめてみました。 CSR、SSR、SSGとは？ 今回、レンダリングについて3種類学びました。私なりに以下で理解しました。 ※詳しい解説はこちらがおすすめです。 CSR：クライエントサイドレンダリング ブラウザ側でHTML、DOMを作る Reactのみで記載した場合はほとんどCSR tsxやjsxファイルからjsを作り、そのjsが実行されることにより、ブラウザでHTMLを作ってくれる SSR：サーバ
[速習] 米国で騒がれている「AI週4日勤務」、日本人は既に実現していた件 - Qiita
「皆さんは週に何日働いていると思いますか？」 最近また話題になっている「AI週4日勤務」12。 この記事を見た瞬間、1年前の記憶が鮮明に蘇りました。シリコンバレーの友人とZoomで話していた時のことです。彼は興奮気味にこう切り出しました。 「ついに我が社もAIを活用して週4日勤務を実現できるかもしれない！これは革命だよ！」 私は静かにVisual Studio Codeを開き、日米の祝日数を比較して見せました。米国の連邦祝日は11日、日本の国民の祝日は16日。 彼の顔から血の気が引きました。 さらに私は年間勤務日数の計算結果を見せました3。すると、彼は完全に言葉を失いました。 そして私は最後のカードを切りました。「ちなみに、これでも日本はGDP世界第4位を維持してるんだ」4 彼の顔から笑顔が消えていました。真顔です。 その沈黙の中で、私は「真の働き方改革とは何か」という根源的な問いについて
![[速習] 米国で騒がれている「AI週4日勤務」、日本人は既に実現していた件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/116b50084bae869d264c598536fc110ee3e8358b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYzNTIxNTczJTJGMTBlNGNjNDJmODQ4OWVlZDQxMDJlOGFmNDM3N2I4MzBjMzk2MzA2NCUyRnhfbGFyZ2UucG5nJTNGMTc1MTc2NDEyMT9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9ZGYzOGE5Mzk4NGNlMjVhOGI3OWU1NjkwMGFmZGI2Njk%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D68f3321313695f0bc1aa0fb07d5e24d1%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTIwJTVCJUU5JTgwJTlGJUU3JUJGJTkyJTVEJTIwJUU3JUIxJUIzJUU1JTlCJUJEJUUzJTgxJUE3JUU5JUE4JTkyJUUzJTgxJThDJUUzJTgyJThDJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgyJThCJUUzJTgwJThDQUklRTklODAlQjE0JUU2JTk3JUE1JUU1JThCJUE0JUU1JThCJTk5JUUzJTgwJThEJUUzJTgwJTgxJUU2JTk3JUE1JUU2JTlDJUFDJUU0JUJBJUJBJUUzJTgxJUFGJUU2JTk3JUEyJUUzJTgxJUFCJUU1JUFFJTlGJUU3JThGJUJFJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJTlGJUU0JUJCJUI2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NWJlNDIwODljZWRkNWVjZDk4NzYwMGE0NTA5ZDgyZmU%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBTaGlnZW1vcmlNYXNhdG8mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01NWYyMTRhNGU0YmFjYTk5NGNmOWVkZTUyYzI2YzM5Zg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4f9b9c0c7351f54496aca5467ef8c3de)
面白いほど貯まる、信頼貯金の貯め方7選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 事業部MVPを取った優秀な後輩が油断している間に記事を書いたのですが、 一人の時間を大切にした記事を書いていたので、真似して一人の時間を大切にしながら記事を書こうと思います。 面白いほど貯まる、信頼貯金の貯め方7選 信頼される人って、結局なにが違うんでしょう？ 正直、同じスキル・同じ立場・同じ社歴でも、「この人にはお願いしたい」「この人にだけは相談したい」って人がいますよね。 「不公平だ！」って思うかもしれませんが、現実問題としてありますよね。 その差って、技術力でも肩書きでもなく日々の小さなふるまいの“累積ポイント”かもしれ
MermaidでAWS構成図を作成するテクニック - Qiita
はじめに テキストからダイアグラムを生成できるMermaidを使ってAWS構成図を作成する際のテクニックを、いくつかピックアップしてご紹介します。 Mermaidを使えば、構成図内のテキスト検索はもちろん、アイコンを使って見やすく表現したり、アイコンをクリックしてマネジメントコンソールなどに遷移させたりすることもできるため、実用性の高い構成図が作成できます。 本記事が、Mermaidを活用したAWS構成図の作成に少しでもお役に立てば幸いです。 AWS構成図の使用例 Mermaidで作成したAWS構成図の使用例を紹介します。 例えばQiitaでも以下のように表示できます。(リンクはサンプルです) mermaid記法 --- title: 000000000000-xxxxxxxx環境 config: theme: neutral flowchart: nodeSpacing: 10 rank
DevinのKnowledgeで共通ルールを整備する
前書き noteの記事投稿以降、Devinを利用した開発を続けています。 Devinと働く中で、いくつか気になる点が出てきました。 日本語での応答に固定するのが手間 GitHub上にDevinの作業ブランチが多数作成されてしまう 指示した箇所以外のプロジェクト全体を確認してからタスクに取り組んでほしい 等 これらの課題を解決し、出力をより安定させるために、DevinのKnowledgeを整備しました。 DevinのKnowledgeとは DevinのKnowledgeとは、Devinがあらゆるセッションで参照できる指示やアドバイスの集まりであり、組織・プロジェクトのコンテキストをDevinに教えるためのものです。 Knowledgeは、コードベースレベル（タスクレベルではない）のコンテキストを共有するのに最適な方法であり、例えば、コードの規約、デプロイのワークフロー、PRの命名規則、テスト
DevinのPlaybookとKnowledge、どう使い分ける？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Devinの能力を最大限に引き出すためには、PlaybookとKnowledgeという2つの重要な機能を理解し、使い分けることが不可欠です。 「毎回同じような指示を出すのが面倒...」 「プロジェクト固有のルールをDevinに覚えてほしい...」 こんな風に感じたことはありませんか？ 本記事では、Devinをまるで優秀な新メンバーのように育てるための「Playbook」と「Knowledge」の機能について解説し、その効果的な使い分けを具体的な利用シーンと共にまとめます。 Playbookとは？ - タスク自動化のための「レシ
エンジニアがやりがちなUIデザインの失敗15選とその回避法 - Qiita
はじめに 「動けばいい」で済ませがちなUI。でもそれ、ユーザーには伝わってないかもしれません。 エンジニアの皆さん、機能開発に集中するあまり、UIが後回しになっていませんか？ コードとして正しく動いていても、ユーザーが使いにくいと感じたら、それは失敗です。どれだけロジックがスマートでも、UIが原因で「なんか使いづらい」と思われてしまうと、全体の評価も下がってしまいます。 この記事では、エンジニアがついやりがちなUIデザインのミスとその回避法を紹介します。共感あり、学びありで、読後すぐに「ちょっとUI直してみようかな」と思える構成を目指しました！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 UIデザインにおける「やりが
チーム内リーダーのすすめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに この記事では、私が直近1～2年間で複数のプロジェクトリーダーや職能別リーダーを務めた経験をもとに、リーダーとして「やるべきこと」や「意識すべきこと」を言語化しました。 初めてリーダーを務める際、「こんなふうに体系的に整理された記事があればよかったのに」と思ったことから、本記事を執筆しています。 すべてのチームやプロジェクトに当てはまるわけではないかもしれませんが、特に新米リーダーの方にとって、何かしらのヒントになれば幸いです。 やるべきこと 進捗は極力可視化 進捗状況や現在のステータスを、誰でも把握できるようにしました。 「誰
壊滅的な自分のUIデザインをAIにいい感じにしてもらう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分は正直デザインが苦手です...。 なので個人開発で画面のイメージを作ってみたものの、パワーポイントでただ図形をはっつけたような悩ましいもので「なんとかならないものか」と頭を抱えていました。 そんな時に色々調べてく中で出会ったのが、VercelのAIツール「v0」。 なんとなく試してみたら、いい感じになったのでデザイン苦手な人でも大丈夫ですよってことで記事にしようと思いました！ v0とは Next.jsを開発しているVercel社で開発されたAIツールです。 自然言語でUIないしはコードを生成してくれます。 いい感じにしても
初めて MCP を使うなら Docker MCP Toolkit がおすすめ - Qiita
Docker Desktop の新機能である Docker MCP Toolkit があれば、非常に簡単な手順で MCP ツールを利用できます。 今回は MCP クライアントに Cline を用いて Docker MCP Toolkit を利用する方法を解説していきたいと思います。 Docker MCP Toolkit で利用できる MCP サーバ一覧 2025/5/10 時点で 109 の MCP サーバが利用可能となっています。 以下、利用可能な MCP サーバの抜粋です。 Filesystem MCP Server（ローカルファイル操作） Fetch MCP Server（Webコンテンツ取得） Playwright MCP Server（ブラウザ操作） LINE MCP Server（メッセージ送信） PostgreSQL readonly MCP Server（データベース取得）
【Postfix/Dovecot】メールサーバ構築（EC2利用） - Qiita
目標 AWS EC2上にPostfixとDovecotをインストールし、メールサーバ（SMTPサーバ・POP/IMAPサーバ）を構築する。 前提 ・メールサーバとして利用するEC2が構築済みであること。 ・ドメインを取得し、DNSに登録されていること（※１）。 ・注意点として、AWSEC2はデフォルトだと、EC2⇒インターネットの25番ポート宛て通信が制限されており不可となっております、つまりEC2からの外部宛てメール送信は不可ということです（スパムメールの踏み台に利用されることを回避するためで、許可するには別途AWSへ申請を行う必要があるよう）（※２）。 ※１ 以下記事で、ドメイン取得、及びDNS登録（AWS Route53利用）を実施致しました。 AWS Route53を利用してEC2へ独自ドメインアクセス ※２ 参考AWSドキュメント EC2 インスタンスからポート 25 の制限を削
MCPを超理解する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 正しく理解するためには はい。これ以降の記事は86％（当社計算）が概念で構成された読み物（ポエム）です。 ちゃんと理解したい人は上の情報を読んでね。〜終〜 生成AI界隈が早すぎてついていけない はい。私もついていけません。 が、この業界、この職種で飯を食うつもりな限りわからんから知らんとは言えないので、超理解していきましょう。 その前にAIエージェントを超理解する はい。生成AIの少し前？の流行技術です。 そもそも生成AI（以下では狭義に文章生成AIを指すこととする）はある命令（プロンプトと言いますね）に対してその特徴量を持った、命令（
MCPサーバーで開発効率が3倍に！2025年必須の10大ツール - Qiita
はじめに 最近、あるプロジェクトでGitHubリポジトリの内容をAIに分析させたくて、「どうやってClaudeとGitHubを連携させればいいんだろう...」と頭を抱えていたんです。何時間もネットで調べた末に出会ったのがMCPサーバーでした。これが本当に目から鱗だったんですよ！😲 「石の上にも三年」というように、私は根気強く数週間かけて様々なMCPサーバーを試してきました。そして今日は、私の開発ワークフローを劇的に変えた10個の素晴らしいMCPサーバーを、4つの主要カテゴリーに分けて紹介したいと思います！ そもそもMCPサーバーって何？🤔 リストに入る前に、MCPサーバーについて簡単に説明しますね。MCPは「Model Context Protocol」の略で、AIモデルが外部ツールやデータソースと安全かつシームレスに連携するためのオープンスタンダードなんです。 簡単に言えば、お気に入
技術ヒートマップを作ろう🐱🐉🔥 - Qiita
はじめに 年度末の振り返りとしてstreamlitを使った技術ヒートマップを作ってみました。 社内勉強会のテーマとして用意したものですが、せっかくなのでQiitaにも投稿します！ 技術のヒートマップを作ろう🐱🐉🔥 今年度、あなたはどんな技術に触れ、どんな業務をしましたか？ どこが濃い？どこが薄い？可視化されたマップをもとに振り返りましょう。 あなたの強みを再確認するだけでなく、来年の目標設定にも活かしてください！ 今日はStreamlitを使ってヒートマップを作ります⭐ 🧣 アジェンダ Streamlit体験 ヒートマップ作成 🛸 手順 まずはStreamlitが実行できる環境を用意します。 1.Pythonの準備 公式サイトから最新版をインストール コマンドプロンプトからPytonのバージョンを確認する
PHPUnitのコードカバレッジが遅いからってあきらめずに、並列実行ためしてみる - Qiita
はじめに PHPUnitにはコードカバレッジ解析の機能があります。 このカバレッジの出力には、かなり時間がかかります。 チームメンバーからCIのテストが遅いので何とかしてほしいと、issuesがあがってきたので、スピード改善できないか検討し、最終的には並列実行することで、大幅に改善することができましたので、紹介します。 コードカバレッジの出力 カバレッジを出力するには、phpunitコマンド実行時のオプションに--coverage-*を指定します。 phpunitのヘルプに詳しい説明があります。 $ bin/phpunit --help PHPUnit 4.8.6 by Sebastian Bergmann and contributors. Usage: phpunit [options] UnitTest [UnitTest.php] phpunit [options] <direct
10分で分かるAIエージェントの設計パターン - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは！KIYO Learningでスタディングの開発をしている @Kumacchiino です！ 今回は、AIエージェントについての記事を書いてみようと思います。 近年、AIエージェントが注目を集めていますが、その実態や実装手法、導入時の注意点については、まだ不明瞭な部分が多いのが現状です。 そこで、本記事では各手法の概要やユースケースを整理し、実際の導入や活用に役立つ情報をまとめてみようと思います。 この記事は、Anthropicの「Building effective agents」をベースにしており、エージェントと
新しい curl コマンドの使い方 完全ガイド（2025年版） - Qiita
はじめに curl とは対話シェルやシェルスクリプトから HTTP 通信を行うのによく使われるコマンドです。あらゆる環境（100 種類の OS）で動作し、macOS や Windows には標準でインストールされています。商用サポートもあり、互換性は非常に重視され、何年経っても同じ書き方で動きます。非常に長く使われており（1998 年生まれの 27 歳1）、そして古い情報もたくさんあります。この記事ではそういった古い情報を、より簡単で新しい curl コマンドの使い方にアップデートします。最初に結論を書いておくと、 もう -X POST -H "Content-Type: applicatoin/json" なんて書かなくていいですよ。 （記事を読まない人のためのリンク） この記事を書くにあたって以下の記事を参考にしています。この記事が書かれたのは 2015 年、現在はそれから 10 年後
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Clineとスクラム開発をやってみたら開発速度が2倍になった - Qiita
fnm (Fast Node Manager) のインストール方法と使い方 - Qiita
ギャルとのペアプロが想像以上に楽しかった（VSCodeのカスタム指示） - Qiita
