フロントエンドエンジニアのキャッチアップについて

あけましておめでとうございます!フリーランスエンジニアの雄貴です。

新年の初記事はフロントエンドのキャッチアップについて私の考えを述べようと思います!

移り変わりの激しいフロントエンド業界でどのように活動していくか、参考になると幸いです!

目次

対象の領域

フロントエンドは大きく分けて2つの分野があります。

  • Web制作業界 (jQuery, WordPressを用いたWebサイトの開発が主)
  • Webサービス業界 (React, VueなどJSフレームワークを用いたSPA構成のシステム開発が主)

この記事では、React, Vueなどを用いたSPA開発が主流のWebサービス業界におけるフロントエンドエンジニアのキャッチアップについて述べています。

あわせて読みたい
WEB制作とWEBサービス開発の違い フリーランスエンジニアの雄貴です! WEB業界の中でも、ホームページ制作などを実施する「WEB制作事業」と、WEBサービス開発を実施する「WEBサービス事業」の2つに区分...

フロントエンドのスキル

フロントエンドスキルのキャッチアップについて、以下の2つの視野で考えています。

  • 基礎
  • 最新技術

基礎

「この程度あればおおよそのクライアントの案件に参画しメンバーとしてやっていける程度」を基礎としています。こちらは私がフリーランスとして様々な商談や現場を経験した中で判断したレベルを示しています。(2021年1月現在のレベル感です。)

web開発の基礎

WEBシステムの仕組み

HTTPプロトコルやSession, Cookie、Webアプリケーションのサーバ構成など、WEBシステム開発で基礎となる部分は理解しておく必要があります。

こちらの書籍がオススメです。


Linux

概要の理解とLinuxコマンドの基本的なものはターミナルで実行できるようにしておきましょう。SPA開発ではLinuxコマンドを多用するので必須です。

Linuxについてはキツネさんのブログが分かりやすいのでオススメです。

キツネの惑星
Linuxの基礎を体系的に勉強する記事まとめ Linuxを勉強して、基礎知識を身につけよう!
バックエンド

以下の内容は理解しておく必要があります。

  • MVCフレームワーク
  • DBMS, SQL

バックエンド開発の負担がどれくらいになるか?をフロントエンドとして予測できないと、チーム開発において良い連携はできません。

特にデータ取得時の処理速度などDBに関する内容は理解しておかないと、バックエンド側の負荷が大きいのにも関わらず、フロントエンド側の実装でバックエンド側の負荷を低減させたりといったサポートができなくなります。

自分の領域だけできていればいいという考えのエンジニアはクライアントにとって使いにくい人材なので、避けた方がいいですね。

SQLやDBMSについて演習を元に分かりやすく学習できる書籍はこちらで、概要は理解できると思います。


セキュリティ

Webアプリケーションのセキュリティに関する最低限の知識は身につけておく必要があります

オススメ書籍はこちらですが内容が多いので、まずは概要だけ掴んでおいた方がいいです。

SQLインジェクション、XSS, CSRF, CORSなどは理解しておきましょう。


HTML, CSS

webページをレスポンシブデザインも含めて実装できるレベルを目指してください。

ヘッダー、フッター、サイドバーを含めた共通部分の実装や、ログイン画面などにある入力フォーム、テーブル表示などwebサービスで使用される基本的な部分はすぐに作れるようになっておく必要があります。

CSSはSCSSを用いて保守性良く実装できるのがいいですね。

progateなどはhtml,cssの書き方には慣れますが「それを使ってサイトを作成する」には少し足りないので、以下のような書籍で学習することをオススメします。



SCSSについてはネットで調べる程度でも可能ですが、環境構築などもあるので以下の書籍がいいかと思います。


JavaScript関連

JavaScriptの基礎は理解しておく必要があります。

移り変わりの激しいフロントエンド業界ですが基本はJavaScriptです。

新しいフレームワークなどが登場してもJavaScriptさえ理解していれば対応できるので、基礎を理解しておくことは必須事項です。

詳しくはこちらの記事をご確認ください。

あわせて読みたい
プロになるためのJavaScript勉強法!! フリーランスエンジニアの雄貴です! 近年のWebサービスではSPAと呼ばれる構成でUIをより良くしているものが増えており、それを実現するReactやVue.jsなどのJavaScript...

JavaScriptフレームワークはReactまたはVue.jsのどちらかを使えれば一旦は大丈夫かなと思います。

Reactの学習方法については記事にしていますのでよければご覧ください。

あわせて読みたい
プロになるためのReact勉強法!!〜入門編〜 フリーランスエンジニアの雄貴です! JavaScriptフレームワークのなかで圧倒的にシェア率の高いReact! しかし挫折率の高いフレームワークですので、現役フロントエンド...

またTypeScriptを導入している案件がメジャーになりつつあるので、こちらの習得も必須です。

あわせて読みたい
プロになるためのReact勉強法!!〜TypeScript編〜 フリーランスエンジニアの雄貴です! 前回React入門編として記事をまとめました!状態管理がReactの基礎でしたね! 今回はTypeScriptについてお話ししようと思います! ...

SPAなどのモダンフロント開発技術

HTML, CSS, JavaScriptやJSフレームワーク以外にも、SPA開発における必須スキルはあります。

  • エコシステム (Node.js)
  • タスクランナー (npm, yarn)
  • コンパイラ (Babel)
  • モジュールバンドラ (webpack)
  • 状態管理 (React: Redux,ContextAPI, Vue:Vuex, provide/inject)
  • ルーター (React: ReactRouter, Vue: VueRouter)
  • 静的解析ツール (ESLint, Pretteir)
  • テストツール (jest, cypress)
  • CSSライブラリ (CSS Modules, CSS in JS(styled-components, emotion))
  • コンポーネント設計 (Atomic Design, Container Presentation)
  • UIカタログ (StoryBook)
  • CI (Circle CI)

上記のスキルをはじめとした、モダンなフロントエンドのスキルがなぜ必要なのか?など背景・理由を含めて解説している書籍がこちらです。


こちらの書籍で「何が必要か?」が理解できるので、それを元に具体的な内容を調べてキャッチアップしていくと効率が良いです。

Next.js, Nuxt.js

Next.js, Nuxt.jsはReact, Vue.jsでのSPA開発を効率化したフレームワークで、ReactならNext.js, Vue.jsならNuxt.jsが対応しています。

Vue.jsを用いたSPA開発の案件ではNuxt.jsを用いている場合が多いので、Nuxt.jsの習得は必須事項です。

Next.jsは本格的に使われはじめたのが2020年からとまだ日が浅いですが徐々に導入している案件が増えてきています。

Reactを用いる場合でもNext.jsで簡単なSPA構成のアプリケーションは開発できるようにしておくことをオススメします。

合わせてSSR(サーバーサイドレンダリング)のメリットと原理についても学習しておく必要はあります。

上記の内容を学習した後に、SPA構成のWEBサービスを個人開発していくと、実践ベースでスキルの習得ができます。

最新技術

フロントエンド技術の移り変わりはWeb業界の中でも特に激しいです。

具体的には以下のような内容が多いです。

  • JSフレームワークや周辺ライブラリのバージョンアップにおける変更
  • SSRに変わる新たな概念(SSG, ISR)
  • CSS周辺(TailwindCSS, CSSinJSのライブラリなど)

これらの最新技術はすぐに現場に取り入れられることはありませんが、概要だけは掴んでおく必要があります。

いざ技術を導入する際に選択肢を広く持っておかないとクライアントの要望に対しベストを尽くせません。

またすぐにデファクトな技術になることもあるので、早急にキャッチアップできる準備はしておきましょう。

情報収集の方法はこちらの記事にまとめていますので、良ければご覧ください。

あわせて読みたい
エンジニアが押さえておくべき情報収集のオススメサイトと活用方法! フリーランスエンジニアの雄貴です! ITエンジニアの業界は技術の進化が早く、日々動向をキャッチアップする必要があります。 その際に「どのようなサイトや記事を見て...

フロントエンド以外のスキル

ここではフロントエンド以外の分野でどのようなキャッチアップをしていくか?について述べます。

フロントエンドを主としてスキルアップしていく一方、他の領域も対応できるようにすると他のエンジニアとの差別化にもなるのでオススメです。

バックエンド

フロントエンドとバックエンドの両方を対応する案件も多くなってきました。

SPA構成に対応できるエンジニアが少ないため、求められる場面も増えています。

スキル習得の優先度としては、Node.js > Go >> Ruby > PHPと考えています。

PHP, Ruby

SPA構成の案件でよく使われている言語です。

もともとMVC構成で開発していたものをSPAにリプレイスしている現場が多く見られます。

このような現場ではバックエンドエンジニアは充分に足りている場合が多いので、フロントエンドとしてはデバッグができるようになると良いです。

API不具合が生じた場合、フロントエンド側でデバッグし原因特定してからバックエンドに連携すると、開発効率も上がります。

ただ先述しましたがPHPとRubyができるバックエンドエンジニアも豊富なため、フロントエンドがバックエンドまで対応する場面は少ないので、優先度は高くないと考えます。

またSPA構成を採用している現場ではRubyを採用している場合が多いので、これから習得するならばPHPよりもRubyを選択することをオススメします。

Node.js

JavaScriptで記載できるので、フロントエンドエンジニアがバックエンドを実装するような案件でよく採用されます。

チームメンバーが豊富であれば、フロントエンド、バックエンドでエンジニアのチームを分けて開発できますが、少ない人数の場合はどちらも任せられる場合が多いです。

そのような案件でNode.jsは好まれているので、開発できるようになると参画する案件の幅も広がります。

Go

SPAと非常に相性の良いバックエンド言語です。

また処理速度が速い点から、近年導入する案件が増えてきています。

RubyからGoへ移行している現場も多く見られますね。

フロントエンドとしてGoの知見もあると、高単価を狙えるスキルスタックにもなるので、余裕があればキャッチアップしていくことをお勧めします。

クラウド

AWSのAmplifyによってフロントエンドのデプロイや管理がより簡単になりました。

そのためフロントエンドとしてもクラウド技術の知見を求める場面が増えてきています。

私が経験している中でも、フロントリポジトリのCI/CDやデプロイ、保守はフロントエンドの管轄になりつつあるなというのが実感です。

また、フロントにReact(Next.js), バックエンドにNode.js, ネイティブアプリにReactNativeと、全てTypeScriptで対応可能になるので、フロントエンドがクラウドを扱う場面がメジャーになるのもそう遠くないと予想しています。

まずはこちらの記事でAWSの概要を掴んだ後に、フロントエンドに関連するサービスをキャッチしていくのが良いと考えています。

Qiita
【AWS初心者向け】AWS学習方法まとめ【15時間で達成できる】 - Qiita AWS学習を始めようと考えている人 「AWSとは、概要や全体像、メリットデメリットが知りたい」 「AWSの学習方法が知りたい」 こういった疑問に答えます。 本記事のテー...

ネイティブアプリ

フロントエンドにReactを採用している案件では、ネイティブアプリにReactNativeを採用しているパターンが多いです。

どちらもReactの記述で開発できるので、学習コストが少なくて済み、採用するエンジニアの人数も少なくて済むからです。

しかしネイティブアプリ特有のデバック方法や懸念点などもあるので、個人開発で実際にアプリを開発する経験を詰んでおく必要はあります。

技術以外の分野

デザイン

デザインツール

デザインツールとしてよく使われるのが、XDFigmaです。

Adobe
Adobe XD | UI/UXデザインと共同作業ツール 【アドビ公式】 Adobe XDは、ワイヤーフレーム、アニメーション、プロトタイプ、共同作業などの機能がすべて統合されたウェブデザインツールです。
chot.design
UI/UXデザインツール『Figma』入門 | chot.design リアルタイムで共同編集ができる新しいデザインツールとして注目を浴びる「Figma」について学べるカリキュラムです。チームでアプリやWebサービスを作っている現場におすす...

私が参画した案件の中ではFigmaがよく使われていたので、こちらが主流になりつつあるかと思います。

フロントエンドエンジニアとしてデザインを行う場面はあまりないですが、デザインカンプを元に開発することになるので、使い方に慣れておく必要があります。

基本的には現場で慣れていけばいいと思いますが、余裕があれば少し触っておくと良いでしょう。

UI・UX

フロントエンドエンジニアもデザインカンプ作成の際に、どのような構成が良いか?など打ち合わせで議論する場面が多いです。

デザインの基礎として、「ノンデザイナーズ・デザインブック」は読んでおく必要があるでしょう。

また学んだ内容を元に、自分でデザインをしてみると良し悪しが分かってくるので、実際に手を動かしてみることをお勧めします。


チーム開発

SPA構成の現場では基本的にはスクラム開発を実施しています。

しかし、スクラムマスターなどを含めたガッチリとした体制で実施している現場は少なく、以下のような体制が多いです。

  • 2週間スプリント
  • デイリースクラム (毎日15分)
  • スプリント終了時のKPTやレビュー

チーム開発はメンバー一人一人が意見を出し合い、試行錯誤しながら改善していくものです。

まずコミュニケーションを円滑に実施していけることが必須ですが、自分自身でなかなか気づけないものですよね。。

こちらの書籍では仕事におけるコミュニケーションを良い例悪い例を出して解説しているので、客観的に学ぶことができてオススメです。


アジャイル開発の手法については概要を知っておく必要がありますが、先述で紹介した「フロントエンド開発入門」の書籍でも記載しているので、そちらで学習すると良いです。


より実践的な内容を学習する際はconnpassのLT会やこちらの書籍でキャッチアップすることをお勧めします。


ただここまでは座学ですので、学んだことを元に現場で試しつつ効果的なものを見つけていく必要があります。

クライアントの利益向上を第一の目的として、その観点で改善案を提示し、チームメンバーと協力していく習慣を身につけることが大切です。

最後に

以上、「フロントエンドエンジニアのキャッチアップ」について私の意見をまとめました!

私自身、バックエンドとフロントエンドをどちらも経験しているので、WEBシステム全体をみた上でフロント側の設計をどうするか?が判断できるようになりました。

視野が広ければ広いほど、多角的に物事を考えられるので、プロダクトに潜む重大な懸念点をいち早く発見し、チーム全体で対処することができます。

クライアントが真に求めているのは、自社のプロダクトチームで改善していける人材です。

技術やチーム開発手法、コミュニケーションなどは、上記の要望に答えるための手段でしかないので、あまり拘らず目的第一でキャッチアップしていきたいですね!

引用:Vectorjuice – jp.freepik.com によって作成された technology ベクトル

よかったらシェアしてね!

この記事を書いた人

雄貴のアバター 雄貴 フリーランスエンジニア

【エンジニアの単価が上がる情報を発信中】
27歳未経験からIT業界へ→経験2年半で月商80万達成
React案件で初回契約月105万を実現

エンジニアの心の相談室を毎週木曜実施中

コメント

コメントする

目次
閉じる