ReactとGo言語の実務を2日経験して感じたことをまとめてみた

少しでも多くの方に読んでいただけるよう、用語の解説は適宜行います。

最初に「React」と「Go」について解説しておきます。

「React」はJavaScriptのフレームワークです。「コンポーネント（部品）」という考え方でHTML要素を組み立てることができます。

「Go」はGoogleが開発したプログラミング言語です。「Golang」「Go言語」という愛称で呼ばれることもあります。シンプルで高速な処理が可能と言われています。

今回どちらも実務未経験でしたが、ご縁があって案件に参画させていただくことができました。

参画している案件について

2021年7月現在、参画している案件の基本情報は以下の通りです。

業務内容	主にフロントはReact、バックはGoを用いてWebサービスの機能実装をおこなう
開発メンバー	エンジニア4名（自分含む）
開発言語	Go、TypeScript、JavaScript、HTML、CSS
フレームワーク	React
OS	Linux
その他	Docker、Git、VSCODE、ubuntu、Slack、Node.js

職場は都内のWeb自社開発企業になります。

二ヶ月ほど前、Reactの案件に参画したいと思い、独学しつつエージェント経由でReactの案件を探していました。案件探しをはじめて一ヶ月、ご縁があってエージェント経由で案件が見つかり、7月からReact/Goの現場へ入ることができました。

これまでは比較的レガシーな技術で、Web開発やシステム開発をしていました。今回の案件参画を機に、これからはモダンな技術へ移行していきたいと考えています。

2日経験して感じたことは？

この案件に参画してまだ2日しか経過していませんが、これまで経験してきた現場と違うころが多々ありました。それらをご紹介していきます。

会社の雰囲気について

今回入る事になった現場は、都内のWeb自社開発企業です。正社員が10名ほどの会社で、正社員でない方も合わせると、20名ほどの人数になります。僕がこれまでに入った現場は5社ありますが、今回の現場はこれまでと色々違う部分があって新鮮な気持ちで仕事に臨めています。

これまでに経験した現場は、従業員が100名を超えているところがほとんどでした。今回の現場は初めての10人未満の規模です。

開発について

主に「React」「Go」を用いてのWebサービス開発になります。ただ他にも、「TypeScript」「JavaScript」「HTML」「CSS」「Docker」「Git」「ubuntu」の知見は必要だと感じました。僕はこれまでに開発を5年ほど経験していましたが、「TypeScript」「Docker」「Git」「ubuntu」の経験はありませんでした。ソース管理は「Git」ではなく「SVN（SubVersion）」や「VSS（Visual SourceSafe） 」を使用してきました。ここらへんの新しく使うことになったツールは毎日業務で触れば徐々に慣れていくと思いました。

「設計 → コーディング → テスト → リリース」という開発工程がありますが、僕はその中で「コーディング」を担当しています。正直、未経験でコードを触らせてもらえるのはありがたいです。実務を経験すると日々の学習も方向性がある程度定まるので良きです。

React/Go案件に入る前にこれらを学習しておくべき

まだ2日しか業務に携わっていませんが、早くもこれらは学習しておくべきだというものを挙げてみました。

マークアップ言語（HTML/CSS）

Web開発を行う上でマークアップ言語の知識は必須です。Webサービスの見た目部分を作っているのは「HTML」と「CSS」になるので、これらは学習必須です。学べる教材は世の中に沢山あるので、無料のもので事足りると思います。

JavaScript

よく勘違いされますが「JavaScript」は「Java」とは全く違う言語なので注意です。

開発でReactを用いる場合、JavaScriptは基礎知識を身に付けておくことは必須で、あとは以下で紹介する関数（メソッド）もチェックしておいてください。実際の現場で登場した関数（メソッド）で、僕が勉強不足だったものをアウトプットがてら挙げてみました。

fetch（フェッチ）メソッド

「fetch」とは、和訳すると取ってくる、呼び出す、引き出すという意味になります。「非同期通信でリクエストを発行、そのレスポンスを取得（非同期通信という方法で、サーバ上になる欲しいデータを取得）」する事ができる関数です。

fetch("URL");

→URLへ非同期通信でリクエストを発行してレスポンスを取得する

論理演算子（&&, ||）

論理演算子は一般的には、&&（かつ）、||（または）という意味で使用されます。

サンプルコード

// 一般的な使用方法
const flag1 = true;
const flag2 = false;

if (flag1 || flag2) {
    console.log("1または2はtrueです");
}
if (flag1 && flag2) {
    console.log("1かつ2はtrueです");
}

ですが、「React」の開発に携わる場合、以下のような使われ方もあることを知っておいた方が良いです。

サンプルコード

const num = null;
const fee = num || "金額未設定";
console.log(fee);

// ||は左側がfalseの場合右を返す
// ||は左側がtrueの場合左を返す


const num2 = 100;
const fee2 = num2 && "何か設定されました";
console.log(fee2);

// &&は左側がtrueの場合右を返す
// &&は左側がfalseの場合左を返す

「aa === true」を満たす場合、「JSX」を表示するという意味です。

(aa === true) && (JSX)

React（Hooks：フック）

Reactの案件なのでReactの基礎知識は必須ですが、Hooks（フック）も理解しておきましょう。

Hooks（フック）とは、Reactのクラスコンポーネントでしか使えなかった「state」や「ライフサイクル」を関数コンポーネントでも使用できるようにしたものです。 以前までは、Hooksがなかったので、クラスコンポーネントを活用して、状態管理などをおこなっていました。

現場へ入る前にこれらの教材でReactを学習しましたが、実務でかなり役立ちましたのでおすすめです。

・Udemy「モダンJavaSciptの基礎から始める挫折しないためのReact入門 / じゃけぇ」
・Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版 / じゃけぇ」

Go言語

Go言語はGoogleが開発したプログラミング言語です。シンプルで高速な処理が可能と言われています。「Go」「Go言語」「Golang」と呼ばれます。

Go言語未経験でも、他のサーバサイド言語の経験があれば、キャッチアップはそこまで難しくないと感じました。

では、実務で使用した知識を紹介していきます。

TypeScript

TypeScriptは「型」を指定可能なJavaScriptといった感じです。略して「TS」ともいいます。

まだ読む程度しか触れていませんが、なんとなく読めるので問題ないと感じています。本格的に使用することになったら学習しようと考えています。

Git

Gitはプログラムソースの変更履歴を管理するバージョン管理システムです。

これは使用に慣れていた方が良いと感じました。基本的なGitコマンドは教材などで学習しておくべきです。

現場へ入る前にこれらの教材でGitを学習しましたが、実務でかなり役立ちましたのでおすすめです。

Udemy「GIt：はじめてのGitとGitHub/ 山浦清透」
Udemy「Git：もう怖くないGit！チーム開発で必要なGitを完全マスター / 山浦清透」

Docker

Dockerは非常に軽量なコンテナ型のアプリケーション実行環境です。

Gitと同様、これも学習必須だと感じました。基本的なDockerコマンドを使えるようにしておくといいでしょう。

現場へ入る前にこれらでDockerを学習しましたが、実務でかなり役立ちましたのでおすすめです。

・Udemy「ゼロからはじめる Dockerによるアプリケーション実行環境構築 / Kazuya Kojima」

JSON

JSONは「JavaScriptのオブジェクト記法を用いたデータ交換フォーマット」です。JavaScript、PHP、C++、Java、Pythonなど様々な言語でサポートされており、JSONを間に挟むことで各プログラミング言語間のデータの受け渡しが簡単にできます。

JSONは以下のように書かれます。このようなフォーマットで書かれるということくらいは知っておくといいでしょう。

[
  {"id" : "1", "name" : "Kashimura"},
  {"id" : "2", "name" : "Takahashi"}
]

サークルCI/CD

CI/CDは、作業 → テスト → 公開の流れを「自動化」する時に用います。

CIとは「Continuous Integration」の略で、「継続的インテグレーション」と訳します。「インテグレーション（=統合）」は、ソフトウェア開発の一連の工程（設計〜テスト）を表していて、これを継続的・正確・迅速に開発を進めることが可能になります。

一方CD とは「Continuous Delivery」の略で、「継続的デリバリー」と訳されています。一般的に「デリバリー」とは何かを届けることですが、今回は「配信」や「公開」の意味で使われます。何を「配信」するのかというと、開発テスト中のソフトウェアです。

CI/CDは、本案件でもこれから導入される可能性があるので、少しずつ学習しておこうと考えております。

コンピュータサイエンス基礎

コンピュータサイエンス基礎とは、コンピュータ周りの基礎知識です。現役エンジニアなら知っていた方がいい知識になるので、時間を見つけて学習することをおすすめします。おすすめの学習方法は、基本情報技術者試験のイラスト付き参考書です。こちらを一冊読むだけである程度は身に付けられます。

とりあえず今回はReactの実務を2日間経験して感じたことをブログ記事としてまとめてみました。もしこれからReactやGoの現場へ入ろうと考えている方の参考に少しでもなれば良いと思います。