ユーザー登録APIでIDが重複した場合のステータスコード ユーザー登録APIにおいて、IDが重複した場合に返す適切なステータスコードは、状況やAPI設計によって異なりますが、一般的には以下のいずれかが使用されます。 409 Conflict (コンフリクト) 最も一般的な選択肢: リクエストが有効であっても、現在の状態では実行できないことを示します。 理由: IDは一意であるべきという制約に違反しているため、リクエストは衝突している状態となります。 メリット: 標準的なステータスコードであり、多くのクライアントが理解しやすい。 リクエストが不正であるという明確な信号を送ることができる。 422 Unprocessable Entity (処理不能なエンティティ) 詳細なエラーメッセージが必要な場合: リクエストの構文は正しいが、セマンティックに正しくないことを示します。 理由: 送信された

先日、LT大会でWebAssemblyについてお話ししたのでその内容含めて記事を書きました。 調べようと思った背景 弊社ではWebデザインのすり合わせにFigmaを使用しているのですが、そんなFigmaはWebAssemblyを使っているから高パフォーマンスを実現しているらしく、気になったので調べてみました。 公式ブログを見ると、本当にWebAssemblyのおかげでロード時間が大幅短縮されていることがわかります。 WebAssemblyとは ウェブブラウザで高速に実行できるバイナリフォーマットの仕様 Javascript以外の言語（C++, Rust…）をブラウザ上で実行できるようにした コンパイル済みのコードを実行するため、処理速度が向上する ブラウザ上でのゲーム、動画編集、機械学習など → 環境も整ってきてこれから活用するサイトが増えてきそう そもそもjavascriptは Webサ

最近、FigmaのDev ModeのPlaygroundを使用する機会があり、こちらが便利だと感じたので紹介させていただきます。 サマリー 開発とFigmaデザインの不一致で、保守性が下がることがある。Dev ModeのPlaygroundを使うことで改善できそう。 Playgroundとは、FigmaデザインのComponent Propeatyを簡単に試すことができるツール こちらを使用して設計することで、開発の保守性・効率が上がることが期待できる よくある設計方法とその課題 以下のようなButtonを設計する際、どのような設計方法があるでしょうか。 色が背景または、枠線に表示されるパターンがあったり、テキストの横にアイコンがあったりと複数の状態があるようです。 エンジニアが目視で複数の状態を比較し、それを以下のようなPropsとして定義して実装を進めるようなやり方があると思います。

Nextjsの公式チュートリアルを実践したので、簡単に内容をまとめました。 全十六章あります。 第一章　Getting Started プロジェクトを作成して、appやscriptなどのフォルダ構造の説明があります。 サーバーを起動してブラウザで確認して終了です。 第二章 CSS Styling tailwindとCSSモジュールの適用方法について。 なお、この章以降はtaiwindを使用していきます。 clsxというclassnameを動的に変更するライブラリの紹介もありました。 今までは{}でjavascriptのif文でやっていたため、参考にしようと思います。 <span className={clsx( 'inline-flex items-center rounded-full px-2 py-1 text-sm', { 'bg-gray-100 text-gray-500':

はじめに Pythonではじめるテキストアナリティクス入門という本を読んで、spaCyとGiNZAで形態素解析や単語間の係り受け解析をやってみて、もう少しいろんなことをやってみたいと思いました。 各ツールの関係 spaCyは、Explosion AI社が開発しているオープンソースの自然言語処理ライブラリです。公式サイトのspaCy is designed specifically for production use and ... ということから製品への本格活用を想定して開発されています。 また、spaCyは、構文解析のための基本的な機能を持っており、spaCy単体で日本語の形態素解析や係り受け解析等を行うことができます。日本語だけではなく、多数の言語に対応していて、日本語用の解析モデルや英語用の解析モデルが付属しており、それらのモデルを切り替えて使用することで多数の言語に対応することが

はじめに S3から比較的大きなサイズのcsvを読み込み、データ整形後、S3に保存するという処理を自動化させたいと考え、Amazon SageMaker Processingの定期実行をやってみました。 SageMaker Processing について SageMaker Processingは、Amazonが用意しているコンテナや独自のコンテナ上でPythonコードを実行でき、処理が完了するとインスタンスが自動で停止されるサービスになっています。 必要なものは以下です。 コンテナイメージ 今回は、既に用意されているPyTorchコンテナイメージを使用しました。Pythonバージョンは3.10系になります。 データ整形の処理を書いたPythonファイル 上記を実行するためのシェルスクリプト 自由度が上がりそうだったためこの実行方法でやってみました。 SageMaker Processing

react-konvaを触っている時、 👨「onDragMove..onTouchMove..onTouchEnd..なんかいっぱいあるけどなんだこれ。」 👨「onTouchMoveはデベロッパーツールの開閉で挙動変わるの二重スリットみたい」 疑問に思ったので調べてみました。 Touch、Dragの違い onTouchStart, onTouchMove, onTouchEndはPCだと動かないです。 onDragStart, onDragMove, onDragEndはPCでもスマホでも動きます。 Touchは指で端末をタッチするのに対してDragはマウスでドラッグする意味の違いですね。 デベロッパーツールを開いていると、onTouch~がPC上でも動くのはブラウザがスマホ等で認識しているからだと思います。 onTouchMove, onDragMoveの中身を見てみよう onTou

ある日というか今日の出来事です。 事象 昨日(2024/04/30)まで元気に動いていたLambdaが、今日(2024/05/01)になったらエラーを吐いて死にまくる事象が発生しました。本番環境で。誰も何もしていないのに。 原因 4/30から5/1の間にLambdaのランタイムが自動更新されていたことが原因でした。 ランタイムのバージョンはCloudWatchにログとして出力されており、以下のようになっていました。 昨日 INIT_START Runtime Version: nodejs:16.v33 Runtime Version ARN: arn:aws:lambda:ap-northeast-1::runtime:0163909785ec2e11db2b64bb2636ada67bb348dd5764aa83e7eb011bc0f365d8

背景 以前プロジェクトでRGBでなくHSlで色を付ける実装をしていたのですが、スマホで動作確認をしたところ全てが黒色か白色で描画されるバグが起こってしまいました。 PC画面（chrome） スマホ画面（IOS safari） とりあえず原因がわかる hslの表示箇所で単位をつけると正常に色付けがされることがわかりました。 background:hsl(180 ,100,75); ↓ background:hsl(180 deg ,100%,75%); なぜPCとスマホで差が出る？ とはいえなんか単位つけたら治りました！だとまた同じバグが出かねないので、差が出た理由を調べてみます。 そこで今回使うのがCan I useというデバイス・ブラウザによって使う機能が対応しているか分かるサイトです。 こちらでhslについて調べてみます。 青色が使用可能で赤色が使用不可ですが、hsl自体はどのブラウザ

はじめに 普段はJavaScriptを主に開発を進めているのでPythonで開発を進めると様々な問題に悩まされます。 その中でもパッケージの管理については個人的に不自由をすごく感じています。Pythonのバージョンを設定するpyenv, プロジェクトごとのパッケージを管理するために仮想環境の構築、さらにパッケージのバージョンを設定するためのrequirements.txtと開発までのハードルが高すぎます。 良い方法がないかと調べていく中で全てを解決できそうなRyeというツールを見つけましたので導入方法をメモ程度に記事にしました。 導入環境はAWSのSageMaker上です。 ライブラリ管理簡単にできるようになったのでLinterとCode Formatterも追加してみました。 Ryeとは RyeはPythonのWebアプリケーションフレームワークFlaskの開発者が作ったPythonパッ

はじめに AWS SageMakerを使ってデータ分析や機械学習をする時にコードの管理方法に困っていたため、Gitを導入してチーム開発の効率化を図りました。メモ書き程度ですが、初めてSageMakerを触る人などの助けになれば幸いです😁 AWSのアカウント、GitHubのアカウントは持っている前提で話を進めていきます。 準備 連携を始める前に以下のものをAWS consoleなどを通して準備しておいてください。 GitHub上に今回のプロジェクト用のレポジトリ AWS SageMaker上にドメインとプロフィール SageMakerドメインとGitHubの連携 基本的には公式ドキュメントの通りに進めていきます。 AWS conosle上でSageMakerを開く サイドバーから Admin configurations > Domains > 対象のドメイン > Environmentに

誰向けの記事？ テストコードがあるといいとは知っている でもテストコードを書くことが習慣づいていない こうなってない？ 目的の機能を実装する 当該コードにテストがない テストコードを書こうとする すぐには書けなそう 「時間がないのでテストは書きません。後で書きます」 はじめに戻る 原因は本当に時間がないから？ テスタビリティ（テスト容易性・テストが簡単に記述・実行できるか）のあるコードを書いていないからでは テスタビリティがあるかどうかを簡単に判断するのはテストを書くこと テスタビリティは設計段階で考慮する必要がある 設計段階でテストを書くことで、テスタビリティが担保されているか確認することができる これがテストを早い段階で書くことの一つのメリット テストコードを書き慣れていないからこそ 実装を先にしてからテストを書くことが悪いわけではない テスタビリティの高いコードを書けていれば、テスト

{ "pluginId": "amplify-nodejs-function-runtime-provider", "functionRuntime": "nodejs", "useLegacyBuild": true, "defaultEditorFile": "src/index.js", + "scripts": { + "build": "npm i" + } } 参考issue 詳細 エラーになる条件 amplify add function等で、AmplifyにNode.jsのLambdaを追加している amplify pushする環境のyarnのバージョンが1.x系以外 なぜエラーになるか amplify pushした時に、Amplifyが生成したNode.jsのLambdaでは勝手に yarn install --production が実行されるようです。 このときamp

概要 Googles Forms API googleフォームをプログラムから操作するための API です。この API を使用すると、googleフォームの作成、編集、回答の取得などの操作を自動化したり、カスタムアプリケーションとの統合を行ったりすることができます。 Google Drive API googleドライブのファイルやフォルダを操作するための API です。この API を使用すると、googleドライブ内のファイルやフォルダの作成、変更、削除、検索などの操作を自動化したり、カスタムアプリケーションとの統合を行ったりすることができます。 前提 googleフォームは formId を持っている driveファイルは fileId を持っている 今回やりたかったこと Reactアプリケーション側からgoogleフォームを作成し、googelドライブの共有フォルダにフォームを配

本記事について 最近この本を読んで、実際のプロジェクトで使ってみているところです。試行錯誤の真っ最中です。 良さそうな感触はありつつ、結構大変だな〜と思うところもあったので、体感したみた感想を交えて実際の作成方法も紹介していきます。 『ユースケース駆動開発実践ガイド オブジェクト指向分析からSpringによる実装まで』 また、ユースケース駆動開発（ICONIXプロセス）自体は別の方が紹介してくれているので、本記事では詳細は割愛した上で、詳細設計や実装の話は完全に省き、要求定義〜基本設計までの流れについて書いていきます。 前提 ドキュメントの管理はGithubで行なってます VScodeを使ってMarkdownやdrawioで書いてます ざっくりICONIXプロセス ICONIXプロセスとは、UMLを描きながら、ユースケースを中心に設計していく手法のことです。 以下の手順で行います。 ドメイ

はじめに 以降にカスタムフックのコード例を記載しますが、全て以下のcreate-react-appで作成された初期のApp.tsxベースのコードで動きます。 どのカスタムフックのパターンでも呼び出し側のコードは同じで、同じ動作となります。 import "./App.css"; import { useWindowSize } from "./hooks/useWindowSize"; function App() { const { windowWidth, windowHeight } = useWindowSize(); // const [windowWidth, windowHeight] = useWindowSize(); // 配列で返すパターンの場合 return ( <div className="App"> <header className="App-header"

なんの記事？ 見積もりというものが抱えている不確実さにどう対応するべきか？ 不確実性を減らす 不確実性の影響を減らす 確率的な見積もりをそのまま扱う 現時点での考えを整理したが、納得のいく答えはでていない。 見積もりってなんだっけ？ まず、本記事で取り上げている見積もりとはなにか確認します。 Wikipediaによると次のような記述がされています。 見積（みつもり。見積り、見積もりとも書く）とは、金額・量・期間・行動を前もって概算すること。見積もること。あらましの計算をすること。また、その計算。目算。「所要時間を見積る」、「一日の来客者数をざっと見積もった」など、おおよその感覚で数字の見当をつける場合の口語体表現でも使われる。 見積 - Wikipedia ソフトウェア開発における見積もり 今回はソフトウェア開発における見積もりについて考えるので、量と行動を除いた次の２つについて考えます。

はじめに バグは同じところからよく発生しやすいとされています。 その原因としては 複雑なドメインを扱っている 設計に問題がある 変更が多い などが考えられます。 コードベースに対してバグが多く発生している部分を観察することにより、当該箇所へのテストを強化したり、設計を見直すきっかけにすることができるでしょう。 前提 Gitでバージョン管理をしていること バグ修正のコミットにfixというprefixをつけていること どうするの 以下のコマンドを叩きます。 $ git log --grep="fix" --pretty=format: --name-only | sort | uniq -c | sort -r この出力は、src/components/MyComponent.vueというファイルが15回、src/utils/helper.js が10回、src/index.jsが5回、fix

Qiita Advent Calendar 2023 「Visual Studio Code」 24日目の記事です。 言いたいこと VSCode上でAmazon CodeWhispererに脆弱性診断をさせてGitHub Copilot Chatにその解説をさせると、とても捗るよ。 もう少し細かい説明 GitHub CopilotやAmazon CodeWhispererって何？ GitHub Copilotは、IDE上でAIがコーディングの補完をしてくれるGitHub提供のサービスです。 Amazon CodeWhispererは、IDE上でAIがコーディングの補完をしてくれるAWS提供のサービスです。 つまり競合しています。比較用に両方を使ったことがある人はいても、日常的に同時使用している人は少ないのではないでしょうか。 ですが、メイン機能であるコーディング補完は一旦おいておいて、Co

作業の数と、その各作業に充てられる時間の対応表です。同時に作業するべきタスクが2つあるだけで、タスクのスイッチにかかるコストは20%もかかってしまいます。 ならシングルタスクにすれば？ という意見はあるかと思いますが、特に開発PMや管理職のような複数のステークホルダーと関わる人にとってはあまり現実的ではないでしょう。 マルチタスクは減らせても無くならないという前提で、マルチタスクとうまく付き合っていくための具体的なTipsを書いていこうと思います。 作業環境 その前に私の作業環境を載せておきます。 WindowsやTeamsでも似たようなことはできるかもしれないですが、そこまでは調べてません。 PC：Mac チャット：Slack ストレージ：GoogleDrive、Dropbox Tips 以下の7つを紹介したいと思います。 PJ毎に仮想デスクトップをつくる 便利なブラウザを使う ブラウザ