はじめに 生成AI関連のチャットアプリケーションでは、SSE (Server-Sent Events) によってサーバーからクライアントに対してリアルタイムでイベントを送信されることが多いかと思います。 MSW (Mock Service Worker) では、v2.0.0 よりStreaming形式のMockを作成できるようになりました。 https://mswjs.io/docs/recipes/streaming/ これにより、SSEによってリアルタイムで受信するレスポンスのMockを作成し、テストを行えるようになっています。 JestではなくVitestを採用している理由につ

はじめに 以前、JavaScript heap out of memory Errorが発生した場合の解消するステップについて記事にしました。 https://zenn.dev/arsaga/articles/291ff290543996 今回の記事ではその続きでメモリが不足していないにも関わらず、npm run buildを実施してJavaScript heap out of memoryが発生するパターンにおける原因とその解消方法について調べてみたので共有します。 環境 Node： v16.0.0 npm： v7.10.0 Amazon EC2 Error発生時

画面共有は顧客から信用を得る機会 顧客との打ち合わせ中に画面共有をして慌ててしまうことはよくあることです。私自身、ブラウザのタブが何十個もあるのを見られてしまったりしました。画面共有は誤魔化しが効かず、その人の能力が顧客に明確に伝わる場面です。あまりもたついていると「本当にWebに詳しい人なのか？」と疑問を持たれてしまいます。そんなある意味恐ろしい画面共有ですが、本記事では顧客から信用を得るためのチップスを書いてみました。 画面共有の事前準備 Webエンジニアの場合、基本的にはブラウザを画面共有することになりますが、そのブラウザが整理されていないようではミーティング中に必要な情報

はじめに 初めてプロジェクトリーダーを任されてから8ヶ月が経過し、これまでに直面した失敗とその対策をまとめて記事にしていきます。まだ実践できていないところもありますが、今後の行動指針として少しずつ実践していければと思います。 独りで多くのタスクを抱え込む 開発現場では基本的にマネージャー、リーダー、エンジニアという3つの役割が立てられますが、場合によってはこれらの役割を2つ、3つと兼務することが多々あります。この8ヶ月間、プロジェクトリーダーとしての役割を果たしながら、開発者としても実装を進めていました。具体的には、API・DB設計、新規機能の開発、PR確認、要望対応、工数算出

はじめに 今回は、前回に引き続き、ファシリテーターがうまく会議を進めるために必要だと思ったことを記事にしました。 目次 章 タイトル 概要 1 ファシリテーターってなに？ ファシリテーターについて紹介します。 2 どのようにファシリテーションするのか ファシリテーションで抑えるべきポイントを紹介します。 ３ まとめ 今回、ファシリテーション学習で使った書籍を紹介します。 1.ファシリテーターってなに？ ファシリテーターは会議の進行役の方を指します。 ファシリテーターは、主に下記のようなことをすると思います。 ・会議の準備 ・会議の目標/ゴールを設定

はじめに 今回は、前回に引き続き、うまく会議を進めるために必要だと思ったことと、プレップの紹介を記事にしました。 目次 章 タイトル 概要 1 プレップってなに？ プレップについて紹介します。 2 どのようにプレップするのか プレップで抑えるべきポイントを紹介します。 ３ まとめ 今回、ファシリテーション学習で使った書籍を紹介します。 1.プレップってなに？ プレップとは、preparationの略語で、「準備」のことを指します。 誰しも会議の前に、準備をすることの重要性は理解していると思いますが、実際に何をやった方がいいのか わからない人は意外と

はじめに 今回は、ファシリテーションについての紹介と、ファシリテーション力を上げて、うまく会議を進めるために必要だと思ったことを記事にしました。 目次 章 タイトル 概要 1 ファシリテーションってなに？ ファシリテーションについて紹介します。 2 なぜファシリテーションを学ぶのか 私がファシリテーションについて学ぼうと思ったきっかけを紹介します。 ３ 会議をうまく進めるために、重要なポイント 実際に会議で取り組むべき重要なポイントをいくつか紹介します。 1.ファシリテーションってなに？ ファシリテーションとは、グループによる課題解決やアイデア出し

はじめに 本記事は、経験の浅いエンジニアを対象とした記事になります。 今回は、データベース論理設計についての紹介です。 下記観点からの理解につながれば幸いです。 What データベース論理設計ってなに？ When データベース論理設計は、どのタイミングでやるのか Why なぜデータベース論理設計をやるのか How データベース論理設計のやり方（データベース論理設計をやってみよう！） 目次 章 タイトル 概要 1 データベース論理設計ってなに？ データベース論理設計の基本的な考え方について紹介します。 2 データベース論理設計は、どのタイミングでやるの

🔰はじめに Next.jsを用いた開発において、グローバルステートに関するライブラリを決めるターンが来たので 色々使ってみた所感を記載 ! 〇〇の場合おすすめみたいな記載はしますが、「1番これがいい」みたいな記載はしません ご自身の時と場合に合わせて1番いいを見つけてもらえれば 😵‍💫忙しい人のために Context API含め7つ調査したよ ここ で比較しとるよ 🔬そもそもグローバルステートって?? 説明 コンポーネントを跨いだ情報の管理。 props で渡して管理する方法もあるが、コンポーネントが多くなったり ./pages/ 配下のコンポーネント同士の受け渡

はじめに EC2環境でnpm run buildを実施したところ、以下のエラーが発生しました。このビルドエラーに対する原因を特定する方法と解消の過程について記事にしていきます。 <--- JS stacktrace ---> FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 0xa24ed0 node::Abort() [node] 2: 0x966115 node::FatalError(char c

始めに。 少し前の話になるのですが、 社内で輪読会の企画とファシリテーターを行いました。 それがとても楽しかったので、 輪読会を行ってみたい人や、 ファシリテーターをやってみたい人の何か参考になれば良いなと思い、 記事を書いてみることにしました。 誰かの参考になれば幸いです。 輪読会の企画を行ったきっかけ。 元々輪読会というイベントに興味がありました。 同じ本を読むことで、その本の分野の知識を一緒に深めることができたり、 普段業務では一緒にならない人と積極的に交流できそうだと思っており、 一度社内で行ってみたいと感じていました。 社内で勉強会の企画をすることになった際、 輪読会を

🌱 はじめに Vue.jsを使いたてでよく「結局computedってなんなん...??」「これはcomputedにした方がいい...??」と悩んでいたのでその考え方として。 公式ドキュメントを元にゆるい日本語で説明していきます。 https://ja.vuejs.org/guide/essentials/computed.html 🤔 computedって?? あるデータをウニャウニャして新しいデータを算出する。 import { reactive, computed } from 'vue' const author = reactive({ name: 'John Do

はじめに ここ2~3ヶ月のうちにDBを触る機会が多くなってきたので、備忘録を兼ねてこれまで学んだことをアウトプットします。 SQLの実行順 SQLは以下の順序で実行されます。クエリ生成時においては、異なる順序や方法で実行することがありますが、結果的には以下の順序に従って生成されます。 FROM -- テーブル指定（最初に、FROM句で指定されたテーブルやビューが読み込まれます） ON -- 結合条件の指定 JOIN -- テーブルの結合（このステップでON句が利用され、結合条件が適用されます） WHERE -- フィルタ条件による行の絞り込み GROUP BY -- グループ化

始めに 今回業務で大量のCSVファイルをインポートする際に、 ジョブとキューを使用してインポート処理を行いました。 またその際にLaravel Horizonを利用してキューを管理していました。 初めて使用したため、セットアップなどに苦戦したため、 まとめておきたいと思います。 設計 今回使用している技術は以下になります。(一部) laravel 9.44.0 PHP 8.1.8 Composer 2.4.4 MySQL 8.0.28 そもそもキューとは？ Laravelのキューシステムは、時間のかかるタスクをリクエストの処理から分離し、 非同期で実行するための方法を提供しま

概要 キーボードのキーをソフト的に入れ替える行為を長年してきたので、ちょっとした提案ができればなと思いこの記事を書きました。キー配列の話だからといってDvorak配列を薦めるわけではありません。この記事ではふだんよく使う移動系のキー、たとえば矢印キー（←↓↑→）をホームポジション（HJKL）に置くことで編集作業をしやすくします。設定をすることで下のようなレイアウトを追加します。ご覧の通り右手の一部のキーを使うことになります。 ! 実装の都合上、左手親指で英数キー（無変換キー）が押せるキーボードか、パンタグラフキーボードが適しています。以下ではmacOSを普段使われている方向けに説明

😭困りごと レビューをapproveしたらラベルを付けるGitHub Actionsが作られていたが、 ある日いつもエラーになるようになってしまった YAMLはこんな感じ on: pull_request_review name: Label approved pull requests jobs: labelWhenApproved: name: Label when approved runs-on: ubuntu-latest steps: - name: Label when approved uses: pullreminde

前提 ! 筆者はデザイナーではありません 部内での勉強会にて取り扱ったデザインについての話です。 社内にデザイナーは居るのですが、管理画面等デザイナーが関与していない画面を作る際などに知っててよかったことをまとめました。 ここでは「デザインとは機能である」を前提としています。 「Design is not just what it looks like and feels like. Design is how it works.」 スティーブ・ジョブズ https://www.clairworks.com/words/detail/195 目的を達成するためにどんなデザインが

こんばんは！ 今日も少しニッチなお話です 先日、業務上Bitbucketから当社Githubにリポジトリを移管する業務がありました 初めてやる業務でもあり、少々無駄な時間を過ごしてしまったので、 今後再発させないためにも記録を残しておきたいと思います それではいきましょう！ やりたい事 お客様のBitbucketのリポジトリから、当社のGithubリポジトリに移管したい Githubではプライベートリポジトリとして管理したい 現職ではGithubを利用しておりまして、正直Bitbucketを今回初めて触りました Attrasianのアカウントはギリギリもっていましたが、普段はほぼ

こんばんは！ 今日は社内でのちょっとした活動に関して記録を残したく 少しニッチなお話です とある日の事でした マネージャー：Tips共有チャンネルを指名制にしたいんだよね〜 ※当社ではTipsを気軽に発言する（してほしい）チャンネルが設けられています 勉強になることがとても多いので、メンバーからの発信頻度を増やしたい狙いがあります この一言で私の密かなプロジェクトが始動しました やりたい事 Tips共有チャンネルに所属しているメンバーからランダムに1名選抜し指名をするBotを作成せよ 要件をまとめる Tips共有チャンネルに所属しているメンバーからランダムに1名選抜する 選抜さ

はじめに 実務でFastAPIにて、OpenAIのAPI関連の実装をしている私の備忘録です。 FastAPIについては載っておりません。 読んでいただきたい方 ・ポートフォリオでAI機能つけたい方 ・OpenAIのAPI気になるけど難しいんでしょ・・・な方 ぜひ、ご自分の環境で試され、実装して欲しいです。 Pythonが初めての方でも、環境構築せずにUI上でPythonのコードを実行することができるJupyterを採用しております。 使用技術 下記、バージョンにて動作確認致しました。 バージョンを合わせて実行してください。 Python3 3.11 OpenAIのAPI