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

Go言語
かしむら
かしむら

こんにちは、かしむらです。

都内常駐の開発フリーエンジニアです。

2021年7月現在はReact/Goを使っています。

・エンジニア歴5年

・朝もくサロン運営

・突き抜けエンジニアサロン講師

・Twitter(フォロワー2,000名以上)で情報発信

・インスタグラムで基本情報技術者の対策資料投稿

など色々やっている人です。

この記事では、おもにサーバサイドを経験しているエンジニアが『React/Go』の開発現場へ常駐して2日経って感じたことや学んだことをまとめてみました。

この記事はこのような読者を対象に書いています。

・React、Go言語を使用している企業で働こうと考えている人

・React、Go言語を学ぶ前に何を学習していいか分からない人

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

かしむら
かしむら

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

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

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

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

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

まず、現在参画している案件の基本情報はこのようになっています。

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

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

2ヶ月ほど前、Reactの経験が全く無い状態から参画できるReactの案件を探していました。「1年以内に”未経験OK”の案件に参画できればいいな」と考えながら毎日学習をしていました。そしたら1ヶ月前に仕事の話をいただく事ができて、7月から『React』『Go』の現場へ入ることができました。

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

2.2日経験して感じたことは?

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

2−1.会社の雰囲気について

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

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

2−2.開発について

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

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

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

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

3−1.マークアップ言語(HTML / CSS)

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

3−2.JavaScript

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

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

3−2−1.fetch(フェッチ)メソッド

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

かしむら
かしむら

「非同期通信」とは

ブラウザとサーバ間の通信では、リクエストとレスポンスのやり取りが発生するのですが、通常の場合これは「同期通信」になります。「同期通信」は、レスポンスが返ってくるまで待ち続けないと他の処理を行う事ができません。

「非同期通信」はレスポンスが返ってくる前に他の処理を行うことができます。

コード記述方法

fetch("URL");

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

3−2−2.論理演算子(&&、||)

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

サンプルコード

// 一般的な使用方法
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の場合左を返す

現場のReactには以下のようなコードがあります。「aa === true」を満たす場合、「JSX」を表示するという意味です。

(aa === true) && (JSX)
かしむら
かしむら

「JSX」とは

JSXとは、Reactの用語で、JavaScriptの中にHTMLを記述することをいいます。上記の場合、「aa === true」が成立する場合「JSX」を返す、つまりHTML要素を画面に表示するといういみになります。また、「aa === true」が成立しない場合「aa === true」を返す、つまり画面へ何も表示しないという意味になります。

説明が難しくて申し訳ありませんが、ひとまずJavaScriptの論理演算について抑えておいてください。

3−3.React(Hooks)

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

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

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

・Udemy「モダンJavaSciptの基礎から始める挫折しないためのReact入門 / じゃけぇ」
・Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版 / じゃけぇ」
・Udemy「React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得 / はむさん」

3−4.Go言語

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

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

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

3−4−1.GORM(ゴルム)

少々お待ちください…

3−5.TypeScript

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

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

3−6.Git

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

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

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

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

3−7.Docker

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

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

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

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

3−8.JSON

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

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

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

3−9.サークルCI/CD

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

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

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

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

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

最後まで読んでいただきありがとうございました。

スキルも収入も「突き抜けたエンジニア」を目指すコミュニティ『突き抜けエンジニアサロン』(※初回募集終了)

“朝活×プログラミング”で人生逆転『朝もくサロン』

コメント

タイトルとURLをコピーしました