【個人開発】契約中のサブスクリプションを管理できるサービスをリリースしました【Next.js×Neon×Clerk×Netlify】
いいね : 148
タグ : 個人開発, netlify, next.js, サブスクリプション, clerk
個人開発者によるサブスクリプション管理サービスがリリースされました。このサービスは、契約中のサブスクリプション情報を登録・閲覧でき、日本円換算や次回更新日などを一覧で確認可能です。また、更新日の通知メールを受け取れる機能や、解約方法の投稿・紐付け機能も搭載されています。技術スタックはNext.js, Neon, Clerk, Netlifyなどを採用。開発者は設計の重要性と実装前の検討不足による手戻りを学びました。
Cookieだけじゃない！Webの裏側で“あなたの行動”はこう見られている
いいね : 99
Webにおける行動追跡は、CookieだけでなくLocalStorage、ブラウザフィンガープリント、アクセス解析ツールなど多岐にわたる技術によって行われている。これらの技術は、ユーザーが意識してブロックしても防ぎきれない場合がある。技術の仕組みを理解することで、挙動への疑問解消やユーザーに配慮した設計・実装のヒントを得られる。特にフロントエンドやWeb系開発者にとって、これらの知識は重要である。
個人開発でガントチャートライブラリを作ってみた
いいね : 56
タグ : svg, typescript, oss, react, ganttchart
個人開発でReactガントチャートライブラリ「react-gantt-flow」をベータリリース。
主な機能はドラッグ&リサイズ、進捗バー、依存矢印、Todayライン/計画差異表示、Type-safe API。
OSSライブラリに不足していた計画と進捗の乖離表示機能を実現するために開発。技術選定はReact, TypeScript, SVGなど。
SVGを全面的に採用し、高い解像度とパフォーマンスを確保。
独自のブランチ戦略を採用したが、運用コストが高く、今後の改善を検討。
【AI駆動開発】Cursorを使いこなして1ヶ月でプログラミング学習サイトを作ったのでノウハウを伝えたい
いいね : 92
タグ : ai, 個人開発, cursor, next.js, 生成ai
フリーランスのWebエンジニアである筆者が、CursorとClaudeを活用し、1ヶ月でプログラミング学習サイト「Learning Next」を開発した。
記事では、効率的なAI駆動開発の手法として、cursorrulesの設定方法、タスク分解とドキュメント化の重要性、AIが間違えやすいポイントとその対策について解説する。
特に、要件定義と設計を事前に行うことでAIの誤解を減らすことが重要であり、具体的なプロンプトも紹介されている。
Udemyのベストセラー講師である筆者が、実際の講座で使用しているテキストをベースに学習コンテンツを作成し、React Markdownを使用して実装した。
他のAIエージェントでも応用可能な開発ノウハウを紹介する。
活躍したいが会社が嫌だ。そうだQiitaに記事を投稿しよう。
いいね : 52
タグ : python, 初心者, 機械学習, ポエム, 株価
この記事は、会社での仕事にやりがいを感じられなくなった研究職の筆者が、Pythonと株式投資、そしてQiitaでのアウトプットを始めた経緯と学びをまとめたものです。
重要なポイントは以下の通りです。
- 現状への不満: 会社での業務が単調で、スキルアップや自己裁量の余地がないことに不満を感じていた。
- 行動のきっかけ: 保有株の株価下落をきっかけに、生成AI(ChatGPT)を活用してPythonで株価予測を試みた。
- Qiitaでのアウトプット: 株価予測モデルの作成過程や結果をQiitaで公開することで、自己学習とアウトプットのサイクルを確立しようとした。
「Ajax通信できますか？」から考える伝えることの大切さ
いいね : 40
タグ : javascript, ポエム, フリーランス
フリーランスエンジニアが案件探しの際、「Ajax通信できますか？」という質問に苦手意識を持っていたが、実はjQueryを使った非同期通信の経験は豊富だった。しかし、「できない」と答えたことでスキルを十分にアピールできず、案件紹介に影響が出た。
重要なのは、単に「できる・できない」で答えるのではなく、具体的な経験やスキルを伝えること。例えば、jQueryを使わずにfetchやtry-catchで非同期処理ができると説明する。
自身の経験を振り返り、モダンなJavaScriptでの開発を希望していることを明確に伝えることで、ミスマッチを防ぎ、キャリアを良い方向に導ける。
JavaScriptのforEach内でbreakができない理由【備忘録】
いいね : 22
タグ : javascript
JavaScriptのforEachメソッドは、配列の各要素に対して処理を実行するが、breakによるループからの脱出はできない。これはforEachの仕様によるもので、ループ処理の中断を意図する場合は、他の方法（forループ、for...ofループ、everyメソッドなど）を検討する必要がある。forEachはあくまで配列要素の反復処理に特化している。
[25卒] AWS：CLF 新人エンジニアが9日（総学習時間17時間）で合格してみた話
いいね : 16
タグ : aws, 資格, 文系, 新卒エンジニア, 新人プログラマ応援
新人エンジニアyukiがAWS CLF資格を9日間（17時間）で取得した体験談。
重要なポイントは、①明確な目的設定(AWS関連の会話についていく、上位資格への踏み台、市場価値向上) ②教科書でAWSの「理解」を重視し、サービスの違いを言語化 ③問題集(Udemy, Cloud License)で「暗記」を徹底、間違えた箇所は理解できるまで解き直し。
計画は経験者に相談し、教材は緑本と呼ばれる教科書とUdemyの問題集を利用。Cloud Licenseは本試験のシミュレーションに役立つが、必須ではない。
人生の選択肢を広げたデザイン。走馬灯に出るような体験を。
いいね : 16
筆者は、幼少期から物語に触れ、大学でデザインを専攻。予備校の広報でチラシ作成を任された経験から、情報と人との出会いが人生を変えることを実感し、「情報と人との出会い方をデザインすること」を目標とする。UI/UXデザインを通じて、情報を届けやすくし、人々の可能性を広げたいと考えている。そのため、UI/UXデザインにおいては、①事前調査を怠らない、②学習コストをできるだけ下げる、③定量的評価と検証を行うことを重視している。
説明図用の画像生成 各サービス精度比較
いいね : 30
タグ : 画像生成, 生成ai, generativeai, 画像生成ai, 画像生成ツール
教材やパワポで説明図を作成する際、各サービスでの精度を比較検証。napkin.aiはパワポのスマートアートのようなテンプレート的な図しか生成できず、独自の表現には不向き。汎用チャットサービスは、説明図のような図を生成する場合、通常の画像生成では難しく、HTML/SVGでの指示が有効。SVGを使用することで、画像生成が難しい微調整が容易になる。シンプルなプロンプトで生成できるかを検証し、ライブラリ活用の4ステップをSVGで図示するプロンプトを各サービスに入力。
API GatewayとLambdaでリモートMCPサーバーができた！
いいね : 22
タグ : lambda, vscode, apigateway, mcp
API GatewayとLambdaを用いてMCPサーバーを構築した事例紹介です。MCPはステートフルなプロトコルだが、Lambda環境ではステートレスな実装が求められます。公式SDKはWebサーバー機能に依存し、API Gateway + Lambda環境に不向きであるため、新たにAPI Gateway + Lambda対応のMCPサーバー構築ライブラリが作成されました。このライブラリはAmazon Q Developer CLIによって生成されており、詳細はDeepWikiで確認できます。
クラス・インスタンス・メソッドをポケモンで例えてみた【ビルドアップ】
いいね : 12
タグ : java, クラス, インスタンス, メソッド, プログラミング初心者
この記事は、プログラミングのクラス・インスタンス・メソッドの概念を、ポケモンを例えに解説しようとする試みです。3年のブランクがある著者が、自身の知識を思い出すためにQiitaに記事を投稿しました。具体的なコード例(Java)を用いて解説していることが示唆されますが、詳細な内容は省略されています。
和製プログラミング英語の悲劇 - あなたの英語、実は通じてないかも!?
いいね : 17
タグ : java, python, php, javascript, 初心者
プログラミングにおける和製英語は、海外エンジニアとのコミュニケーションを阻害する要因となる。DeepL等の翻訳ツールや生成AIも文脈を無視した不自然な翻訳をする場合があり、注意が必要。例えば、「ノートパソコン」は英語で"laptop"であり、"note"では意味が通じない。国際的に活躍するためには、基礎的な英語知識の習得が不可欠である。
プロダクト開発で「やらないこと」を決める戦略的価値
いいね : 14
プロダクト開発において、機能を安易に増やすのではなく、戦略的に「やらないこと」を決めることが重要です。
- コスト削減と価格競争力強化: 不要な機能を削減し、運用コストを下げることで価格優位性を築きます。
- ターゲット明確化と顧客満足度向上: 「誰のためのプロダクトか」を明確にし、コアユーザーに焦点を当てます。
- 開発リソースの集中: リソースをコア機能に集中させ、ユーザビリティを高めます。
- エンジニアの役割: 技術コストや運用負荷を見積もり、事業戦略に基づいた提案を行うことが求められます。
- 優先順位付けと共通認識: 事業全体で優先順位と「やらないこと」を共有することが競争力に繋がります。
[入門] Pythonで学ぶ、より良いコードを書くための実践的テクニック 第1回 プロフェッショナルな可読性への道 (理解しやすいコード/名前付けの極意/コードの美学)
いいね : 12
タグ : python, プログラミング, リファクタリング, リーダブルコード, 初心者
このシリーズ記事では、Pythonで可読性の高いコードを書くための実践的テクニックを解説します。第1回は基礎編として、以下のポイントを取り上げます。
- 優れたコードは読みやすさが最も重要である。
- 変数や関数には、意図が明確に伝わる適切な名前をつける。
- コードの見た目の美しさも可読性を高める上で重要である。
人生初の技術系カンファに行ってきた【TSKaigi 2025】
いいね : 13
タグ : typescript, ポエム, カンファレンス・勉強会メモ, tskaigi
26卒院生がTSKaigi 2025に初参加した感想。TypeScriptのエコシステムや今後の方向性、OSSの持続可能性、コンポーネント設計における凝集度、TSにおけるSoundnessとUsabilityのトレードオフなど、深い学びを得た。企業ブースではリアルな事例を聞き、懇親会では学生エンジニアや著名な開発者と交流し刺激を受けた。今後はOSSへの貢献を目指す。
【AI agent活用】作業中のSNS断ちを強制する！！ポモドーロタイマー付きChrome拡張機能を作ってみた
いいね : 11
タグ : javascript, chrome-extension, ポモドーロ, codex, aiエージェント
作業中のSNS利用による集中力低下を防ぐChrome拡張機能の開発を紹介。ポモドーロテクニックとサイトブロック機能を組み合わせ、集中を強制的にサポートする。開発ではAI agent(Codex)を活用し、効率的な開発を実現。記事では、Chrome拡張機能の作り方とAI agentの活用方法を解説する。拡張機能は現在リリース申請中であり、ローカルでの使用方法が記載されている。
DQNでトレードの売買判断を行うAIの試作 〜性能測定編〜
いいね : 8
タグ : python, 強化学習, ai, 株価, dqn
DQN（強化学習）を用いた日経平均トレードAIの性能測定実験について解説。過去データを用いたバックテストでAIの売買判断を評価し、その結果を検証。ただし、これはあくまでシミュレーションであり、将来の利益を保証するものではない点を強調。投資判断は自己責任で行う必要があり、記事の内容は投資勧誘ではないと注意喚起している。
Amazon Q Developerでデータセンター運用ゲームを10分で作ってみた
いいね : 11
タグ : aws, amazonqdeveloper
Amazon Q Developerが2025年4月から日本語に対応し、AWSのキャンペーン「Amazon Q CLI でゲームを作ろう」が開催された。Amazon Q Developerは、自然言語で指示することでコード生成やファイル作成を支援する開発者向けのAIアシスタントツールである。記事では、Amazon Q Developerを使ってデータセンター運用ゲームを短時間で作成する試みが紹介されている。
[入門] Pythonで学ぶ、より良いコードを書くための実践的テクニック 第2回 制御フローと式の最適化 (簡潔なコメント/制御フローの改善/式の分割/変数の効果的な使用)
いいね : 7
タグ : python, プログラミング, リファクタリング, リーダブルコード, 初心者
この記事では、Pythonでより良いコードを書くための実践的テクニックとして、制御フローと式の最適化について解説します。重要なポイントは、(1) コメントは正確かつ簡潔に記述し、冗長な記述を避けること、(2) 条件式の順序やネストを改善し、制御フローを読みやすくすること、(3) 巨大な式は説明変数や要約変数を用いて分割すること、(4) 変数の削除やスコープの縮小により、コードの可読性を高めることです。これらのテクニックは、コードの保守性と効率を向上させる上で重要です。
[入門] Pythonで学ぶ、より良いコードを書くための実践的テクニック 第3回 コードの再構成とテスト設計 (問題の分離/一度に1つのこと/短いコード/テストの可読性と容易性)
いいね : 7
タグ : python, プログラミング, リファクタリング, リーダブルコード, 初心者
記事では、保守性の高いコードを書くための実践的テクニックとして、コードの再構成とテスト設計について解説しています。重要なポイントは以下の通りです。
- 問題の分離: プロジェクト固有のロジックと汎用的な機能を分離し、再利用性と可読性を高める。
- 一度に1つのこと: 関数やメソッドは一つのタスクに集中させ、責務を明確にする。
- 短いコード: 不要な機能を削除し、コードを簡潔に保つ。
- テストの可読性: テストコードは読みやすく、意図が明確になるように記述する。
- テスト容易性: 依存性の注入などを活用し、テストしやすいコードを設計する。
AWS公式の脅威カタログが公開
いいね : 13
AWS CIRTが「AWS脅威カタログ」を公開。これは、実際の顧客インシデント対応で得られた脅威アクターの攻撃手法をまとめたものです。MITRE ATT&CKをベースに、AWS固有の情報を追加・拡張した内容となっています。実際に観測された攻撃手法のみを対象とし、AWSの責任範囲ではなく、顧客側の設定不備による脅威に焦点を当てています。セキュリティ対策に役立つ情報源として期待されます。
チャットでサービス連携！MCP実践編
いいね : 11
タグ : vscode, mcp, githubcopilot, 生成ai, mcpサーバー
本記事は、チャットでサービス連携を実現するMCP（Message Communication Protocol）の実践編です。GitHub、AWS、Backlog、Figmaなどのサービスを連携させる方法を紹介し、外部連携に加えて、自分でMCPサーバーを作成して利用する方法も解説します。VSCodeでMCPを有効化し、settings.jsonを編集してMCPサーバーを設定する手順が示されています。動作環境としてVisual Studio Code、GitHub Copilot、Docker（任意）を使用します。
OSS版 DeepResearchを使って、ドメイン検索エージェントを作る
いいね : 11
タグ : ドメイン, agent, langgraph, deepresearch
Google GeminiのLangGraphサンプルを元に、ドメイン調査に特化したAIエージェントを作成した話。Webサービス作成時のドメイン取得作業（検索、WHOIS調査、SSL証明書確認など）を自動化することを目的とする。ベースは汎用的な調査エージェントで、ReactフロントエンドとLangGraphバックエンドを使用。オリジナルのレポジトリ構造が綺麗で改造しやすかったとのこと。
【bash】ディスク容量をチェックして閾値を超えたらアラートメールを送信
いいね : 8
タグ : bash, linux, サーバー管理, 自動化, crontab
このスクリプトは、ディスク容量を定期的にチェックし、設定された閾値（70%, 80%, 90%）を超えた場合にアラートメールを送信します。サーバー管理者がディスクフルの予兆を早期に検知し、障害を回避することを目的としています。特定のディレクトリ（/, /boot, /opt/except/dir）はチェック対象から除外されます。ログローテーション機能も備えており、アラート発生時には詳細なディスク使用状況がメールで通知されます。
Ktorで型安全なRoutingを提供する
いいね : 4
KtorでExposedを使ったプロジェクトに型安全なRoutingを適用する例を紹介。
ドキュメントに沿って実装し、型安全でないRoutingを、型安全なRoutingに修正する。
具体的な修正前後のコード例として、Routing.ktの修正前コードが提示されている。
詳細な全体像はGitHubリポジトリのブランチで確認できる。
AI時代の“入力ストレス”をCotEditorで解消する：GhostText-Any活用ガイド
いいね : 5
タグ : macosx, macos, coteditor, 生成ai, ghosttext
CotEditorとGhostText-Anyを連携させることで、ブラウザ上のテキスト入力を効率化できる。ブラウザでの文章作成が一般的になった現代において、この連携は特に有効。CotEditorの高度な編集機能（補完、スニペットなど）をブラウザの入力フィールドで利用可能にし、入力ストレスを軽減する。特に、ChatGPTなどのAIツールや各種メッセージングアプリとの併用で効果を発揮する。
【WPF】アプリケーションのメインプロセスが終了しないケースを深堀する記事
いいね : 5
WPFアプリケーションでメインプロセスが終了しない（ゾンビプロセス化する）問題について解説。原因として、ファイルの読み書き処理などでDisposeやUsingディレクティブを使用せず、リソースが適切に解放されないことが挙げられる。この場合、Application.ShutDown()などの終了方法も効果がない。記事では、ゾンビプロセスが発生するケースを実証し、具体的な回避策としてリソースの確実な解放を推奨している。
わずか50行！シンプルなModel Context Protocolを実装してAIの対話精度を上げる
いいね : 6
タグ : ai, mcp, chatbot, llm, modelcontextprotocol
この記事では、AIチャットボットの対話精度向上のための「Model Context Protocol (MCP)」を紹介しています。MCPはAIモデルに渡す情報を管理する設計思想で、応答の一貫性と精度を高めます。記事では、システムプロンプトと対話履歴を管理するシンプルなコンテキスト管理クラスを、わずか50行のPythonコードで実装する方法を解説しています。実装にはcollections.dequeを使用し、対話履歴を自動的に管理します。MCPを用いることで、AIアプリケーションの対話品質向上が期待できます。
ABEMA開発から学んだ「これからのエンジニア」に必要な5つの力
いいね : 5
タグ : エンジニアのキャリア, 働き方, ソフトスキル, 組織開発
Abema開発から、これからのエンジニアに必要な5つの力が示唆されています。重要なのは、市場状況に応じたスピード戦略(未成熟市場では最速、成熟市場では最高品質)を理解し、MVPを最速で提供する能力、品質要求に応える技術力、「完璧よりも進捗」を重視する文化への適応です。AI時代において、これらのスキルを持つエンジニアが生き残るためのヒントとなります。
2025-06-17 5:09:06 PM 時点の情報です。