はじめに

初めまして、2021年新卒の中島です。 いつの間にか入社から7,8ヶ月経っていることに気付き、時の流れが早すぎて焦りを感じています。

僕は入社してから半年はフロントエンジニアとしてReact, Reduxを中心としたフロントエンド開発を行ってきましたが、10月からバックエンドエンジニアとして働くことになりました。

そこで今回の記事ではこの半年間のフロントエンド開発の集大成として、VideoBRAINのフロントエンド開発をしていく中で自分がどのようなことにつまずいたか、またどのようにその壁を乗り越えてきたかをお話ししたいと思います。

今後新卒のフロントエンジニアとして働いてみたいという方々の参考になれば嬉しいです。

苦労したこと

コードの規模がデカい

入社してからGitHubのリポジトリを見て、すごい量だなと思いました。

僕は大学生の頃インターン生としてフロント・バックエンド開発を行っていたのですが、基本的にまだ世に出ていないサービスを作ることが多く、0→1のフェーズで開発することが多かったため、コードの規模は個人開発のものより少し大きいくらいでした。

それらのコードの規模と比べるとVideoBRAINのコードはかなり大きく、圧倒されました。

何が大変だったか

VideoBRAINは既に世に出ているサービスで、さらにサービスの性質上フロントのロジック等が複雑なので、とにかく何が起こっているのかを読み解くのが難しかったです。

ファイル数も多く、どこから手をつけていいかわからないという状況でした。

どのように克服したか

まずはUIや機能がどのコードに結びついているのかを把握するようにしました。

その上で非常に役に立ったのが、ReactのChrome拡張機能でした。

この拡張機能を使うことでどの部分がどのコード(コンポーネント)かをすぐに把握することができるようになりました。

おかげでどこに何があるかまでは把握し切れていないけど、修正したいファイル・コードがどのあたりにあるのかがわかるようになり、規模の大きいコードでもスムーズに開発を行えるようになりました。

React以外でもVue.jsやSvelteなどのフレームワークでもChrome拡張機能があるみたいなので、フロントエンド開発をする際はぜひ使ってみてください。

何もわからんReact, Redux

既に言及していますが、弊社のフロントエンド開発ではフレームワークとしてReact,状態管理ライブラリとしてReduxを使用しており、僕にとってこれらのツールを使うのは初めての経験でした。

インターンではVue.jsやSvelteを使っていましたが、この二つとは違った特徴があるので少し苦戦しました。

何が大変だったか

まずReactの基本的な書き方に最初は戸惑いました。useState, useEffectとはなんぞやという感じだったので、最初はその辺りを学ぶ必要がありました。

また、描画時の条件分岐や反復処理などはJavaScript*1の文法で行うというのもVue.jsやSvelteにはなかったので最初は慣れませんでした。

Reduxに関しても状態管理はUIとの紐付きが薄いため把握するのが難しく、コードを地道に追っていく必要がありました。

どのように克服したか

一番最初はYoutubeに載っているReactやReduxの動画で手を動かしながら、全体的な開発の流れや開発方法などの概要を把握するようにしました。

個人的には動画が一番情報として頭に入りやすいので、概要を把握するには動画をいつも活用しています。

概要を把握した後は公式ドキュメントで情報をインプットしていました。

フレームワークやライブラリなどの動きを細かく把握するのには公式ドキュメントを読むのが一番いいと思っていますが、最初から公式ドキュメントを読み進めようとすると情報量が多くなかなか大変なので、動画や他の記事で概要を把握してから公式ドキュメントに手を出すのがいいかなと思います。

ある程度インプットできたら後は慣れるしかないですかね。

トリッキーすぎるCSS

個人的にフロントエンド開発をやっていて一番大変だなと思ったのはCSSです。

プログラミングを勉強し始めてWebページを作ろうとなったときはCSSでどんどん整っていく自分のページを見て感動した記憶がありますが、まさかフロントエンド開発最大の敵になるとは当時思ってもいませんでした。

ちなみに弊社ではstyled-componentsを使っています。

何が大変だったか

CSSは何かと言うことを聞いてくれないので、思い通りにならないのが大変でした。

まず自分でCSSを書いても画面が崩れたり、変更が反映されてなかったりしました。

Googleで書き方を調べて参考にしながら書いても他の箇所にかかっているCSSの影響で調べた通りにいかないなど辛い思い出ばかりです。

泥沼にハマれば、ロジックを実装するよりも時間がかかってしまうこともしばしばありました。

どのように克服したか

正直CSSに関しては克服できている気がせず、未だにCSS怖いなーと思っています。

実装してみてうまく動かなかったり反映されなかった場合はとにかく調べることしかできませんでした。

参考にしてたサイトとしては主にW3Schoolsだったり、MDN Web Docsを使っていました。

どうやってCSSを克服できるかわかる方いらっしゃったら教えてください。

まとめ

今回はこの半年間で経験したフロントエンド開発についてご紹介しました。

VideoBRAINのフロントエンド開発は簡単ではなかったですが、今まで単純なUIしか実装したことがなかったのですごく勉強になりました。

特に動画の編集画面がどのような仕組みで動いているのかが入社前から気になっていたので、知ることができて非常にためになりました。

今後はバックエンド開発をメインに行うことになるので、次はバックエンド開発について話すことになるかもしれません。

*1:弊社はTypeScriptを導入しているので、正確にはTypeScriptになります