JavaScriptのフレームワークであるReact.jsの案件2つ目が今月で終わるので、React.jsの開発現場で8ヶ月業務してみて学んだこと、またそれに加えて、なぜReact.jsの開発現場に入るようになったのか、単価について、今後の課題、あたりもまとめておこうと思います。
これからReact.js等のモダンな開発現場に入る方、スキルチェンジしようとしている方の参考になれば嬉しいです。
はじめに
そもそも私カシムラについて知らないと思いますので、これまでのキャリアを簡単に書かせていただきます。
- ソフトウェア開発企業：３年３ヶ月
- フリーランスエンジニア(2022年2月現在)：１年８ヶ月
専門学校（情報系）卒業後、新卒でソフトウェア開発企業へ入社して、いろいろあって入社4年目に退職してフリーランスになりました。
これまでに経験したプログラミング言語やフレームワークについては下記の通りです。
ソフトウェア開発企業（3年3ヶ月）
■Web系
- HTML / CSS
- JavaScript
- ASP.NET
- VB.NET
- SQL（Oracle）
■業務系
- VB.NET
- SQL / PLSQL（Oracle）
フリーランスエンジニア（1年8ヶ月）
案件1(Web系)：ECサイトWeb制作
- HTML / CSS
- JavaScript
- PHP
- WordPress
案件2(業務系)：健康診断カルテシステム開
- VB.NET
- SQL（MySQL）
案件3(Web系)：就活マッチングSNS開発
- HTML / CSS
- JavaScript
- React.js
- Node.js
- Golang
- SQL（MySQL）
- Firebase
- GCP
- Docker
案件4(Web系)：制御系アプリ開発
- HTML / CSS
- TypeScript
- React.js(Next.js)
- Redux
- Node.js
案件5(Web系)：大手Webアプリ開発(2022年3月〜)
- HTML / CSS
- TypeScript
- React.js(Next.js)
- GraphQL
- Nest.js
- AWS
長くなりましたがこんな感じです。
正社員時代はWeb系と業務系の開発をしていましたが、フリーランスに転身してからはWeb系の開発に携わることが多いです
上記案件2のときにReact.jsに興味を持ち、仕事しながら独学して、エージェント(営業)さんにReact.jsの案件を探してもらっていました。
1ヶ月くらい探していただいた結果、ご縁があってReact.jsの案件(上記案件3)に入ることができました。
なぜReact.jsの開発現場に入るようになったのか
まずReact.jsの開発案件に入って正解だったか？
これは「Yes」です
ではなぜ急にReact.jsに興味を持ち、開発現場に入るようになったのか。
理由はいくつかあります。
理由：これまで自分が経験してきた技術よりReact.js等のモダンな技術の方がこの先伸びていくと思ったから
まずはこれです。
フリーランスになった当初はモダンな技術に興味はなく、これまで経験したVB.NETやASP.NETの案件に関わっていければ良いと思っていました。
しかし案件をこなしながらTwitterやWantedlyで情報収集をしていると、度々目にするには「React.js」「Vue.js」「Ruby on Rails」「Laravel」「Go言語」といった聞き慣れない言語の名前でした。
最初は興味がなかったのですが、だんだん気になって調べるようになり、今後を考えてモダンな領域へ挑戦してみてもいいかなーと思うようになり、いろいろあった末モダンな技術にスキルチェンジしました。
この辺は人それぞれ好きな技術、言語あると思うので、「あ、そうなんだー」くらいで聞き流してくれればOKです。
理由：React.jsの勉強を開始してすぐ魅力に気付いたから
上記案件2の時期に、空いた時間を利用してReact.jsの勉強をしていました。
具体的に勉強していた教材は、Udemyのじゃけぇさん( https://twitter.com/bb_ja_k )の講座です。
元々Web開発の経験はあったのですが、素のJavaScriptしか触ったことがありませんでした。しかもどちらかというと苦手でした。
しかしReact.jsの勉強を開始してすぐその魅力に気づきました。
React.jsはHTMLやJavaScriptを部品化(コンポーネント化)して管理できる。呼び出したい時はタグのように記述すれば呼び出せる。なんて面白いフレームワークなんだと思いました（笑）シンプルに触っていて楽しかったです。そこからどんどん魅力にハマっていきました…。
理由：単価や希少価値などに更に魅力を感じたから
これまでに経験した技術よりもモダンな技術の方が単価が高いという点や、React.jsなどのモダンな技術を扱えるエンジニアには希少価値があると思ったという点です。
この辺は意見が分かれてくると思うので「あ、そうなのかー」くらいで思っていただければと思います。この点はモチベーションにもなっています。
理由：実際にReact.jsの現場に入ってみたら環境が自分に合っていた
React.jsを開発の技術スタックに取り入れている企業は、ベンチャー企業や新しい技術に前向きな企業が多いという印象でした。
私もこういう方達と一緒に仕事がしたかったので、環境が自分に合っていると思いました。
単価について
まず結論から言いますが具体的な金額は教えません。
ざっくりになりますが、現場が変わる度に5〜10万ずつ上げていただいてます。
エンジニアの単価は、フロントエンドだけでなくバックエンドもできたり、インフラもできたり、リーダー経験もあったりすると高くなっていきます。また経験年数にも応じて高くなっていきます。そのためより多くの経験を積むことが大切です。
React.jsの開発現場で8ヶ月業務してみて学んだこと
学んだこと(技術)
フロントエンド
- HTML / CSS
- JavaScript
- TypeScript
- React.js / Next.js
- Redux
- Prettier / ESLint
- Jest
- Cypress
バックエンド
- Node.js
- Golang
- GORM
- SQL(MySQL)
インフラ
- Firebase
- GCP
その他
- Git / GitHub / Sourcetree
- Docker
- Subversion
- Ubuntu
- Postman
- Swagger
学んだこと(担当業務)
就活マッチングSNS開発の案件ではフロント+バック+インフラ(ちょっとだけ)を担当
この案件は週5出社で、現場は正社員10名以下のベンチャー企業でした。エンジニアはうち3名です。
既にリリースしている自社Webアプリの機能追加、改修が主な業務でした。開発スタイルはアジャイルで、ドキュメントは作らずに、機能単位で要件定義→実装→テスト→リリースを高速で回していく感じでした。
初めてのReact.jsやGolangの案件だったのでフォローいただくこともありましたが、社員のエンジニア3名の方々もエンジニア歴1年くらいだったので、私が技術的なアドバイスをすることもありました。これまでに経験した知識が活かされたので嬉しかったです。
この現場で仲良くなったエンジニアさんとは最近も連絡を取り合っています。このようなご縁は大事にしていきたいです。
制御系アプリ開発の案件ではフロントを担当
この案件はフルリモートで、会話は基本チャットかZoomです。開発チームは4名体制です。
フロントエンドの要件定義、画面設計、実装、テストコードまで担当しました。フロントエンドに関してはほぼ一人称での開発だったので、この案件を通してかなり自信がつきました。
この案件で初めてテストコード(Jest, Cypress)を書きました。これまではExcelでテスト仕様書を作成して、エビデンスをペタペタ貼り付けるテストしかやってこなかったので、新しい刺激を得ることができました。
学んだこと(知識)
React.jsもTypeScriptも結局はJavaScriptの基礎が大事ということ
特にReact.jsではJavaScriptの基礎知識が求められます。
この記事にも演算子がまとまっていますのでこちらも参考にしてみてください。
JavaScriptのコレは押さえておくとイイ①三項演算子
条件を満たす場合は値1を返す、条件を満たさない場合は値2を返す、という演算子です。
if文と似ていますがJSX(またはTSX)の中に判定を記述したい場合は三項演算子を使用する必要があります。
条件 ? 値 1 : 値 2
JSXとは？
React.jsの用語です。JavaScriptの中にHTMLを記述することをいいます。
TypeScriptの中にHTMLを記述することは「TSX」といいます。
JavaScriptのコレは押さえておくとイイ②論理演算子（&&, ||）
「&&」は論理積といいます。expr1 を false と見ることができる場合は expr1 を返す、条件を満たさない場合は expr2 を返す、という演算子です。
expr1 && expr2 両オペランドが true であれば && は true を返し、そうでなければ false を返す、という意味もありますが、React.jsでは前者の意味で覚えておくと良いです。その理由は以下のような用途があるからです。
expr1 && (
// JSXを記述
)これは expr1 がtrue の場合は JSXを表示する という意味になります。
「||」は論理和といいます。expr1 を true と見ることができる場合はexpr1 を返す、条件を満たさない場合は expr2 を返す、という演算子です。「&&」よりは重要ではないですが区別して覚えておくと良いです。
JavaScriptのコレは押さえておくとイイ③分割代入
オブジェクトからデータを抽出するとき、一行で値を受け取ることができます。
var colors = ['red', 'blue', 'green'];
// 分割を行わない代入
var val1 = colors[0];
var val2 = colors[1];
var val3 = colors[2];
// 分割代入
var [val1, val2, val3] = colors;JavaScriptのコレは押さえておくとイイ④スプレッド構文
オブジェクトに用いるとプロパティと値の組み合わせを展開して取り出すことができます。
const rect = {type: 'rectangle', width: 100, height: 30};
const rectClone = {...rect};
console.log(rectClone); // {type: "rectangle", width: 100, height: 30}JavaScriptのコレは押さえておくとイイ⑤fetch(フェッチ)メソッド
「fetch」とは、和訳すると取ってくる、呼び出す、引き出すという意味になります。非同期通信でリクエストを発行して、そのレスポンス（サーバ上のデータ）を取得することができる関数です。
以下のように記述することで、URLへ非同期通信でリクエストを発行してレスポンスを取得することができます。
fetch("URL");非同期通信とは？
ブラウザとサーバ間の通信では、リクエストとレスポンスのやり取りが発生するのですが、通常の場合これは「同期通信」になります。「同期通信」は、レスポンスが返ってくるまで待ち続けないと他の処理を行なうことができません。
「非同期通信」はレスポンスが返ってくる前に他の処理を行なうことができます。
ちなみにReact.jsでは「Axios」というライブラリで非同期通信処理を組むことが多いです。興味がある方は調べてみてください。
私も記事を書いています
https://qiita.com/kashimuuuuu/items/678edae783228f888893
Hooks(フック)にはメリットが多い
Hooks（フック）とは、Reactのクラスコンポーネントでしか使えなかった「state」や「ライフサイクル」を関数コンポーネントでも使用できるようにしたものです。 以前まではHooksがなかったので、クラスコンポーネントを活用して、状態管理などをおこなっていました。
代表的なHooksをまとめておきます。
| Hooks | 説明 |
|---|---|
| useState | クラスコンポーネントの使用しなくてもState管理ができる |
| useEffect | 副作用と呼ばれ、レンダリングの後に処理を動作させることができる |
| useMemo | 値の不要な再計算をスキップすることで、パフォーマンスの向上が期待できる |
| useCallback | React.memoでメモ化したコンポーネントにuseCallbackでメモ化したコールバック関数を Props として渡すことで、コンポーネントの不要な再レンダリングをスキップできる |
| useHistory | ページ遷移の履歴に対して宛先を追加する、要するにページ遷移で使用する |
アトミックデザインの採用
フロントエンドのコンポーネント設計の一つである「アトミックデザイン」にもとづいてコンポーネントを管理すると、プログラムの保守性が上がりました。
アトミックデザインとは、コンポーネントを「Atoms(原子)」「Molecules(分子)」「Organisms(有機体)」「Templates(テンプレート)」「Pages(ページ)」の5つのレベルに分けて管理する手法です。
この手法は賛否両論があるので、使う場面はプロジェクト毎に検討すると良いです。
モダンな技術は現場の人でさえ1〜2年の経験しかない
現在は社員数が多い企業でフロントエンドエンジニア(React.js+TypeScript)として開発していますが、モダンな技術について知見がある人が周りに少ないと感じました。
そのため1〜2年の経験があるだけでエンジニアとしての価値は十分に高まるのかなと思いました。
今後の課題
技術
技術での課題は沢山あります。モダンな技術で開発するようになってまだ8ヶ月です。
モダンな技術に関してはフロントエンド(React.js, TypeScript)は濃く関わることができたけど、バックエンドやインフラに関してはまだまだ経験が不足しています。どのスキルを伸ばしていくかがまだ決まっていないというのもあります。
ちなみに2022年3月から入る案件はフロントエンドもバックエンドもTypeScriptです。この案件で業務しつつ、これからのことも少しずつ考えていきたいと思います。
社会人スキル
確定申告を行なったり、とある企業さん主催の確定申告セミナーに登壇したりといろんなことを経験できています。足りていないのは交流かな…と思います。経営者さんやエンジニアさんともう少し交流を増やしていきたいです。
ちなみに登壇したときの動画はこちらをご覧ください。
まとめ
ここまで読んでくださって本当にありがとうございました！
結論エンジニアは楽しくてやりがいのある職業だなーと5年経験して感じています。
2022年4月からエンジニア6年目に入ります。
正社員時代は会社に馴染めず「自分この職業向いていないんじゃないか？」と思って仕事を変えようとしたこともありました。結果的に正社員は辞めてしまいましたが、なんとかここまで技術職をやってこれてよかったと思っています。
これからもアウトプットしていきますので、どうぞよろしくお願いいたします！
では改めてこの記事をご覧いただきありがとうございました！
コメント