ID:57581さん

自己推薦一覧

自己推薦はありません

3年後の目標や野望


社会の課題を具体的な技術で解決するソフトウェアエンジニアになる

日本はITに関する課題が多く、業務が効率化されていなかったり自分の本来の能力、強みに気づかないまま働いている人が多いと感じております。 そのため、業務効率化や人間のさらなる可能性を伸ばすようなソフトウェアを開発、またはその開発に携わることで社会に貢献していきたいと考えております。

年収評価シート

2021年/半年以内

ワクチンパスポートアプリ、及びその管理画面の開発

# ``1・【概要】`` 某大学教授からの依頼を受け、ワクチンを二回摂取した人向けに顔写真や摂取証明書の情報が記載されたワクチンパスポートを表示する機能、及び病院側で摂取者の情報や写真の管理ができる管理画面の機能を持ったアプリケーションの開発。 アプリケーションの技術選定及びフロント、バックエンドの開発、インフラの構築。 # ``2・【チーム構成、規模】`` フロントエンド: 2 バックエンド: 2 【自分の役割】 ・フロントエンド、バックエンド技術選定及び開発環境、テスト環境構築 ・フロントエンド、バックエンド両方の実装担当 # ``3・【詳細】`` この案件では私がアプリケーションの設計を行いました。 技術選定を行う上で以下のポイントを重視しました。 ## ●フロントエンド ・静的型付け言語で型の不整合等を事前に検出し開発効率を上げる ・コンポーネントは凝集度を高く保つために機能毎に細かく分割し、複数の機能を持たないようにするとともに、テストを行いやすいようにする ・CSSはグローバルに参照するような書き方をせず、コンポーネントごとにスコープし、スタイルの競合や意図しない参照を防ぐ ## ●バックエンド ・静的型付け言語で型の不整合等を事前に検出し開発効率を上げる ・速度をシビアに求められるような要件ではなかったため、実行速度よりも開発効率を重視する ## ●開発環境構築(インフラ) ・人によって開発環境の動作が異なったりすることを無くすために、コマンドを入力するだけで同じ環境が構築できるように目指す 上記の項目を満たすために以下の技術を選定しました。 ## ●フロントエンド  ●React  ・ライブラリ独特の文法が少なく、基本的にJavascriptの文法を使用してUI部分のコードが記述できる  ・凝集度の高いコンポーネントを作成でき、Typescirptと合わせて使うとコンポーネントのPropsの型を事前に定義すること等によって保守性の高いコンポーネントが作成できる。   ●TailwindCSS  ・ユーティリティクラスが豊富  ・スタイルを直接記述することによってコンポーネントごとにスコープされたスタイルを記述することが可能になる ## ●バックエンド   ●Ts-Node  ・静的型付け(Typescript)の恩恵を受けられること  ・フロントエンドと使用言語を揃えることで開発効率の向上を図る  ・インタプリタ言語の中では高速な部類に入る ## ●開発環境構築   ●Docker,Docker-compose  ・DockerFile、Docker-compose.ymlに予め開発環境の情報を記述しておくことによって、コマンドを入力すれば環境を構築できるような状態を目指す # ``4・【実装した主な機能】`` ## ●フロントエンド ## ・モーダル表示機能 【どのような機能の開発・実装か】 ・登録、変更、削除する前に「登録します、よろしいですか?」のようなメッセージ付きの確認モーダルを表示する機能及びそれらが成功、失敗した時に「登録に成功(失敗)しました」のようにメッセージを表示するモーダルの実装 【課題・問題点】 始めは上記の機能をコンポーネント化(確認モーダルは「ConfirmModal」、了承専用モーダルは「ApproveModal」)し、ReactHooksでページごとにその都度呼び出すような方式で実装していたが、毎回PageComponentに該当コンポーネント及びuseStateによる状態を付与していたためコードが冗長になってしまった。 これを解消するためContextAPIを使用し、Providerで囲んだコンポーネントに確認、了承モーダルを呼び出す状態を付与し、呼び出せるようにした。 【使用した技術】 ・createPortal ・useReducer ・createContext, useContext 【上記の技術をどのように使用したか】 ・了承モーダルは``useApprove``というカスタムフックを作成しContextのプロバイダに渡す。使用する際はuseContextでインポートし使用する 使用例: ``` const { setApprove } = useContext(approveContext); setApprove('登録に成功しました。'); ``` ・確認モーダルは開閉時の状態やアクションを定義したreducerをuseReducerでContextのプロバイダに渡す。使用する際は``confirm``の関数を呼び出す。 ``` const { confirm } = useConfirm(); const isConfirmed = await confirm( '登録します、よろしいですか?', ) if (isConfirmed) { //了承時の処理 } ``` 【この機能の工夫点】 ・window.confirm, window.alertのように少ないコード記述量でモーダルを呼び出せるようにしたこと。 ## ・React-webcamでの画像撮影機能 【どのような機能の開発・実装か】 React-webcamでキャプチャしたスクリーンショットを画像に変換し、formDataに登録する機能。 【課題・問題点】 React-webcamでキャプチャしたスクリーンショットがbase64文字列になっているため、それを画像に変換する必要があったこと。 【工夫した点】 ボタンをクリックして撮影するデバイスを「外付けカメラ」「内蔵カメラ」と切り替えられるようにしたこと ## ・PrivateRoute機能 【どのような機能の開発・実装か】 ・管理者側管理画面と病院側管理画面のPrivateRoute機能(未ログインユーザーはどちらもアクセスできず、管理者は病院に、病院は管理者画面にアクセスできないようにする機能) 【使用した技術】 ・react-Router ・swr 【上記の技術をどのように使用したか】 ・PrivateRouteには使用時「'Admin'」か「'Hospital'」のPropsを渡す ・登録されているDBのデータには「Role」というカラムがあり「Admin」か「Hospital」が格納されている ・ページ遷移する際に必ずバックエンドにリクエストを送り、バックエンドはリクエストにcookieが含まれているかどうか確認する。無い場合はログインページ(propsがAdminならば管理者ログインページ、Hospitalならば病院ログインページ)へリダイレクトする。 ・cookieがリクエストに含まれている場合はレスポンスのユーザー情報の「Role」を参照し、ユーザー情報のRoleとPropsが一致するか確認する。 ・一致する場合はページ表示、一致しない場合はpropsに対応するログインページへリダイレクトする 【この機能の工夫点】 ログインした後も管理者は病院ページに、病院は管理者ページにアクセスできないようにした点 ## ・QRコード機能 【どのような機能の開発・実装か】 ・ワクチンパスポートを登録したユーザーがQRコードを自分で読み取るor読み取ってもらってワクチンパスポートを表示させるようにする機能 【使用した技術】 next-qrcode 【この機能の工夫点】 作成されたQRコードが「img」ではなく「canvas」だったため、そのままではiOSやAndroidのサイト内読み込みができなかったため、cavasをimg要素に変換してサイト内読み込みを可能にしたこと。 ## ●バックエンド ## ・画像を合成し一枚の画像にし、S3に保存する機能 【どのような機能の開発・実装か】 ・リクエストで送られてきた複数の画像を合成して一枚の画像にしてからS3に保存。 ・画像名はハッシュ化してからクライアント企業が開発していたブロックチェーンサーバーに保存する。 ・ブロックチェーンに保存した後はブロックチェーンサーバーから問い合わせ用のIDが来るのでそれをユーザーのデータに登録。 【仕様した技術】 ・sharp ・@aws-sdk/client-s3 ・ioRedis 【課題・問題点】 S3の画像に保存する操作は良かったが、S3から特定のオブジェクトを取得する操作がaws-sdkのv2とv3で大きく異なっており、また公式ドキュメントも不親切かつ情報も日本語英語問わずかなり少なかったため実装するのに苦労した。 【この機能の工夫点】 ・画像名をブロックチェーンに保存した後ブロックチェーンから問い合わせ用IDは別リクエスト&いつ来るかはっきりと決まっていない(ブロックチェーンサーバーはブロックチェーン内すべてのノードに情報を登録した後に問い合わせ用IDを送るので、ノードの数等によって登録時間がまちまちになる)ので、登録が完了した後にレスポンスで来るacceptKeyとuserIdの組み合わせをRedisに保存し、別リクエストでacceprKeyと問い合わせ用のIDが来た時にuserIdと関連付けができるようにした点 ## ・ログイン機能 【使用した技術】 ・cookie-parser ・jwt ・express ## ・メール送信機能 【使用した技術】 ・node-mailer # ``5・【出したバリュー】`` ・大きなバグが無く、一ヶ月半程度で実装を完了させることができ、テスト工程に余裕を持って進むことができたこと ・予め使うUIパーツ(ボタン、テーブル、テキスト入力欄等)はコンポーネント化して開発メンバーに共有することで他の開発メンバーは部品を再利用するだけでページを作成できるようにしたこと ・Dockerを使用したことで開発環境構築時に開発メンバー間で不具合が無く環境構築ができたこと # ``6・【この案件から自分ができること】`` ・React+Typescriptを使用したフロントエンド開発 ・React-testing-libraryを使用したフロントエンドの結合テスト ・再利用性の高いUIコンポーネントを作成することによる開発効率の向上 ・Typescriptを使用したバックエンド開発 ・Jestを使用したバックエンドの単体テスト

プロジェクトカテゴリ
担当工程
経験した職種・役割
あなたが実際に使っていた技術
このプロジェクト詳細は公開されていません

マネージメント能力

アピール項目


アウトプット

GitHub アカウント
あり
Qiita アカウント
あり
Zenn アカウント
未入力です
Speaker Deck アカウント
未入力です
SlideShare アカウント
未入力です
特にアピールしたいアウトプット
未入力です

今後、身につけなければいけないと思っている技術は何ですか?

●Rust ・コンパイラが厳格で、事前にエラー等を検出してくれる ・非常に高速に動作すること ・文法が洗練されていて、書いていて楽しい(難しくもある) ・Nextjsのコンパイラに採用された実績から、将来自分がフロントエンドのツールやライブラリを作成する時にも役に立つかもと考えている ●WebAssembly 今はまだ技術的に成熟してはいないが、フロントエンドで処理が思い箇所は部分的にWebAssemblyを使用したり、将来的にはJavascriptを代替する可能性もあるかもしれないと考えている ●GraphQL ・スキーマ定義により厳格な型付けが可能なこと ・↑でスキーマ定義をするため、PlayGroundにクエリやミューテーションがどの引数を取りどの値を返すか等が確認できるようになるため、バックエンドエンジニアがAPIリファレンスを作成しなくてもよくなり、フロントエンドエンジニアが使用する際もPlayGroundを確認すれば良くなる等、開発時の効率向上が見込める ・フロントエンドで取得する際に必要なデータだけを選んで取れる等の柔軟性

あなたが一番パフォーマンスを出せるのはどんな環境ですか?

静かで、自然の多い環境

キャラクター

直近で一番やりたいこと
技術を極めたい
好きなスタイル
好きな規模
水とプログラミングどっちが大事?
自信を持って人より秀でていると言える点
学習能力 / プレゼン力 / 問題解決力
スキルのタイプ
得意なフェーズ
会社を選ぶ一番の基準
好きなプロダクトがある
やりたくない分野
未入力です
その他の特徴
新しい技術はとりあえず試す / 多職種のバックグラウンドがある
その他のやりたいこと・やりたくないこと
未入力です

やりたい事

手を動かして設計してコードを書きたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
価値あるプロダクトを作り成長させたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
学び続けて技術力でプロダクトに貢献したい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
意義があることや社会に貢献できる仕事がしたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
人や計画の調整・マネジメントをしたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
レガシーなシステムの保守・運用・改善をしたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
企画や仕様を考えるところから関わりたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
業務効率を改善して一緒に働く人のためになりたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
全社横断的な共通基盤作りや強化をしたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい
組織や文化を作る・成長させる仕事をしたい
絶対やりたくない
あまりやりたくない
別に普通
やりたい
絶対やりたい

基本プロフィール

年齢
今年で30代中盤
好きな Text Editor
VSCode
希望勤務地
リモート勤務
常時リモートが必要
希望年収
450万円以下
転職ドラフトに参加して
企業から指名を受け取ろう!
会員登録をして転職ドラフトに参加すると、参加企業から年収付きの指名を受け取ることができるようになります。
会員登録する
ご意見箱

要望、不具合報告、使いづらい点や感想など、お気軽にお寄せください。
いただいたご意見は、今後のサービス向上に活用させていただきます。

なお、このフォームは受付専用のため、返信を行っておりません。
返信を希望する場合はお問い合わせよりご連絡ください。

  • {{error}}
ID:57581さん
今年で30代中盤
VSCode
参加ステータス
不参加
参加回数
1回
累計平均提示年収
555 万円
SIGN UPSIGN IN


転職ドラフトを友人や同僚に薦める可能性はどのくらいありますか?