注目のストーリー
エンジニア
Reactでローディング、エラー画面をササッと作る
はじめにWebアプリをつくるにあたって、メインではないけれども重要な要素があります。それが以下の2つです。ローディング画面→データ取得などに時間がかかるときに表示される。エラー画面→何らかの意図しない操作などがあったときに表示される。今回はこれらの画面をササッと作る方法を確認します。「ササッと」とはいえ、今回も全ソースコードを載せているので全体の文量は長めです。今回のゴールプルダウンで選択したデータを読み込むときにローディング画面を表示させます。不正なデータを選択された場合にはエラー画面を表示させます。事前準備実行環境本記事においては以下を使用しています。React：18.2.0Type...
Reactのライブラリを駆使して、それっぽいアンケートフォームを作ろう
はじめにReactには開発を便利にするための様々なライブラリがあります。今回はフォーム作成に欠かせないFormikと、キレイめなUIを作ってくれるMaterial-UIを使って実用的なフォームを作成する方法を確認します。長編です。今回のゴール以下のようなフォームを作成します。バリデーションも設定します。送信後にはメッセージも表示させます。一見すると複雑な処理が必要に思えますが、ライブラリを使うことでサクッと作ることができます。事前準備実行環境本記事においては以下を使用しています。React：18.2.0TypeScript：5.2.2Vite：5.2.2Node.js：18.20.2ライ...
useReducerって結局どうやって使えばいいの？という話
はじめにReactHooksの1つにuseReducerがあります。useStateと同じように状態を管理できるフックです。結構複雑なので、私は苦手意識を持っています。改めて基本構造を確認し、現場で使われる実践的なものがどのようなものかを確認していきます。useReducerの基本構造基本的には以下の形で使用します。const [state, dispatch] = useReducer(reducer, initialArg, init?)戻り値state:現在の状態が入っています。useStateでのstateと同じです。dispatch:stateを更新するための関数です。この関数...
Reactのコンポーネントの基礎をマスターする
はじめにReactでUIを構築するうえで、避けて通ることのできない最も重要なものがコンポーネントです。コンポーネントを使わないReactはありえないと言っても過言ではないほどです。そんなコンポーネントについて、概念や使い方を基礎からしっかり解説します。コンポーネントの基礎繰り返し使えるUIの必要性以下のような画面があるとします。ソースコードは次のようになっています。const Main = () => { return ( <> <div style={{ margin: "5px" }}> <button>ボタン</button> </div>...
Reactを覚えるために、ブラウザ上でじゃんけんしてみた
はじめに前回に引き続き、普段Javaを書いているわたしがReactで学んだことを共有します。今回はuseStateという情報を保持するための機能について確認します。じゃんけんをしたい唐突ですが、無性にじゃんけんがしたくなりました。以下のような仕様をみたすじゃんけんプログラムを作ってみます。・グーチョキパーの中から自分の手を選択する・自分の手を選択したタイミングで、相手の手がランダムで出力される・勝敗を表示する以下は画面イメージです。（左：初期表示/右：結果表示）画面の見た目を作るだけならJSXを利用して実装することができそうです。問題は、どのようにボタンのクリックに応じて画面の結果を変え...
Reactを知るために、あえてReactを使わずに実装するとどうなるのかを考えてみた
はじめに初めまして、仙台でバックエンドエンジニアをしている吉田です。簡単にまず自己紹介をすると、JOINT CREWには2023年の7月に入社し、入社当初からお客様のECサイトの開発に携わっています。その前は別の会社で5年間主にSESで色々なシステムの開発・保守を行っていました。最後の2年間は受託開発で建設系のWebシステムの改修をフロントからバックエンドまで担当していたので、メインはJavaですが、ふわっとフロント周りも触れる、といった感じです。今回はJavaScriptについては若干の理解がある私がモダンなJavaScriptライブラリとされるReactについて学んだ内容を少しだけ紹...
Developers Summit 2023 KANSAIに行ってみた
今回は、弊社エンジニアの足立さんによる Developers Summit 2023 KANSAI 参加レポートの代行投稿になります。（ご提供ありがとうございました！）❓ Developers Summit 2023 KANSAI とはデブサミ関西は、2011年から続く関西のITエンジニアのためのお祭りです。これまで、開発現場で一歩先の未来を築くためのきっかけを提供し、エンジニアコミュニティの絆を深める場として、注目の技術トレンドや関西企業の取り組みを発信し、エンジニア同士の交流を促進してきました。・・・https://event.shoeisha.jp/devsumi/20230902...
大手SIerからベンチャーに転職！インフラからWeb開発エンジニアへ！
人事部の三輪です。皆さんいかがお過ごしでしょうか？今回の社員インタビューはゴリゴリのインフラエンジニアからWeb開発者に転身した中村さんに、スキルチェンジをした感想や現状、当社のことをどう思っているか等々、ざっくばらんに伺ってみたいと思います。 ・ ・ ・三輪：中村さん、本日はありがとう御座います。中村：いえいえ、よろしくお願いします。（写真）いつ見ても爽やかな笑顔の中村さんです。三輪：では早速なのですが、 中村さんのこれまでの経歴を教えてください。中村：新卒で上場している大手SIerに就職しました。メガバンクのインフラ基盤PJで保守や新規PJのPMO業務を中心に経験を積...
私がエンジニアとしてJOINTCREWで働き続けている理由
こんにちは、人事部の三輪です。続いての社員インタビューでは、Webエンジニアの山下さんにお越しいただきました。一見エンジニアっぽくないですが、中身はバリバリのリケジョです。ストレートな物言いと鋭い考察力を持つ山下さん。タイトル通り「絶対SES業界では働かない！」と思っていた山下さんが、JOINT CREWで働いている理由を聞いてみたいと思います。三輪：山下さん、本日はよろしくお願いします。山下：あっ、よろしくお願いします。あがり症で緊張しています（汗）三輪：見えないですけどね（笑） 面接とかでは全くないので普段通りでお願いします。山下：頑張ります…（写真）まったく緊張している素振りを...
フリーランスと正社員を経験した私が辿り着いた先
皆さんこんにちは。(株)JOINT CREW人事部の三輪です。今回はエンジニア組織のマネージャーとして、マネジメントと技術支援を両立されている麻生さんにインタビューをさせていただきました。これまで12年のエンジニアキャリアを持つ麻生さん。キャリアを見据えた中で1度フリーランスにも転じた彼が、再度組織で働こうと思った理由とは？IT業界の変化を見てきたからこそ話せるエンジニアの方へのメッセージとは？三輪：お疲れ様です。すみませんお時間をいただき。麻生：いえいえ、大丈夫ですよ〜。三輪：ありがとう御座います。それでなのですがこれまでの簡単なご経歴を教えてください。麻生：はい、元々は異業種で働いて...
創業ストーリーと今後の展望について
皆さん、こんにちは（株）JOINT CREW人事部の三輪です。今回は創業ストーリーと今後の展望について、代表の村越に聞いてみたいと思います。少しでも当社のことを知って頂けますと幸いです。それでは、ざっくばらんに聞いてみたいと思います。創業ストーリーと今後の展望三輪：村越さん、お疲れ様です。村越：お〜三輪、お疲れ様〜。今日は何を話したら良いかな？（写真）JOINT CREWの代表の村越です。太ったり痩せたりと繰り返しています。三輪：ありのままで良いですよ、色々と質問させて頂くので教えて下さい。村越：了解！何でも聞いて下さい。三輪：では早速。創業に至った経緯を改めて教えてください！村越：もと...
