インフルエンサーマーケティング会社 React Developer 担当のBook Review 〜LIDDELLの制度: Read a book を4ヶ月活用した！
はじめまして、LIDDELL株式会社（以下、リデル）の1年目のエンジニアの大塚です。
プログラマとして日々仕事をする中で、さまざまな課題の改善やエンジニア界隈の進化についていく必要が出てくると思います。私も新しい知識を活用する手段の一つとして、技術書を読むことがあるですが、リデルでは、福利厚生として Read a book 制度があり、月１冊、書籍代を会社が負担してくれる制度をフル活用しています。
今回は、私がRead a bookで購入して読んだ本の一部を紹介したいと思います。プログラマとしてどんな課題を解決したいと感じ、そこで何の本を購入したのかを共有することで、皆さんもどのような書籍を購入すると良いのかの参考になるかもしれません。
Read a book で購入した書籍一覧
- 『モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)』
- 『実践Rust入門 言語仕様から開発手法まで』
- 『Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論』
書籍概要
モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)(2,860円)
宣言的 UI の考え方を広め、コンポーネント志向を定着させた UI ライブラリの一つ React。2021 年 9 月初版で JavaScript のこれまでの UI 開発と React でのUI開発を比較し、React のコンポーネント志向と、React 開発に関連する基礎を学習する本である。JavaScript基礎、DOM操作、React基礎、Hooks(State、 Context)、TypeScript 基礎、Custom Hooks が１冊にまとまっている。
実践Rust入門 言語仕様から開発手法まで(4,378円)
SWC や Rome のライブラリ開発言語にも採用された注目の言語の一つ Rust。エラー検知と開発体験を高めるモダンな抽象化構文と、実行速度を両立させた比較的新しいプログラミング言語 Rust を学習する本である。基本構文、Rust を支える所有権やトレイトの解説と、ライブラリや Web アプリ開発が１冊にまとまっている。
Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論(2,970円)
CSSレイアウト設計のレスポンシブデザインを、モジュール化された 12 のパターンに落とし込んだ CSS 設計論。ブラウザのレンダリングに任せ、 PC、タブレット、スマホとレスポンシブデザインの実現方法を学習する本である。このモジュール化された 12 のパターンである、レイアウトプリミティブパターンが１冊にまとまり、良質なデモサイトで挙動を確認できる。
課題の種類と得た知見
***
入社後、主に Next.js と Nest.js でプロダクト開発をしてきました。フロントエンドエンジニアとして、まず初めに React(Next.js) のタスクから始めました。
その際、次のような課題感を抱きました。
「個々人の業務経緯、開発経緯の違いで、技術レベルのレーダーチャート（cf. 栄養バランスグラフなどでよく見られる、多角形型のグラフ形式）が、それぞれの仲間同士で思ったよりも偏りがありバラバラであること」でした。
入社前にポートフォリオを作成する上で、ある程度フロントエンド・バックエンド問わず学習してきましたが、業務経験を積むと、ここまで差が出るのかと思いました。
そのため、まずは得意領域であるReactの技術の抜けている点を再度履修し、一部だけでも（ここでは、React領域）任せてもらいたいと考えて、React の本（モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)）を Read a book の書籍補助制度で購入してもらいました。
知見として、業務内の React コードの Fetcher の Custom Hooks with Atomic Design (Organisms) と 本で解説されていた Custom Hooks First with Context に違いがありました。どちらも、プログラムのコード規模が大きくなっても上手いこと再利用できるように工夫されている点で一致しているのかなと思いつつ、Contextの方が, Redux のようによりグローバルに再利用できる点でメリットがあるのかな、と考察しました。
***
次の段階では React(Next.js) に加えてバックエンド(Nest.js)と 、タスクの領域が大きくなりました。
その際に、以下のような課題感を抱きました。
「フロントエンド(UI、fetcher)よりバックエンド（APIインターフェース、認証、ロジック、DB）の役割が増え、より階層構造（アーキテクチャ）が厳密に定義されていること」でした。
フロントエンドは基本的に、永続データを持たないので、fetcher (and global Context)だけに注目すれば良かったのが、バックエンド（Nest.js 等の Web Framework）ではどの層が何を担当すれば良いのか？を明確に分けないとロジックと混ざりグチャグチャになったためです。
そこで、すでに会社に置かれていた DDD の書籍を読みつつ、汚く書くとコンパイルエラーで実行すらできないと言われる 3冊目の Rust の本（実践Rust入門 言語仕様から開発手法まで）を Read a book で申請しました。
知見として、Rust では、デフォルトで再代入ができない複数の変数に値共有ができないなどの制約があり、その制約によって意図しない不具合を防ぐ仕組みとなっています。リファクタリングで、役割を階層構造(Controller、Service、Repository)の持つべき処理のみに分割し、メソッド内では個々の行の再代入を防ぐ Rust 推奨形式に少しずつ書き換えています。
新しい言語(Rust)の利用できそうな知見を引っ張ってきて、既存の技術(TypeScript、 React、Nest.js)に反映できるのが、新しい言語や技術を学ぶ意義だ、と考えて少し変わった書籍にしました。
***
今の段階では React(Next.js) とバックエンド(Nest.js) の、タスクの領域が他の部分と重なるようになってきました。すでに書かれている部分を流用することが多くなってきたのです。
そこで、次のような課題感を抱きました。
「フロントエンドのコンポーネントをFigmaとどのように同期することができるのだろうかという疑問」でした。
開発を続けていくことで、Figmaの変更とコンポーネントの違いが生まれたり、別ページのどのコンポーネントと追加部分のコンポーネントが一致するのかが曖昧になったりしたのです。さらに、Figmaでは表現しにくい、PC、スマホサイズでのUIの違いを毎回確認する手間も出てきました。
ですので、レスポンシブデザインかつFigmaと同期した共通コンポーネントにしたいと考えて、CSSレスポンシブレイアウトの設計の本（Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論）を Read a book で申請しました。
知見として、Every Layout では、メディアクエリを使わず、レイアウトプリミティブという単位でレイアウトコンポーネントを再利用します。もし仮に、デザイナーの人とUIプログラマーの人がこの同じレイアウトプリミティブを共通認識として活用できるようになったら、少なくともレイアウトに関しては Figma とプロダクトが一致するようになる、と考察しました。
ただ、すでにある共通コンポーネントにどう組み込んで、Figmaデザイナーの人にFigma内でどうやって使ってもらうのかといった別の課題も出てきました。私自身もUI プログラマーではあるが、Figmaの勉強をする必要があります。
現在は、こういった横断的な課題をどのように解決するのかを考えています。また別の本(ex. Google ソフトウェアエンジニアリング)などで学習するでしょう。
さいごに
入社してまだ1年経っていませんが、業務の中でさまざまな課題が出てきました。その解決策の一つとして網羅的に解説されていることの多い書籍を使うことがあります。今回は、私の課題と解決策になるのではと読んできた本を一部紹介してみました。
P.S.
仕事を続ける中で、少しずつ大きなタスクを解決できるようになってきたのかな？ と今回の note を執筆して思いましたね。
最後まで読んでいただきありがとうございました。
Thanks to
－ Background photo created by jcomp - www.freepik.com
インフルエンサーマーケティングの
LIDDELL／リデル
サービスの詳細は…
様々な職種で一緒に働く仲間を募集しています。
この記事が気に入ったらサポートをしてみませんか？