初めに

ご無沙汰しております。
koichiです。

今回は、フロントエンドエンジニアを目指し始めている人にとって、良い指標になると思った記事を紹介しようと思います。

ただの記事紹介をZennで書くのはどうなんだろうと思いましたが、私のポエムということでさらっと受け取ってもらえればと思います。

紹介する記事は、「駆け出しフロントエンドエンジニアは何を学ぶべきか」という
株式会社ラクス様が書いているテックブログの記事です。

https://tech-blog.rakus.co.jp/entry/20210329/frontend

個人的にこの記事は良いなぁと思っていて、プログラミング初心者がプロゲートやドットインストールなどでHTML/CSS/JavaScriptを学習した後、他に何を学習すればよい分からなかったり迷ってしまうことがあると思います。

そういう時にこのような指標があれば、迷わず学習を進めることができるのではないかと思います。

この記事(私のzenn)では、紹介サイト(ラクス様の記事)に書かれているスキルマップの各項目について、私なりの見解を一言二言、書いていこうと思います。

また、私がMENTAというサービスでメンターとして活動していることもあり、メンティーさんに向けた書き方をしている所もあります。

プログラミングの学習を始めたての人の学習に役立てれば幸いです。

注意
この記事はラクス様の記事を否定したり、意義を唱えるものではありません。
あくまでラクス様の記事を参考に、私なりの学習に対する考え方を述べたものです。
ご認識をお願いいたします。

スキルマップ

1.HTML

目標レベルに加えて下記3点も欲しいところです。

  • インデントを整えて開始と終わりのタグを整える(13.コーディングルールに出てくる内容)
  • htmlでレイアウトを組むときの構造を意識する
  • ブラウザのdeveloper toolでhtmlの構造を確認できる(12.ブラウザで出てくる内容)

個人的には、HTMLを学ぶ時に一緒に最低限のコーディングルールとブラウザの使い方を学んでいくと効率が良いかなと思います。

インデントを整えることは、自分が自分のコードを見るときにも分かりやすくなりますし、ケアレスミスを少なくすることができます。

そして何よりメンターさんにコードを見せたときに良い作用をします。

仕事ではコードのインデントを整えることは基本中の基本なので、エンジニアのメンターさんはおそらく、整っているコードを見ると比較的早く原因を見つけたり、調査し始める手がかりを見つけることができると思います。

htmlでのレイアウトの考え方は、初めのは難しいかもしれませんが、模写コーディングをしていくうちにイメージがついてくるかなと思います。

htmlでレイアウトについてはパッと見ここらへんが良さそう。

https://www.webcreatorbox.com/tech/html-css-coding-steps

最近はMENTAが、コードステップというサービスと連携をしているので、模写コーディングの際はぜひ使ってみてください。

https://code-step.com/

そしてブラウザのdeveloper toolの使い方は、学習や開発の効率を上げてくれます。

ここら辺の記事がわかりやすいかも。
https://prog-8.com/docs/html-dev

困ったらとりあえずメンターさんを探してみましょう。

2.CSS

目標レベルや学習項目は良さげだと思いました。

こちらも下記を追加したいですね。

  • インデントを整えて開始と終わりの{}を整える
  • ブラウザのdeveloper toolでcssのデザインを確認や検証ができる
  • メディアクエリの理解

CSSもしっかりとインデントを整えることが大切です。
というか、何かしらのコード書く際はインデントを整えてください。

また、developer toolではcssの調整が簡単にできるので、いちいちcssファイルに書いてからブラウザで更新をかけて試すより、developer toolでCSSを書いてみて、良さそうだったらCSSファイルに書いた方が効率が良い時もあります。

そしてメディアクエリですが、レスポンシブに対応したサイトを作成するときは必要になってくるので、必須レベルで理解をしておきましょう。

3.JavaScript

こちらの目標レベルや学習項目は良いとは思いますが、結構ハードルが高いなと感じました。

もちろん、どれもフロントエンドで開発をしていく上で必須のスキルですが、駆け出しの段階ではなかなか大変そうです。

学習教材と誰かに聞く環境が揃っていれば話は別かもしれませんが、独学で進めるには用語の理解や、考え方、具体的な利用方法のイメージがつきにくいと思います。

学習サイトや本、動画などのコンテンツを使って学習をして、わからない箇所をメンターさんを探して質問をするのが良いかなと思います。

ですが、ここを理解してコードをかけるようになると一気に実用レベルに近づきます。

後は追加で

  • DOM操作の方法

も学習していきたいですね。

4.SPA

こちらの目標レベルや学習項目はやるとしたら適切だと思いますが、駆け出しの時にSSRなどの理解は中々難しいかなと思いました。

バックエンドを少しかじったことがある人はイメージしやすいかもしれませんね。

ここは、ReactやVueを学習するときに一緒に学習を進めると良いかもしれません。

5.JavaScriptフレームワーク

はい、いきなりハードルが高くなりましたね！

ですが、フレームワークを使うということは、こういうことを理解しないといけないので、いずれは超えないといけない壁です。

JavaScriptフレームワークでよく比較されるのは、Vue、React、Angularの3つだと思います。

個人的なおすすめはReactですが、どれを学んでも良いと思います。

6.パッケージ管理

目標レベルや学習項目は良さげだと思いました。

プラスして、yarnも知っておくと良いと思います。

あとはここで、gitignoreについても調べておくと良いです。

7.TypeScript

こちらは、かなりハードルが高いかもしれませんが、JavaScriptフレームワークを使っていくと、程よいハードルになっていると思います。

最初は中々メリットを感じにくいかもしれませんが、気付いたらTypeScriptを使わない開発に違和感が出てくるようになるかもしれません。

8.Git

これは、もう必須です。

優先度でいくと、HTML/CSSの次に学んで欲しいと個人的には思っています。

メンターさんに質問をしようとしたときに、もしgitを使っていなかったら、ファイルのやり取りはzipになってしまったり、長ったらしいコードをチャットに張り付けることになったりと、かなり大変になります。

ですが、gitを使用していれば、共有するのはurlだけですので、やり取りがかなり楽になります。

学習には時間がかかるかもしれませんが、根気よく理解していってほしいなと思います。

まずは、ステージング、コミット、プッシュ、プル、フェッチ、マージ、チェックアウトを覚えましょう。

それ以外のことは、困った時に調べても問題ないかと思います。

9.Linux

これはパッケージ管理(npmやyarn)を使う時にも使ったりするので、ぜひ簡単なものでよいので覚えておくとよいかと。

勝手なイメージですが、ここら辺はよく使うのかなと。

  • cd
  • pwd
  • ls
  • grep
  • mkdir
  • mv
  • cp
  • rm
  • chmod

10.Web知識

これはあるに越したことはないです。

ここに書かれているように、httpやセキュリティ周りを知ってるとよいですね。

基本情報技術者試験やITパスポートの勉強をしてみるとよいかもしれません。

11.テスト

テストに関しては、仕事をしてみないと重要性に気づきにくいかもしれません。

テストには何種類かあり、単体テスト、結合テストなどいろいろあります。

単体テストにも種類があって、Excelにテストの項目を書いて人が手を動かして書く方法と、テストコードを書いてプログラムにテストをさせる方法があります。

Excelに書いてやる方法は現場では見かけますが、学習だと全くイメージがわかないと思うので、テストコードの学習をしてみると良いかもしれません。

12.ブラウザ

ブラウザによって差異があることは知っているだけで、原因の切り分けができますし、調べる足掛かりになるのでぜひ知っておいてください。

また、開発者ツール(デベロッパーツール)の使い方は必須レベルで覚えてほしいです。

HTML/CSSでもよく使いますし、VueやReactも拡張機能を使うことで、開発を効果的に行うことができます。

後はバックエンドと連携するときは、ネットワークタブなども見ることがあるので、かなり便利なツールになります。

13.コーディングルール

コーディングルールに関しては、初めはそんなに気にしなくてもよいかもしれません。

ですが、綺麗に書くことだけは意識して学習を進めていってほしいです。

初めは綺麗なコードと汚いコードの区別がつかないかもしれませんが、これだけはしてほしいと思っていることがあります。

それは、「インデントを整える」ということです。

これは、自分が見るときにも見にくくなるし、メンターさんに見てもらう時も綺麗なコードだとスムーズに事が進みます。

ぜひ、インデントを整えてきれいなコードを意識しましょう！

14.Docker

記事に書かれている通り、必須ではないと思いますが、知っておくとよいかもしれません。

個人的に優先度は低めです。

15.情報収集

情報収集は私も知りたいところです。
エンジニアとして仕事をしている人のツイッターをフォローしたり、企業のテックブログなどもおすすめですが、最初はQiitaやZennなどのランキングやトレンドを見てみるだけでも良いかもしれません。

学習順序

これらを踏まえて、個人的に考える隔週順序は上から、

↑↑優先度高↑↑
HTML
CSS
コーディングルール
Git (←ここまではこの順番をかなり推したい)
JavaScript
ブラウザ
パッケージ管理
Linux
SPA（Single Page Application）
JavaScriptフレームワーク
コーディングルール
テスト
TypeScript
Web知識
Docker
情報収集に使えるWebサイト
↓↓優先度低↓↓

の順がいいかなと思います。

もちろん、どんな順番で学習をしてもよいとは思いますが、上から4つ目まではこの順番をかなり推したいです。

終わりに

私自身、どういう順序で学習を進めるのがよいか悩んでいましたが、今回、ラクス様の記事を見つけて「これは良い指標になるぞ！」と感じたため、とりあげたくなりました。

この指標を元に、学習コンテンツを作ってみるのもありだなと考えています。

ぜひ、ラクス様の記事もご覧ください。
https://tech-blog.rakus.co.jp/entry/20210329/frontend