Yohei Kuji

📌 この記事はモニクルAdventCalendar2024の11日目の記事です。https://adventar.org/calendars/10519こんにちは！モニクルのエンジニアの久慈です。この記事では、私が2024年に触っていた技術やツール、tipsなどで印象に残っていることをざっくりと振り返り、最後に今年の感想を書いていこうと思います。 2024年 振り返り 技術 フロントエンド JS/TS書いた記事https://zenn.dev/monicle/articles/4ff248e825f26dhttps://zenn.dev/monicle/a...

【思い出】モニクルエンジニアの2024年 振り返りと感想

どのクイズ？僕の所属している開発チームのスクラムマスターが突然、スクラムのクイズをやってみよう！と言い出してくださり、こちらの初心者向けスクラム理解度クイズをやってみました。僕の成績は30問中22問正解であり、8問間違っていました。その間違っていた問題を振り返りがてら軽くまとめてみようと思います。 間違えた問題・学びQ2正解：オリファインメントはスクラムのイベントではありません。スクラムガイドでは、スプリントプランニング、デイリースクラム、スプリントレビュー、スプリントレトロスペクティブが公式イベントとされています。リファインメントはこれらには含まれず、柔軟にチー...

スクラム理解度クイズやってみた！

困ったことStack APIのchildrenの要素間にmarginを与える方法としてspacing propsがあります。今日開発していて、spacing propsを利用してもmarginが当たらずに困ってしまいました。具体的には文字列とボタンの間に余白を入れたかったのですが、うまくいきませんでした。コード<Stack spacing={2}>    文字列    <Button>      ボタン    </Button></Stack>画面表示spacing propsの説明 解決...

MUIのStack APIでspacingが効かなくて困った話

こんにちは！モニクルのエンジニアの久慈です。先日、モニクルの開発合宿にてReact Nativeを用いてアプリ開発する機会に恵まれたので、振り返りも兼ねてブログを書いています。 きっかけは？モニクルでは2023年度から開発合宿を行なっています。(2023年度の開発合宿の詳細はこちら)合宿で何をするかを計画する段階では、今年度の開発合宿では昨年同様、まずは開発部のメンバーが開発合宿で取り組みたいアイデアをブレストする形で始まりました。ちなみにブレストはfigjamで行いました。そのブレストの最中に一つ「これをやってみたい！」と私に刺さるアイデアがありました。それは同僚のなかざ...

【Reactエンジニアの挑戦】React Nativeでアプリ作ってみた！

解決したい問題「あれ！？作成したはずのデータが画面に反映されないなぁ...」フロントエンド開発をしていてこんな思いになることはないでしょうか？例えば、「新規作成画面でレコードを作成した後に一覧画面に遷移すると、作成したはずのレコードが一覧画面に反映されない。」そんな問題に直面することがあるかと思います。私は直近、GraphQLクライアントであるurqlを用いて開発している際に、「とあるレコードを初めて新規作成した後に一覧画面に遷移しても作成したデータが一覧画面に反映されない問題」 に直面しました。具体的には、下記1→2→3と行った際に、4の問題に直面しました。 問題の...

【urql・キャッシュ無効化】新規作成したデータが一覧画面に反映されない？

てんてんてん(..., 3点リーダー)をいい感じにしたい！フロントエンドの画面表示を実装していて、「数行(コンポーネントを使う側から指定)かつ溢れたら3点リーダーを付けれるコンポーネント」を実装したくなることがあるかと思います。この記事ではそのやり方をメモ程度にまとめていきます。 具体的なUIこちらは実装後のStorybookのキャプチャです。 どうやるの？実際のコードは？React, MUIを用いて.tsxに実装する場合の一例を残しておきます。MUIでなくても、コードを適宜修正すればchakraなどでも大体同じようにして使えるはず！追記：chakraにはnoOf...

【React/MUI/CSS】複数行かつ溢れたら3 点リーダーを付けれるコンポーネントを作ろう！

頭出しGraphQL APIをバックエンドにしているフロントエンドアプリケーションを開発する際は、gqlリテラルをよく書くかと思います。普通のユースケースであれば、fieldを書いてcodegen!ってやっていれば特段問題ないかと思います。ですが、まれに「variableの値に応じてfieldを呼ぶか決めたい」ケースがあるかと思います。このvariableがboolean型であれば特に問題ありません。GraphQLではDirectivesがサポートされていて、こんな感じ↓でboolの値をfieldの前(この例で言うとfriendsの@includeの後)につけてあげればOK...

【GraphQL】boolean以外のvariableの値に応じてfieldを呼ぶか決めたい(できないっぽい)

そうです。毎回忘れます。そろそろちゃんと覚えたい。なので情報をまとめておきます。 ?? とはNullish coalescing operatorと呼ばれるもの。用例：const foo = null ?? 'default string';nullとundefinedの時だけ??の右の値になる。 coalesce とは？「coalesce」とは、異なる要素が結合して一つにまとまる、あるいは一体化することを意味する英単語 || とはLogical ORと呼ばれるもの。用例：const value = x || yJSの世界でfalsyな値であれば||の右の値...

【TS】毎回忘れる||と??の違い

悩みenumの値を関数の引数にしつつ、その関数を呼び出す側はenumの値を文字列として直接指定したいときはどうするんだろう？ これじゃダメだったenum Currency  {  JPY = '日本円',  USD = 'ドル',  EUR = 'ユーロ'}const sampleFunc = (val: Currency) => {  return val}sampleFunc(Currency.JPY) // OKsampleFunc('日本円') // NG関数の引数に直接Enumの型を指定すると、関数の呼び出し元の引数にenumの値を...

【TS】enumの値のunion型が欲しい！

この記事はモニクルAdventCalendar2023の21日目の記事です。 ご挨拶 + 概要どうもこんにちは！モニクルのエンジニアの久慈です。そろそろクリスマスも近くなってきましたね🎅最近は朝がとっても寒く感じ、毎朝の起床も試錬に感じますが、今回は業務で試錬に感じていることについてまとめていこうと思います。↓「試練」とはこの記事では、モニクルに入社してから自分が携わっている業務の一つである、Railsで作られている社内向けプロダクトをReact+GraphQLに置き換えていく業務についてまとめていこうと思います！ 開発しているアプリ「ADMIN」のざっくり紹介現在...

【試練】RailsアプリをReact+GraphQLに置き換える！

はじめにこの記事で作るフォームのソースコードはこちら↓になります。https://github.com/yohei222/react-hook-form-zod-mui【React Hook Form × Zod × MUI】フォームを作ろう！の続編になります。ソースコードや実装方針などは前編のものを継承しています。前編の「フォームを作ろう！」では、テキスト入力フォームと選択フォームの実装例を紹介しています。この記事では、型安全に複数選択可能でオートコンプリートなフォームを実装する方法の例を紹介していきます。 使用技術TypeScriptReact ...

【React Hook Form×Zod×MUI】複数選択+オートコンプリート+型安全なフォームを作ろう！

はじめにこの記事で作るフォームのソースコードはこちら↓になります。https://github.com/yohei222/react-hook-form-zod-mui 使用技術TypeScriptReact Hook FormZodMUI 作成するフォームこの記事で作成するフォームがこちらになります。フォームの内容を整理していきます。テキスト入力要素必須入力と任意入力で二つの要素があります。検索ボタンを押した時にエラーメッセージが出るのは必須入力の要素のみで、任意入力の方ではエラーは表示されません。セレクト要素テキスト入力要素と同じく、必須...

【React Hook Form × Zod × MUI】フォームを作ろう！

本記事の趣旨(satisfies Operator)TypeScriptのversion4.9以降にて扱えるsatisfies Operatorに関して、サンプルコードとともに解説しています。ちなみにですが、satisfies OperatorはTSのver4.9の新機能として2022/11/15に公表されているため、割と新しめの機能になります。また、余談ですが、TSのver4.9のリリースノートではsatisfies Operatorを一番上で紹介しているので、4.9の目玉機能と言えるかもしれません。 satisfies Operatorの利点に関して 値自身の型を保...

【TS ver4.9以降】satisfies Operator とは？

【React】 useEffectの中で前回のstateの値を取得したい！フロントエンドの開発していると稀に起こりうる可能性があるので、自分への備忘録も兼ねて記事として残しておきます。サンプルコードのみを見たい方へ↓こちらからこの記事にて紹介しているサンプルコードへアクセスすることができます！サンプルコード(codesandbox) useEffectの中で前回のstateの値を取得したい理由React公式 では、以下のように説明されています。前回の props や state が欲しくなるというケースは 2 つあります。ひとつは、前回の props を副作...

【React】 useEffectの中で前回のstateの値を取得したい！

【TS】呪文：undefined as unknown as numberとは？先日、業務中にいつも親切に教えてくださる上司から、上記のundefined as unknown as numberという呪文を教わりました。まるで呪文のように、もしくは英会話の文法のように聞こえます。また、上司曰く、悪用は厳禁な呪文でもあるようです。それでは、この呪文の意味は一体なんなのか、またなぜ悪用厳禁な呪文であるのか、を理解していきましょう。 1. そもそも "as"とは？asは、型アサーションと言って、TypeScriptの型推論を上書きする機能になります。タイトルの例だと、undef...