こんにちわ！
私は現在、フロントエンドエンジニアとして主にReactを書いてるわけですが、
実は私は、元々はバックエンドのエンジニアとしてキャリアをスタートさせました。
まあ、モバイルアプリの開発とかもしてたんですが、
一応、一番長いキャリアとしてはメインでRuby on Railsのエンジニアとしての経験が一番長いですよと言っておりました。
そんな僕が、２０２０年にReactのエンジニアとしてフリーランスの案件に初めてアサインされることになったんですよね。
当時のことはこちらの記事に書いてるので良ければ見てほしいんですけど、
正直CSSとかも苦手だったので、自分でもフロントエンドエンジニアとしてやっていけるかな？と不安ではありました。
ですから、フロントエンドエンジニアとして働くためにはどんな知識が必要で、
フロントエンドエンジニアというキャリアは将来どんな感じになりそうかを色々調べてたんですよね。
なので今日は、主に二つのポイントから解説を書いてみたいと思うのです。
- バックエンドからフロントエンドに変えるのは正しいか？
- フロントエンドエンジニアとして働くためのおすすめ教材
今、フロントエンドエンジニアに興味を持っている方なら参考になると思うので是非読んでみてください
フロントエンドエンジニアは将来性のある仕事か
まず、私がバックエンドエンジニアからフロントエンドエンジニアになったときに一番懸念したことは、
そもそも、フロントエンドエンジニアって高単価が望めるのか？という問題でした。
私はフリーランスエンジニアとして活動しておりましたから、常に安定という感じではなく、
可能であれば数年後に仕事がなくなっていないものが良いなと思ってたわけで？
Reactなどの登場以前は、フロントエンドエンジニアというのは、フルスタックフレームワークのおまけのように揶揄されることもあり、
心配してなんですよね。
心配ない、フロントエンジニアの単価は高単価が望めます
でも、安心してほしいのです。
私は、多分フロントエンドって将来はバックエンドよりも高付加価値を出せるキャリアになると思っています。
何故ならば、バックエンドはクラウド技術の進歩により、完全にサーバーレスの体制で開発が進められるチームも多くなると思うからです。
でもフロントエンドは多分違います。ブートストラップやマテリアルUIのようなデザインライブラリは進化を続けると思いますが、
依然として美しい細かいデザインを作れるのはぶっちゃけ数学やAIじゃ難しいと思うんですよね。
特に、一般消費者向けのサービスはデザインやUXはとても大切で、その小さな違いでヒットしたりしなかったり分かれたりもする。
だから、綺麗なUIを作れますというのはとても強いアドバンテージになり続けると思っています。
Reactを書いたり、TypeScriptを書いたりすることは、早く、使いやすいUIを綺麗に書けるってことなので、
今後、将来のキャリアは明るいかなって思います。
僕がフロントエンドエンジニアとして働く前に勉強したおすすめ本
では、次に僕がフロントエンドエンジニアとして働く前に勉強していった本を紹介します。
ここで紹介している本は、必ずしも全てを読む必要はありませんが、
特にCSSとかTypeScriptとかに不安がある人は、是非ともキャッチアップしてほしい本ですね。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
570個の評価Kindle版 ￥2,237 単行本￥2,486
- 出版社 : SBクリエイティブ (2019/3/15)
- 発売日 : 2019/3/15
- 言語 : 日本語
- 本の長さ : 283ページ
こちらの本は、HTMLとCSSの基本を知識ゼロから学ぶことができる初心者向けの本です。
しかし、初心者向けだとしても、今までバックエンドでRailsとかを書いてきた人も是非オススメ出来ます。
バックエンドのおまけのHTMLとCSSではなく、HTMLとCSSが主役の世界がフロントエンドです。
いくらReactやVUEをやっても、結局CSSが分からなければ実装で詰まってしまうでしょう。
こちらの本は、レスポンシブ、Flexbox、CSSグリッドなどに対応してるので、ウェブデザインのエッセンシャルを学べます。
技術は年代を重ねる度に簡単になり、バックエンドはAI(数学)やクラウドコンピューティングが解決してしまうけど、人の心を数学(AI)で解決するのは途方も無く難しいので、フロントエンドで心を打つデザインを書ける方が、バックエンドの深いギークより今後年収は上がるでしょう #プログラミング初心者
— off.tokyo (@off_tokyo_) February 10, 2021
＊ユーザーの声
WEBページの仕組みから実際に作る過程まで
程よくまとまっている。
この本も良かったが、WEBデザイナーとして最先端を行き知識を体系立てて丁寧に説明するプロである著者のブログwebcreaterboxがこの本同等以上に素晴らしいから、興味ある記事を全部読んで実践出来る部分は実践すると良いだろう。私が読み込んだブログというのは非常に数少ない。
128人のお客様がこれが役に立ったと考えています
実践TypeScript
こちらの本は、TypeScriptの型システムのからフレームワーク利用の実践まで分かりやすく学べます。型定義のノウハウが凝縮されてるのでとてもオススメです。
フロントエンドは、最近ではReactやVueというJavaScriptのライブラリがよく使われてきていますが、JavaScriptに型をつけられるTypeScriptが結構多くの現場で採用されつつあります。
ですから、ReactでJavascriptを書けるだけだと、色々と現場で詰まってしまうと思います。こちらの本は、TypeScriptを実践的に活用できるように様々なことが書かれているので、今後、現場でTypeScriptを書かなきゃいけない人には必読かと思います。
＊ユーザーの声
TypeScriptを使ってReactやVueを書きたいという方々にお勧めの一冊かと。
特に2部を読んで下さい。2部に価値を見いだせない方にはオススメできません。・ReactやVue（Nuxt）はある程度理解してる
・TypeScriptに関する知識はどちらでもいい（既にあった方がスムーズに読み進められるとは思います）
という方が対象だと思います。他の書籍で色々勉強していたのですが
・情報が古すぎる
・TypeScriptの言語仕様だけしか無くて訳に立たない（ウェブで探せば出てくるレベルの情報）
・ReactやVueの入門の話しかない（しかもJavaScriptの情報しかない）
という感じで、世の中のフロントエンジニアはどうやってフレームワークにTypeScriptを導入する知識を習得しているのか不思議でしかたありませんでした。そんな中この問題を解決してくれたのがこの書籍でした。
フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装
Kindle版 ￥2,495 単行本￥3,080
8個の評価- 出版社 : 秀和システム (2020/10/9)
- 発売日 : 2020/10/9
- 言語 : 日本語
- 単行本 : 280ページ
こちらの本は、フロントエンドのアプリケーション開発において、
環境構築に必要な知識が詰まったツール解説の本です。フロントエンドの技術って、バックエンドよりも数多く更新されていく傾向があります。
この前までは、フロントエンドといえば、HTMLとCSSを書くだけで、
ある意味バックエンドのおまけみたいな印象でしたが、今ではよりリッチなアプリケーションUIを開発できる素晴らしい技術の発展があります。
BabelやwebpackやTypeScriptや、MochaやJestなどのテストツールまで、
幅広く学べるので、フロントエンドの使用技術を体系的に学びたい人はオススメです。
改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
Kindle版 ￥3,278 大型本￥3,278
82個の評価- 出版社 : 技術評論社 (2016/9/30)
- 発売日 : 2016/9/30
- 言語 : 日本語
- 本の長さ : 734ページ
こちらの本は、Javascriptを詳しく学びたい人におすすめの書籍です。「ECMAScript 2015」はJavascriptの定義が色々書かれているわけですが、
JSの基本からオブジェクト指向構文，Ajax，クライアントサイド開発まで，そしてテスト，ドキュメンテーション，コーディング規約など，現場で避けられない知識もしっかり押さえられているので、
JSの技術的な深い部分を学ぶのにオススメです。
＊ユーザーの声
他のプログラミング言語経験者で、JavaScriptはまっさらな状態だったものです。
これまでの言語経験を照らし合わせてなんとなくでプログラムを書いていたが、すぐに限界を感じ購入。
最初の基礎的な部分をさらっと流し、後半をしっかり読みました。
私の知りたかった情報がまとめられていて、非常に良い買い物だったと思います。他のプログラミング言語経験者だけど、JavaScriptは書いたことがないという方にオススメします。
20人のお客様がこれが役に立ったと考えています
配色の教科書-歴史上の学者・アーティストに学ぶ「美しい配色」のしくみ
こちらの本は、プログラミングとは少し違いますが、デザインの配色を学べる本になっております。
先ほども少し触れましたが、僕はフロントエンドエンジニアとしてキャリアを積み上げるメリットは、
AIでも解決できない人の心が関わってくる仕事だと思ってるからです。
配色やデザインの微妙な感覚などは、AIのような数学の力を持ってしても解決するのは途方も無く難しいのです。
ですから、調和のようなコンピューターにとって曖昧な表現を、エンジニアが分かることが、大きな力になると思うのです。
＊ユーザーの声
絵画にしろ、額縁にしろ、何れにしても「色」とは切っても切れない関係があります。
わたし自身も幾つかの色彩の本を読んでみましたが、なかなかシックリとは来ませんでした。
先日Book 1stに立ち寄ってみたところ１冊の本が目に留まり、そのタイトルは「配色の教科書」です。
色彩文化研究会が著者で、パイ インターナショナルが販売元です。教科書というタイトルから軽く構えて一読してまた、本棚に戻そうとしたところ、英字のタイトルは[The History of Color Harmony Theory]とあります。直訳すると「配色理論の歴史」です。もう一度本棚から取り出して中身を注意深く目を通してみたところ、その内容があまりにも素晴らしく、アリストテレスから始まる「色の調和」について様々な方達の理論の紹介が展開されています。私たちの周囲には「色」にまつわる様々な情報が溢れていますが、その情報がどのようにして理論として発見されて、展開されてきたかが、丁寧に紹介されています。内容はかなり高度な部分もありますが、色彩に関わる方は必携だと思います。すぐに購入してしまいました。私もかなりの衝撃を受けた本です。まだ、大きな本屋さんに置いていると思いますので、是非手にとってみて下さい。
見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色
Kindle版 ￥1,782 単行本￥1,980
305個の評価- 出版社 : インプレス (2020/6/12)
- 発売日 : 2020/6/12
- 言語 : 日本語
- 本の長さ : 224ページ
こちらの本も、配色の本と似ていて、色の組み合わせのノウハウが詰まっているので、センスのよい色の組み合わせを選ぶスキルが身につきます。
デザインのセンスに自信がない人でもまとめやすい「3色」に限定され、デザインがおしゃれに決まる配色アイデアを収録されています。
＊ユーザーの声
他の方のレビューにもありますが、色の勉強用というよりは鑑賞に向いている本になります。
鑑賞目的の購入だったので個人的には割と満足です。
Web APIの設計
こちらの本は、Web APIの設計に関して学べる本です。
フロントエンドエンジニアは、画面だけを見ていくので、このようなバックエンドのAPIの知識は必要か？と思うかもしれません。
しかし、例えばフロントからPOSTやPUTでデータを入れるとき、正しい形でデータを投げないと、データがうまく入らなかったりします。
ですから、バックエンドがこういう形でAPIを受け付けているよという知識は分かる必要があるのです。
こちらの本では、実際のSNSはや決済システムを参考に、API設計の勘所がつかめるようになります。
＊ユーザーの声
本書は図が適宜使われていてAPI設計の概念をできるだけ読者に伝わるようにと工夫が凝らされている。
一方で、その具体例がしっくり来ないからか、もしくは和訳が硬いせいなのか、すんなり頭に入って来なかった。
（オーライリーのWeb API The Good Partsほどの読みやすさは無かった印象）
ネコミミでもわかるフロントエンド開発環境構築
Kindle 価格 ￥1,540 オンデマンド￥1,760
1個の評価
出版社 : インプレスR&D (2018/10/12)
発売日 : 2018/10/12
言語 : 日本語
本の長さ : 88ページ
こちらの本は、ReactやVue.jsなどを使った開発において、環境構築の分かりやすい理解が色々と解説されています。
BabelやWebpackの設定や、ESLint、Flow、Jestなどの導入方法を詳しく知りたい方はオススメです。
＊ユーザーの声
順に進めていけばよく分からない状態からでも環境が構築出来る。
つまづきそうなポイントなどのフォローが有るとなお良かった
React開発 現場の教科書
Kindle版 ￥3,647 単行本￥3,839
17個の評価
- 出版社 : マイナビ出版 (2018/3/23)
- 発売日 : 2018/3/23
- 言語 : 日本語
- 本の長さ : 340ページ
こちらの本は、JavaScriptライブラリReact ＋ Atomic Designの導入によるコンポーネントの設計から実装までが学べる初心者や入門者向けの本になります。
現場で使える、実務に役立つ知識とノウハウを習得したいエンジニアのための、React実践書です。
Reactを使ったフロントエンドの開発フローなど、初心者の方にオススメです。
＊ユーザーの声
まず、この本はいわゆる初心者向けではないです。
普通に React を勉強されたい方は他の入門書を買ったほうが良いでしょう。この本は、少なくとも以下のことが学べます。
・React を使った Atomic design の設計・開発手法
・Webpack を使ったビルド構築
・Redux による状態管理これらは、実際の現場で使われています。
特に Webpack を使ったビルド構築に触れられているのはさすがだと思いました。
こういう技術書にはなかなか無いので、現場レベルのスキルを身に着けたい人にはおすすめです。
これからはじめるVue.js実践入門
Kindle版 ￥3,346 単行本￥3,718
43個の評価- 出版社 : SBクリエイティブ (2019/8/22)
- 発売日 : 2019/8/22
- 言語 : 日本語
- 単行本 : 468ページ
こちらの本は、Vue.jsの初心者/入門者向けの解説本ですね。
先ほど、Reactの本の解説をしましたが、現在フロントエンドの開発ライブラリは、二強っぽくなっておりまして、それがReactとVueということになります。
Vueは、Webアプリのビュー(見た目)の部分に特化したシンプルなフレームワークで、Reactとは違い、既存のHTMLなどの形によく馴染みます。
だから既存のアプリに後乗せで導入したり、徐々に適用範囲を拡大したりすることが手軽に行えます。
シンプルな分、他のフレームワークと比べて学習コストが低く、HTMLとJavaScriptが一通りわかる人ならコードを理解するのも簡単です。
本書では、Vue.jsの中核である、ページを構成するUI部品「コンポーネント」をしっかりと解説し、さらには本格的なアプリ開発で必要となる要素までを網羅的に解説されているのでオススメです
＊ユーザーの声
JSを一通りかじっている方であれば、すんなり受け入れられる内容です。
ハマりどころへの注釈があるのも親切で、一つ一つの解説も分かりやすいと感じました。
特に、独学で少しVueを触っている場合などは、補足内容に納得出来る部分が多いです。
ここ暫く出版されていた入門書等との違いとして、Vue.cli あたりの情報も親切に書かれており、この１冊で Vue.js 本来の能力を知ることが出来、学習がとても楽しくなると思います。
