NCDCエンジニアブログのフィード
https://zenn.dev/p/ncdc
NCDC株式会社( https://ncdc.co.jp/ )のエンジニアチームです。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( https://github.com/ncdcdev/recruitment )をご覧ください! ※エンジニア以
フィード

null と undefinedは使い分けした方がいい?
NCDCエンジニアブログのフィード
はじめにnullはその開発者から100億ドルの損害だと言われてるそうです。https://www.infoq.com/presentations/Null-References-The-Billion-Dollar-Mistake-Tony-Hoare/同じ値がないという意味なのにjavascript等では二つも用意されているのが不思議でこの際ちゃんと理解しようと思い調べました。コードを書くときにtext===undefinedやtext===nullなどで、曖昧なコードが増えるのも問題です。 nullは自然発生しない例えば以下のようなコードがあった時、コンソールにはu...
1日前

[TS TIP] アンビエント宣言とネームスペース
NCDCエンジニアブログのフィード
最初に普段あまり意識することのない「アンビエント宣言」と「namespace」について触れる機会があったので、少し調べた内容を噛み砕いて書き留めておこうと思います。実際知らなくても困ることはないですが、知っていて損はないなと感じたので、気になる方は読み進めていただければと思います。では始めます。 アンビエント宣言(declare)とは?一言で表すと「この変数や関数、型などは外部にすでに存在しているよ!」という宣言のことです。Javascriptのコードには存在しない(型が)けど、「型情報としては必要」なものを Typescript に伝えるための構文です。例えば、外...
2日前

[Amplify] Gen1からGen2へのバックエンドリソース移行
NCDCエンジニアブログのフィード
最初に今回は、Gen1で構築したバックエンドリソースをGen2の管理下として完全移行できるかどうかを試した結果の備忘録となります。結論、完全に移行することは正直難しいのが現状です。ではなぜ難しかったのか。どのような対応を行なったのかを書いていきます。では始めます。 基礎知識Gen1とGen2では大きく異なる点がいくつか存在しますが、バックエンドリソースを作成する観点で考えると、Gen1では基本的にCLIでamplify add auth → amplify pushといったようにコマンドラインから対話形式で回答した内容に沿ったリソースが勝手に作成される形式でしたが、Ge...
2日前

[CloudFront] カスタムSSL証明書のみを手動設定すると?
NCDCエンジニアブログのフィード
最初にAWS CloudFrontを使って独自ドメインを運用する際、カスタムSSL証明書(ACM)を設定するケースがあると思います。この設定をAWSマネジメントコンソール上で手動で行っている場合、CDK(Cloud Development Kit)を使ってCloudFrontディストリビューションの構成を変更すると思わぬトラブルが発生します。この記事では、そのリスクと注意点を書き留めておきます。では始めます。 前提CloudFrontのディストリビューションをCDKで定義カスタムSSL証明書の設定はコンソールから手動で実施(CDKコード上には記述しない)今回はここ...
3日前

[Amplify] アクセスログの分割取得
NCDCエンジニアブログのフィード
最初にAmplifyコンソールからアクセスログを取得する際、トラフィック量が多すぎて再試行を要求されるケースがあります。Lambdaを使用すれば問題は解決しそうですが、何らかの関係でどうしてもコンソール上から取得したい場合はどうするべきかという備忘録として残しておきます。では始めます。 Amplifyのアクセスログとは公式にもある通り、Amplifyに対するトラフィックを全て記録してくれている機能です。そのため、セキュリティ要件に対する対応としての選択肢に入る機能かと思います。https://docs.aws.amazon.com/ja_jp/amplify/lat...
3日前

MCP connector で AWS Lambda 上の MCPサーバーを使ってみる (Streamable HTTP)
NCDCエンジニアブログのフィード
この記事では以下のことをやります。既存のstdioのMCPサーバーをStreamable HTTP化するStreamable HTTP化したMCPサーバーをAWS Lambda上で動かすMCP connectorでLambda上のMCPサーバーを使用する MCP connector について先日のAnthropicのCode with ClaudeでMCP connectorという機能が発表されました。https://docs.anthropic.com/en/docs/agents-and-tools/mcp-connector今まではMCPサーバーを使用するには...
5日前

expo SDK53リリース内容まとめ
NCDCエンジニアブログのフィード
はじめに先日5月1日にexpoのSDK53がリリースされました。久々にexpo goを開くとエラーが出ていたので、気になってリリース内容を見てみました。https://expo.dev/changelog/sdk-53Xで調べてみると、不安定で動かないライブラリが出ていたりバグがあったりとポストが散見されます。ただ自分はアップグレートしても問題はなかったです。https://x.com/sugasaki/status/1919702111987892365https://x.com/aapkaakumar/status/1918418945188471052 リリー...
9日前

MCP とは? 〜とりあえずMCPについての概要を抑えたい方へ〜
NCDCエンジニアブログのフィード
MCP について、技術職ではないので詳細な技術的な話はよくわからないが、流行り・一般教養として概要を抑えたい。エンジニアだけど流行りに乗り遅れて MCP についてよく分かっていない。そんな方に向けて、MCP についての概要を記載していきます。!NOTEかなり噛み砕いた記載にしております。正しいニュアンスや詳細を知りたい方は、公式のドキュメントや、他の方の解説記事をご参照ください。本記事では、以下のような言葉の定義として記載します。生成 AI アプリ:Claude や ChatGPT などの生成 AI アプリケーションAI モデル:生成 AI アプリで内部的に使用...
12日前

生成AIによるE2Eテスト自動化の挑戦:理想と現実のギャップ
NCDCエンジニアブログのフィード
はじめにこんにちは。NCDCの藏原です。皆様、生成AIで業務を効率化していますか?PMの業務において、生成AIは以下のような作業を効率化できると期待されます:会議議事録の作成と要約要件定義書やイシューの下書き進捗レポートの自動生成テストの自動実行などなどしかし、理想と現実は異なるもので、「AIでこれできるんじゃない?」と言う無邪気な思いつきをそのまま実装・実現できることはまずありません。この記事は、E2Eテストの自動化・効率化を夢見てPlaywright MCPに手を伸ばした結果、手動でテストするよりも時間がかかってしまったPMの、技術的供養記事にな...
15日前

[TS TIP] タグ付きユニオン型とブランド型
NCDCエンジニアブログのフィード
最初に業務でも取り入れやすいtypescriptの魅力を活かせるtipシリーズです。今回はタイトルにもある通り、タグ付きユニオン型・ブランド型について触れていきます。基本的にはコードベースで解説を行い、最後には2つの型を組み合わせた場合の実践例もまとめています。では始めます。 タグ付きユニオン型とはタグ付きユニオン型(Tagged Union Types)は、異なる型の集合(ユニオン型)に識別子(タグ)を付けることで、型の安全性と保守性を高める手法です。これは「判別可能なユニオン型(Discriminated Unions)」とも呼ばれます。 タグ付きユニオン型の活...
17日前

GASで自分以外のカレンダーを取得する
NCDCエンジニアブログのフィード
要点自分以外のカレンダーは、カレンダーIDによって取得するconst calendar = CalendarApp.getCalendarById('カレンダーID');Googleカレンダーの他のカレンダーに、取得対象カレンダーを追加している必要があるカレンダーの参照権限があっても、他のカレンダーに未追加だと取得できない他のカレンダーで取得対象カレンダーを追加するには、参照権限が付与されている必要があるGoogle Workspaceで管理されているアカウントの場合、組織全体の設定も影響している 取得方法カレンダーIDによって取得します。取得で...
17日前

【Flutter】アプリ内ストレージに書き込んだファイルをアプリ外から確認したい
NCDCエンジニアブログのフィード
path_providerライブラリで、アプリ内ストレージにファイルを保存する際、デバッグ時などにアプリ外から参照・確認したい場合はどうしたらいいのか、とふと思ったので調べてみました。※ ここで検証として使用する処理は、以下の数行だけです。final appDir = await getApplicationDocumentsDirectory(); // ← path_providerの関数final file = File('${outputDir.path}/log.txt');await file.writeAsString('ログの内容'); path_prov...
17日前

モバイルアプリ開発がなぜ炎上するのか?必要なのは進捗管理ではなく"実態管理"
NCDCエンジニアブログのフィード
システム開発において、「炎上」は珍しい話ではありません。その中でも特に、モバイルアプリ開発は計画通りに進めていたはずが、気づけば納期直前に大炎上といった光景は少なくありません。進捗上ではオンスケに見えていたのに、実際には大幅な遅延や品質問題が隠れていた。このギャップこそが、モバイルアプリ開発を炎上させる最大の要因です。※炎上の定義はQCDのいずれか、あるいは複数が当初想定より大幅に劣後することとします。モバイルアプリ開発においては、単なる進捗管理では不十分です。必要なのは、「実態」を正確に把握し、早期に手を打つことです。この記事では、なぜモバイルアプリ開発が炎上しやすいのか...
21日前

reactでやりがちなkeyの間違った使い方
NCDCエンジニアブログのフィード
なぜkeyが必要なのかkeyがない状態はデスクトップ上のファイルに名前がないようなもので、ファイルを1番目、2番目と管理するようなものらしいです。keyを設定することで並べ替えがあってもその項目を認識してそこだけ再レンダリングします。もし設定していない場合はエラーが出ますが、このときには便宜的にインデックスを指定していると公式ドキュメントにありました。Each child in a list should have a unique "key" prop.ですが、この後書いているようにkeyにインデックスを指定するのはパフォーマンス低下やバグに繋がるのでエラーを表示していま...
22日前

Cloud RunでAIアプリを作る。サイドカーでMCPサーバーを動かして連携する。
NCDCエンジニアブログのフィード
GW暇だったので、Cloud RunでAIチャットアプリを作ってみました。それだけだと普通すぎるのでサイドカーでMCPサーバーを動かして連携できるようにしてみました。セキュリティ的に懸念も多いMCPサーバーですが、自社アカウントのクラウド上に閉じて構築すれば安心して使えるのではないかと思った次第です。Cloud Runならコンテナアプリを簡単にデプロイ出来ますし、生成AIはVertex AIを使えばGoogle Cloudに閉じた構築が可能です。 サイドカーとは?こういうやつです。(この図はChatGPT製です)つまり、サイドカーというのはメインとなるコンテナをサポートする...
24日前

Amazon Q Developer CLI で MCPサーバーを設定する際のハマりポイント(2025/05/02)
NCDCエンジニアブログのフィード
はじめにこんにちは。NCDC株式会社ITコンサルタントの藏原です。MCPによって、いよいよ生成AIのビジネス利用範囲が広がってきましたね。Amazon Q Developer CLIが、v1.9.0からMCPサーバーを使えるようになりました。そこで、MCPサーバーを設定する際に遭遇した問題と解決策について共有します。この記事は2025年5月2日時点の情報に基づいています。 前提条件AWS Builderアカウントが必要ですAWSのホームページ を参考に、Homebrewを使用してインストールを行います$ brew install amazon-q 主な課題...
1ヶ月前

react-pagenate 押下後にページングをキャンセルする
NCDCエンジニアブログのフィード
はじめにreact-pagenateは、React上でページングUIを実装するためのライブラリです。このライブラリでページングアイテムを押下後、特定の条件であればページングをキャンセルする処理を実装します。 実装方法挙動に関連する実装のみ記載します。const handleClick = (event: { index: number | null; selected: number; nextSelectedPage: number | undefined; event: object; isPrevious: boolean; isNext: ...
1ヶ月前

Playwright MCPでブラウザのテストをしてみた
NCDCエンジニアブログのフィード
はじめにPlaywrightは、Microsoftが開発したブラウザ自動化ツールで、実際のブラウザを動かしたE2Eテストができます。こちらはaiに書いてもらったサンプルコードで、googleでcatと検索したときの挙動をテストするコードです。test('Googleで「cat」を検索', async ({ page }) => { // googleの検索ページに移動 await page.goto('https://www.google.com'); // 「cat」と入力してEnter await page.fill('input[name="q"...
1ヶ月前

おばあちゃんから無限にお年玉を貰うMCPサーバーを作ってみた
NCDCエンジニアブログのフィード
とりあえず、こちらをご覧ください。GitHub Copilotのエージェントから無限に呼び出され続けるMCPサーバーが作れてしまいました。!これはMCPサーバーのセキュリティに関する記事です。作成したMCPサーバーはAgentのよくない動きを誘発するので公開しません。実際におばあちゃんから無限にお年玉をもらう行為はやめましょう。 何がおきているか?Copilotくんが無限ループしています。なぜ無限ループするのでしょうか?GitHub CopilotのAgentがどう作られているかによるので正確なところは分かりませんが、おそらくAgentが物事を「忘れる」...
1ヶ月前

【Flutter】スマホのシステム言語設定に対応してWidgetやテキストを多言語化する
NCDCエンジニアブログのフィード
Flutter アプリの多言語対応について、動作確認しながら調査してみました。【flutter doctor】[✓] Flutter (Channel stable, 3.22.0, on macOS 14.0 23A344 darwin-arm64, locale ja-JP)[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)[✓] Xcode - develop for iOS and macOS (Xcode 15.2)[✓] Chrome - develop f...
1ヶ月前