【AI駆動開発】Cursorを使いこなして1ヶ月でプログラミング学習サイトを作ったのでノウハウを伝えたい
いいね : 127
タグ : ai, 個人開発, cursor, next.js, 生成ai
フリーランスのWebエンジニアである筆者が、CursorとClaudeを活用し、1ヶ月でプログラミング学習サイト「Learning Next」を開発した事例を紹介。記事では、AI駆動開発の手法、.cursorrulesの設定、タスク分解とドキュメント化の重要性、AIが間違えやすいポイントとその対策について解説。特に、要件定義と設計を事前に行い、AIの誤解を減らすことが重要。GitHub Copilotなど他のAIエージェントでも応用可能。
Cookieだけじゃない！Webの裏側で“あなたの行動”はこう見られている
いいね : 135
Web上での行動追跡は、CookieだけでなくLocalStorage、ブラウザフィンガープリント、アクセス解析ツールなど多様な技術によって行われている。これらの技術は、ユーザーが意識的にブロックしても防ぐことが難しい場合がある。仕組みを理解することで、ユーザーに配慮した設計や実装のヒントを得られる。特にフロントエンドやWeb系開発者は、これらの技術を整理する価値がある。
【個人開発】契約中のサブスクリプションを管理できるサービスをリリースしました【Next.js×Neon×Clerk×Netlify】
いいね : 175
タグ : 個人開発, netlify, next.js, サブスクリプション, clerk
個人開発者が契約中のサブスクリプションを管理するサービスをリリース。Notionでの管理の課題（為替換算の手間、更新日手動更新、不要な契約更新リスク）を解決。主な機能は、サブスクリプションの登録・閲覧・削除、更新日通知、解約方法の投稿・紐付け。技術スタックはNext.js, Neon, Clerk, Netlify等。設計と実装前の検討の重要性を学んだ。
【C#】同じ機能、違う書き方 - パフォーマンスで選ぶべきコードはどっち？
いいね : 20
タグ : csharp, .net, プログラミング, パフォーマンス最適化, benchmarkdotnet
C#で同じ機能を実現するコードでも、書き方によってパフォーマンスに大きな差が出ることがある。本記事では、日常的な実装を例に、BenchmarkDotNetを用いて速度を可視化し比較検証する。重要なのは、アルゴリズムの大改造だけでなく、日々のコード選択がアプリの体感速度を左右する点。ただし、パフォーマンスだけでなく可読性・保守性とのバランスも考慮する必要がある。
JavaScriptのforEach内でbreakができない理由【備忘録】
いいね : 32
タグ : javascript
JavaScriptのforEachメソッドは、配列の各要素に対して処理を実行する際に利用されます。forEachは、ループ処理の中断に使用されるbreak文に対応していません。これはforEachがループではなく、配列の各要素に対して関数を適用する高階関数であるためです。そのため、forEachの処理を途中で止めたい場合は、他の方法（forループ、for...ofループ、Array.some()、Array.every()など）を検討する必要があります。
和製プログラミング英語の悲劇 - あなたの英語、実は通じてないかも!?
いいね : 23
タグ : java, python, php, javascript, 初心者
プログラミングにおける和製英語は、海外エンジニアとのコミュニケーションにおいて誤解を生む可能性がある。DeepLやChatGPTなどの翻訳ツールも万能ではなく、文脈を無視した不自然な翻訳をすることがある。「バージョンアップ」や「手戻り」のような技術用語は特に注意が必要。国際的に活躍するためには、基礎的な英語知識の習得が不可欠であり、和製英語に頼らないコミュニケーションを心がけるべきである。
事業部年間MVPを来年も獲得するために分析してみた
いいね : 14
この記事は、事業部年間MVPを再び獲得するための分析と戦略をまとめたものです。
重要なポイントは以下の通りです。
- MVP受賞者の評価ポイントとして、リーダーシップと責任感、困難なプロジェクトの遂行、事業への貢献、主体性が挙げられる。
- 高評価に繋がりやすい業務パターンは、技術的困難の克服と事業成果の結びつけ、危機的状況でのリーダーシップ、技術革新とチーム成長の両立である。
- MVPを狙う戦略として、リーダーシップの見せ方を工夫し、定量指標で成果を示し、影響範囲を広げ、社内での認知度を高め、上長からの推薦を得ることが重要である。
API GatewayとLambdaでリモートMCPサーバーができた！
いいね : 26
タグ : lambda, vscode, apigateway, mcp
API GatewayとLambdaでMCPサーバーを構築する試みについて述べられています。MCPのTransports仕様にはstdioとStreamable HTTPがあり、後者を使用。MCPはステートフルなプロトコルだが、Lambda環境ではステートレスな実装が適しているため、セッション管理をしない方法を採用。API Gateway + Lambda環境とMCP公式SDKの相性が悪いため、新たにAPI Gateway + LambdaでMCPサーバーを構築するライブラリを作成し公開したことが述べられています。
Replitで遊んでみた（ポケモンバトル、kintoneER図生成＆JSカスタマイズツール）
いいね : 13
ReplitはWebブラウザ上でプログラム作成・実行・共有ができるクラウドIDE。AIエージェントが自然言語による指示でWebアプリを自動構築できる。非エンジニアでも扱いやすく、環境構築やデプロイの知識がなくてもアプリ開発が可能。実際にReplitを使って、ポケモンバトル、kintone ER図生成ツール、kintone JSカスタマイズツールの３つのアプリが作成された。
「Ajax通信できますか？」から考える伝えることの大切さ
いいね : 41
タグ : javascript, ポエム, フリーランス
フリーランスエンジニアが案件探しの際、「Ajax通信できますか？」という質問に苦手意識を持っていたが、実際にはjQueryの非同期通信の経験があった。この経験から、重要なのは「できる・できない」で答えるのではなく、具体的な経験やスキルを伝えることだと気づいた。モダンな開発環境を希望するなら、jQueryを使わないJavaScriptでの非同期処理経験をアピールすべき。スキルを正しく伝えれば、ミスマッチを防ぎ、キャリアを良い方向に導ける。
[アジャイルサムライ 2章] いいアジャイルチームってどんなチーム？チームメンバーを探すコツは？
いいね : 12
アジャイルチームは役割分担が曖昧で、開発工程が連続し、チーム一丸で成果を出すことを重視します。チームをアジャイルにするには、同じ場所で働き、顧客との積極的な連携が重要です。メンバーは、ビジネスと開発担当者が協働し、自己組織化を促し、意欲的な人材を集め、職能横断型であることが望ましいです。チームメンバーを探すコツは、ゼネラリストで曖昧な状況に強く、我を張らない人材を選ぶことです。
【パフォーマンス改善】画像の最適化 Tips まとめ
いいね : 11
タグ : html, css, フロントエンド, パフォーマンス, 画像最適化
Webサイトの表示速度改善において、画像の最適化は重要。特にCore Web VitalsのLCP（Largest Contentful Paint）は、SEOにも影響しUXを左右するため、最適化が求められる。LCPはページ内で最も大きなコンテンツの表示時間を測る指標で、ユーザー体験に直結する。Qiitaでは画像最適化のTipsを取り入れ、表示速度向上に努めている。
【AtCoder】無事茶色になれたので、入茶までにやったことをまとめてみる！！
いいね : 11
AtCoderで茶色になるまでに行ったことをまとめた記事です。
重要なポイントは以下です。
- 入茶までにやったこと: AtCoder Problems + 公式解説でひたすら精進（問題の95%）。APG4b、DPまとめコンテストなども実施。
- 具体的な精進方法: まずは10分考え、わからなければ解説を見て理解。その後、誰かに説明するつもりで問題を解き、翌日、一週間後など間隔を開けてもう一度解く。
- コンテストの取り組み方: A,B問題を確実に解き、C問題に慣れる。60分で3完を目標にする。D問題は必須ではない。
- できるようになったこと: 計算量の意識、考察力、知識の増加。
- 課題: コーディング速度、C問題の安定性、考察時間、コードのミス。
[入門] Pythonで学ぶ、より良いコードを書くための実践的テクニック 第1回 プロフェッショナルな可読性への道 (理解しやすいコード/名前付けの極意/コードの美学)
いいね : 17
タグ : python, プログラミング, リファクタリング, リーダブルコード, 初心者
本記事は、Pythonでより良いコードを書くための実践的テクニックを紹介するシリーズの第1回です。重要なポイントは以下の通りです。
- コードの可読性が最も重要であり、パフォーマンスや短さよりも優先されるべきです。
- 変数や関数には、意図が明確に伝わる適切な名前を付けることが重要です。
- コードの見た目の美しさも可読性を高める上で重要です。
【コード38行】初心者向き超シンプルなLambdaを用いた生成AIアプリ開発のやり方
いいね : 10
タグ : aws, 初心者, lambda, bedrock
この記事は、AWS Bedrockを用いたシンプルなテキストチャットアプリを、Lambda関数で構築する方法を解説するものです。重要なポイントは以下の通りです。
- Bedrockの
converseを使用し、Lambda関数で生成AIモデル（claude4-sonnet）に質問し、返答を得る。 - 必要なAWSリソースは、Lambda、IAM、Bedrockの3つ。Lambda関数でBedrockにアクセスし、IAMでアクセス権限を管理、Bedrockで使用する生成AIモデルを選択する。
- AWSマネジメントコンソールからLambda関数を作成する手順を、画像付きで解説。
AWS公式の脅威カタログが公開
いいね : 16
AWS CIRTが実際のインシデント対応で蓄積した攻撃手法をまとめた「AWS脅威カタログ」が公開されました。これはMITRE ATT&CKをベースに、AWS固有の情報を追加・拡張したものです。実際に観測された攻撃手法のみを対象とし、責任共有モデルにおける顧客側の設定不備に起因する脅威に焦点を当てています。
彼女に暗号化メッセージで愛を伝えよう
いいね : 9
バレンタインデーも近いということで、今回は彼女に暗号化メッセージで愛を伝える方法を共有します。
暗号化方式の選定
まずは暗号化方式を選定します。 今回は共通鍵暗号方式であるAESを利用します。 AESは共通鍵暗号方式の中でも、比較的安全性が高く、広く利用されている暗号化方式です。 共通鍵暗号方式は、暗号化と復号に同じ鍵を利用するため、鍵の管理が重要になります。 今回は、パスワードから鍵を生成する方式を採用することで、鍵の管理を容易にします。
実装(Python)
今回は実装にPythonを利用します。 Pythonには、暗号化ライブラリであるcryptographyが標準で用意されているため、簡単に暗号化処理を実装することができます。 以下に、暗号化と復号のサンプルコードを示します。
from cryptography.fernet import Fernet
from cryptography.hazmat.primitives import hashes
from cryptography.hazmat.primitives.kdf.pbkdf2 import PBKDF2HMAC
from cryptography.hazmat.backends import default_backend
import base64
# パスワードから鍵を生成
def generate_key(password: str) -> bytes:
password_provided = password.encode() # Convert to type bytes
salt = b'salt_hogehoge' # CHANGE THIS - recommend using a key derivation function
kdf = PBKDF2HMAC(
algorithm=hashes.SHA256(),
length=32,
salt=salt,
iterations=390000,
backend=default_backend()
)
key = base64.urlsafe_b64encode(kdf.derive(password_provided))
return key
# 暗号化
def encrypt_message(message: str, key: bytes) -> bytes:
f = Fernet(key)
encrypted_message = f.encrypt(message.encode())
return encrypted_message
# 復号
def decrypt_message(encrypted_message: bytes, key: bytes) -> str:
f = Fernet(key)
decrypted_message = f.decrypt(encrypted_message).decode()
return decrypted_message
# メッセージとパスワード
message = "I love you!!"
password = "password"
# 暗号化と復号
key = generate_key(password)
encrypted_message = encrypt_message(message, key)
decrypted_message = decrypt_message(encrypted_message, key)
# 結果
print("暗号化されたメッセージ:", encrypted_message)
print("復号されたメッセージ:", decrypted_message)
この記事では、バレンタインデーに向けて、彼女に暗号化メッセージで愛を伝える方法を紹介しています。具体的には、共通鍵暗号方式であるAESを用いてメッセージを暗号化・復号化するPythonコードを提供しています。パスワードから鍵を生成し、
cryptographyライブラリのFernetを用いて暗号化と復号化を行います。ただし、相手がエンジニアでない場合、この方法が有効かどうかは考慮が必要です。
#意識低いAICodingチュートリアル #02 ネット老人会サイトをバージョン管理してもらおう [GitHub Copilot Agent mode 版]
いいね : 8
タグ : git, githubcopilot, aiエージェント
AIコーディング体験シリーズの第二弾として、前回作成した「古の個人サイト」をアップデートしていく過程で、バージョン管理の必要性が生じた。Twitterでのフィードバックから、サイトの言葉選びに「当時感」が足りないという課題が浮上。今後はこの点を改善し、より†古(いにしえ)の個人サイト†を再現していくため、GitHub CopilotのAgent modeを活用してバージョン管理を行うことを検討している。
Amazon Q CLI x Phoenix LiveView × 闘魂：最速でTic Tac Toeを爆誕させた話
いいね : 8
タグ : elixir, ai, 猪木, 闘魂, amazonq
この記事は、Amazon Q CLIとPhoenix LiveViewを使って、ブラウザで動作するTic Tac Toeゲームを迅速に開発したプロセスを解説しています。
要点は以下の通りです。
- Amazon Q CLIにPhoenix LiveViewでのTic Tac Toeゲーム作成を指示し、コードを生成。
- 生成されたコードのエラーを修正するため、Amazon Q CLIと対話的にデバッグ。
- ゲームの遊び方をREADMEに追記し、初期コミットを作成してGitでバージョン管理。
- 開発者は、Amazon Q CLIの提案を信頼(trust)し、迅速な開発を実現。
- データベースを使用せずにLiveViewの状態管理のみで実装。
[速習] システム開発契約の基礎知識 第1回 契約形態の選び方と見積もりの関係
いいね : 7
タグ : 初心者, 見積もり, プロジェクトマネジメント, ソフトウェア開発, 契約
システム開発契約はプロジェクトの成否を左右する重要な要素であり、契約形態によってリスク、責任範囲、見積もり金額が変わる。主要な契約形態は、労働者派遣契約、SES契約/準委任契約、請負契約、サブスクリプション契約の4つに分類される。労働者派遣契約は、派遣先企業の指揮命令下で労働力を提供する形態で、見積もりは技術者の標準人月単価に派遣期間を掛けた金額となる。リスク負担は最小限で、派遣先が主に負担する。
Amazon Q CLIで今度こそゲームを作成した
いいね : 7
タグ : python, aws, pygame, 生成ai, amazonqcli
Amazon Q CLIを用いて「マインスイーパー+ドットアンドボックス」のゲームをpygameで作成した記事です。AIは必要なプログラムを把握し、テストプレイのエラーを自動修正する利点がある一方、最初のロジックからの抜本的な変更が難しく、コードが継ぎ足しになる傾向があります。効果的な利用のためには、疎結合な設計、詳細な設計書の作成、コード構成の理解が重要です。
【React×TypeScript】React初心者が3ヶ月で「名刺作成アプリ」を実装しました
いいね : 15
タグ : typescript, jest, react, 学習記録, reactrouter
React学習3ヶ月の筆者が、React Routerなどを用いた名刺作成アプリを開発。Supabaseとの連携やテスト作成で苦労したが、以前学習した知識を別の場面で使うことで理解が深まることを実感した。複雑なロジックも分解し、既存知識と組み合わせることで解決可能だと気づいた。分散学習の有効性も再認識し、今後も学習に取り入れたいと考えている。使用技術はReact Router, Supabase, dangerouslySetInnerHTML, サニタイズ、GitHub Actionsなど。
AIコーディングツールとパフォーマンスチューニングを始める際のTIPS
いいね : 6
タグ : ポエム, ai, パフォーマンス, 性能改善, ボトルネック
AIを活用したパフォーマンスチューニングのTIPSとして、以下の点が重要です。
- ボトルネック特定と計測: まずは「遅い」を具体的な数値で把握し、ボトルネックがフロントエンド、バックエンド、DBのどこにあるかを切り分けます。計測にはDevToolsやスロークエリログを活用。
- AIの活用: AIをブレインストーミングやコード最適化に利用する際は、具体的な指示を与え、提案内容のデグレリスクを検証します。
- スコープを絞った改善: 大きな粒度から徐々にスコープを狭め、影響範囲の小さい修正から試すことが重要です。特に大規模な変更は慎重に進める。
- テストと記録: 修正前後の挙動が変わらないことのテストは必須。ボトルネック特定からソリューション検討のプロセスを記録し、レビュー時にレビュアーが理解しやすいように説明する。
Amazon Q Developer CLI で本格?バブル削除ゲームを作る
いいね : 6
タグ : aws, amazonqdeveloper, amazonqdevelopercli, amazonqcli
Amazon Q CLIを活用し、HTML+JavaScriptで動作するブラウザゲーム「バブル削除ゲーム」を作成。ゲームは9x10のグリッドで、同じ色のバブルを3つ以上繋げて消去する。レベルアップや爆弾アイテムなどの要素も搭載。初期配置は下部4列、新規バブルは下から湧き出る形式で、生成間隔はレベルアップ毎に短縮。スコアは消去個数とボーナスで算出。
【本当に何も知らない状態から知ってみよう①】HTMLとは、なんなのさ??
いいね : 6
この記事は、HTMLを知らない人向けに、HTMLの概要を解説しています。
重要なポイントは以下の通りです。
- HTMLはWebサイトの文章、画像、リンクなどを構成する言語である。
- WebサイトはHTML（骨格）、CSS（見た目）、JavaScript（動き）の3要素で構成される。
- HTMLは「タグ」と呼ばれる
<p>のような記号で記述される。
【grpc】option java_generic_services = true; が非推奨の理由とは？
いいね : 6
タグ : java, maven, api, rpc, grpc
gRPCにおけるoption java_generic_services = trueの非推奨理由を調査した記録。
gRPCはGoogle開発のRPCシステムで、Protocol Buffersでインターフェースを定義し、軽量なバイナリ形式でデータ送受信を行う。
記事では、java_generic_servicesをtrueにした場合とfalse（デフォルト）の場合で、生成されるスタブにどのような違いが現れるかを検証する。
具体的なサンプルコードを用いて、gRPCの利用手順と、java_generic_servicesオプションがスタブに与える影響を比較検討する。
意外と知らない？地味だけど便利なMySQL関数たち
いいね : 6
タグ : mysql
意外と知られていない便利なMySQL関数として、FIELD()関数が紹介されています。FIELD()関数は、引数で指定した値が、その後に続く引数リストの中で何番目に登場するかを返します。この関数を使うことで、特定の値の順位を簡単に取得できます。記事では具体的な使用例を挙げ、この関数の有用性を示唆しています。
[速習] Java 第1回 Publicメソッドの驚くべきテスト容易性 - privateの地獄からテスタブル設計への道
いいね : 5
タグ : java, テスト, 初心者, ddd, 神クラス
Javaにおいて、publicメソッドはprivateメソッドと比較して圧倒的にテストが容易である。publicメソッドは直接呼び出し可能で、型安全であり、IDEサポートも充実しているため、シンプルで美しいテストコードを書ける。記事では、privateメソッドの呪縛から抜け出すための設計手法を探求し、テスト容易性を高める設計を目指すことの重要性を述べている。具体例として、PriceCalculatorクラスのpublicメソッドのテストコードが示されている。
.NETのコンソールで汎用ホストを使うと何がうれしいか？
いいね : 5
タグ : .net, generichost
.NETコンソールアプリで汎用ホストを使うメリットは、正常なシャットダウンプロセスの実現、DI(依存性注入)の容易な利用、ログ出力の強化の3点です。正常なシャットダウンにより、DBコネクションの解放など、強制終了時にも安定した終了処理が可能です。DIにより、生産性向上やオブジェクト解放漏れの防止が期待できます。ログはレベルに応じて色分けされ、エラーが視覚的に分かりやすくなるため、運用面で大きな利点があります。
【アプリ開発】AWSセキュリティを学べるテトリスパズルを自作してみた！！
いいね : 5
タグ : aws, アプリ開発, amazonqcli
AWSセキュリティを学べるテトリスパズルゲームを、Amazon Q Developer for CLIへの指示で自作した。教育活動への活用を目指し、ガバメントクラウドを含むセキュリティ要素を盛り込んでいる。ゲームはGitHub.ioで公開されており、日本語・英語に対応。セキュリティ対策を考慮した配置で高得点が取れるように設計されている。
2025-06-18 6:46:09 AM 時点の情報です。