はじめに2024年は、フロントエンド以外の開発経験がない状態から、フルスタックに様々なチャレンジをさせていただきました😀弊社では、全エンジニアがフルスタック開発に取り組んでいます。詳細については、以下の記事をご覧ください。https://zenn.dev/x_point_1/articles/8e982be93ca26fこの記事では、僕の2024年の1年間の取り組みを振り返ります。 技術面※詳細を省き、簡潔にやったことを紹介します。 フロントエンド (React, TypeScript)ReactとTypeScriptを用いて、APIの繋ぎ込みやUI作成を行いま...

TypeScriptの痒いところTypeScriptの型システムは強力ですが、意図した型を推論できないケースもあり、any型や型アサーションを使わざるを得ないことがあります。しかし、これらを使用すると型安全性を失い、本来コンパイルエラーとして検出されるべき問題が見逃されてしまい、実行時エラーを引き起こす原因になります。コンパイルエラーは開発時に修正できますが、実行時エラーは本番環境で発生すると大きな影響を及ぼす可能性があり、回避したいものです。!おさらいany型が型安全性を損なう理由any型はすべての型を許容してしまうため、誤った型の利用によるエラーを見逃す原因になり...

はじめにエックスポイントワン取締役CTOの鈴木です。このたび弊社は、エンジニアのプラットフォームを提供するファインディ株式会社が運営する 「Findy Team+」利用企業を対象に、開発生産性が優れたエンジニア組織を表彰する「Findy Team+ Award 2024」 の「Team Award シーケンシャル開発アプローチ部門」に選出いただきました！受賞のご報告とともに、開発生産性の向上のための弊社の取り組みをご紹介させていただければと思います。 どのような取り組みをおこなったかタイトルからある程度内容は察していただけるかと思いますが、社内のエンジニアのフルスタック...

はじめにどうも、うみぶどうです。エックスポイントワンで働いているエンジニアです。近頃はモバイルアプリ開発に業務で取り組むようになりました。先日、開発中アプリをローカルサーバで動かしているうちは問題が起きないのですが、内部配布した開発用ビルドではうまく動かない、という状況に直面しました。Android端末本体からログを取得したいと考えたのですが、Expoを利用して開発を行なっていた、という事情もあり、ログ出力を確認するまでにいくつかハードルがありました。確認方法自体はUSB有線接続を利用したシンプルなものですが、一連の流れとしてまとまった記事を見つけづらかったため、記事を残す...

紹介することVisual Studio Codeなどで、変数にカーソルを合わせると、以下のように型情報が表示されます。このとき、Sampleという型名のままではなく、型の中身を直接表示させたほうが参照が楽です。例えば、次のように中身が表示されると便利です。この記事では、型情報を表示されるようにするテクニックをBefore/Afterの順で紹介します。 はじめに型情報の行数を増やすまず、型情報を省略せずに表示できるように設定を変更します。デフォルトの設定では、型情報が長い場合、以下のように省略されてしまいます。tsconfig.jsonの設定で、"noError...

ユースケースHeaderやFooterのようなコンポーネントで、ステータスや権限によってUIを変えたい場合、コンポーネントを分けるほどではないことがあります。そのような場合、propsで表示内容を切り替える方法が便利です。例えば、次のようなHeaderPropsを定義したとします。type HeaderProps = { title: string; leftButton?: React.ReactNode; rightButton?: React.ReactNode; onPress?: () => void;};今回の仕様は以下の通りです。a...

Reactと関数の関係Reactは、純関数であることを仮定して設計されているUIライブラリです。https://ja.react.dev/learn/keeping-components-pureであれば、Reactのpropsは関数の引数、ReactのUIは関数の戻り値と考えることができると思います。したがって、良い関数の定義と良いコンポーネントの定義は似ているのではないかという仮説を軸に、良いコンポーネントを考察します。 良い関数の定義から導いた良いコンポーネントfunction定義propsを明示的に書くコンポーネント名から何を表示するかわかるコンポーネン...

紹介することReactで開発する上でmemo,useMemo,useCallbackとどう付き合っていくべきかについて考察します。これらのメモ化技術をチーム単位でどのように取り入れていくかの方針を、具体に依存せず抽象的な観点から紹介します。 紹介しないことメモ化の各API、hooksの機能具体的な使い方、ユースケース 結論具体的な基準を設けず、コンポーネントや関数、値ごとにメモ化が必要かどうかを、各エンジニアが判断して実施するのが良いと考えます。まずはメモ化のメリットやデメリットを紹介し、それらを踏まえた上で上記の理由を紹介します。 メモ化のメリットとデメ...

紹介することReactにおけるts-patternの使用がもたらすメリットとデメリットを、可読性やパフォーマンスの観点から考察します。また、ユースケースやデメリットにどのように対処すべきかについても考察します。 ReactとパターンマッチReactは、関数型プログラミングのエッセンスをふんだんに取り入れているUIライブラリだと思います。宣言的なUIを持ち、純粋性を重視することから、Reactは関数型プログラミングに近い概念を採用しています。パターンマッチは、関数型言語の一つの機能として知られています。フロントエンド開発ではビジネスロジックを書く機会が少ないため、パター...

紹介することTypeScriptの型を厳密に定義し、ドメインモデリングを行います。ソースコードがドキュメントとして機能することを目指します。具体的には、Branded Typeやタグ付きユニオンなどの技法を扱います。この記事は、TypeScriptをこれから使いこなしてみたい方向けの内容です。 紹介しないことドメイン駆動開発や関数型プログラミングの概念については、深くは触れません。 Make Illegal States Unrepresentableあり得る型だけを定義するという考え方です。詳細は以下を御覧ください。https://fsharpforfunan...

どんな人が読むと良い記事か？Reactで実装はできるけど、もう一段階良いコードを書きたいと思っている方向けです。 扱わない内容フックについてESLintの設定で概ねルール化できるかつ、React公式でわかりやすく解説されているので、チェックリストには入れませんでした。https://ja.react.dev/reference/rules/rules-of-hooksuseMemo、useCallback、memoなどのメモ化についてメモ化することによってのパフォーマンス上の影響はそこまで大きくなく、優先的に実施するものではないと思ったので、チェックリストには入...

扱わないことこの記事では具体的なReactディレクトリ/コンポーネント設計を扱いません。具体的なデザインパターンも扱いません。 では、何を紹介するのか？Reactの思想とSOLID原則を用いると、どのようにReactディレクトリ/コンポーネント設計を考えることができるのかを考察したいと思います。SOLID原則はいかなるシステム開発においても転用できる原則だと思います。更に、Reactディレクトリ/コンポーネント設計は複雑になりがちで、TypeScript、状態管理ライブラリ、CSS、コンポーネントライブラリ、フェッチライブラリ、テストライブラリと考えることが多く、ケースバ...

※タイトル盛りすぎたかもしれません。 スキーマ駆動開発とはスキーマを最初に定義しておき、その定義を元にバックエンド、フロントエンドを開発します。スキーマは、ここではAPIの仕様のことで、エンドポイント、メソッド、リクエスト、レスポンスなどの定義を指します。バックエンド、フロントエンドが別れているアーキテクチャには親和性が高いと思います。そう考える理由(メリット)は以下です。バックエンド、フロントエンドでAPI定義の齟齬がなくなる最初にスキーマ定義すれば、バックエンド、フロントエンド同時に開発できる Fastifyでのスキーマ駆動開発の進め方 環境今回は、フロ...

※言語ごとのオブジェクト(json)のことをこの記事では辞書と呼びます。 はじめにReactでreact-i18nextを使用して多言語対応をしています。そこで使用している辞書運用のベストプラクティスを模索しました。導入時の初期設定などは省きます🙇‍♂ よくある実装(工夫前)例えば、日本語と英語対応したいと思ったときに、以下のような実装がよくあると思います。 ja.json 日本語の辞書{ "profile": { "name": "名前", "email": "メールアドレス", "password": "パスワード" }, "...

はじめにアプリケーションを構築する際、キャッシュを導入することでパフォーマンスの向上やユーザビリティの向上といった点が期待できます。今回はAWSリソースで構築されたシステムに対してAWS Elasticacheを用いてサーバーサイドキャッシュを構築したのでその手順をまとめます。 キャッシュの種類キャッシュは読み込み頻度が高く、書き込み頻度が低いデータに対して利用されることが多いです。また、消去が許容されるものであることも重要な基準になります。しかし、キャッシュとして保持しておくデータは性質によって保持する場所を考えなくてはなりません。保持する場所はユーザー側で保持する...

Vite、React、TypeScript、TanStack Routerの構成でファイルベースルーティングを実装しました。ここでは、TanStack Routerによるファイルベースルーティングの基本的なルールや、今回利用した機能を紹介します。 TanStack Routerでのファイルベースルーティングとはファイルベースルーティングは、ファイルシステムの構造に基づいてアプリケーションのルーティングを自動的に生成する手法です。ルーティング設定を明示的に書く必要がなく、ファイルとフォルダの構造だけでアプリケーションの構造を定義できます。例：src/routes/about.tsx...

はじめに社内業務システムなどでECSを夜間、休日止めたいケースは往々にしてあるかと思います。ECSを止める方法はいくつかあるようなのですが、少工数の方法を探した結果、オートスケーリングを使用してECSを止める方法が良いと思いました。 他の方法EventBridge、Lambdaを使う一番紹介されている記事が多い気がします。実際に作っていないので分からないのですが、オートスケーリングよりは工数掛かりそうな気がします。CloudWatch、EventBridge、SSMオートメーションを使うSSMオートメーション[1]は、タスクの実行をしてくれる機能です。デフォルト...

経緯GitHub AcionsでCI/CD環境を構築しています。その実装の中で、サードパーティ製のgetsentry/action-github-app-tokenを使用してトークンの取得をしていました。いつメンテンナンスがなくなるか分からないサードパーティ製の危うさから、公式から出ているactions/create-github-app-tokenに移行することにしました。!※getsentry/action-github-app-token[1]とactions/create-github-app-token[2]はそれぞれ公式が読みやすいので、初学者の方が公式を読む練...

こんにちは、Ryotaです。今回は業務内でぶち当たった壁、React/TypeScriptのコンポーネントでMP3をimportする方法についてです。「いや、インポートしたらええやん」って感じなのですが、それだけだと実は全く相手にして貰えないので(笑)そこを乗り越える為に必要だった事を備忘録として記します。同じ目に遭ってる方の参考になれば幸いです。 今回の目的現在業務の中でモバイルアプリ開発を行っておりReact Nativeを使用しています。そんな中でAPIを叩き、ステータス200が返ってくれば成功、キラリーン〜という効果音を出すというのが今回の目的です。 立ちはだか...

はじめに🐣こんにちは！ X.1の山﨑です。普段はQAエンジニアとして日々業務をしております。現在X.1ではQAエンジニアを大大大募集中です！でもでも、QA業務ってなにしてるのかちょっとわかりにくいですよね？なので今日は、X.1でのQA業務について詳しくお伝えしたいと思います！QAエンジニアって実際に何をしているのか、どんな役割を果たしているのか、一緒に見ていきましょう！ X.1でのQA業務を紹介💁‍♀️実際にわたしがX.1で行なっている作業に関して、一部紹介したいと思います！ 要件定義のレビュー👀要件定義をレビューしていきます！要件定義とは、顧客の要望をヒ...