新人共有資料: フロントエンド

目的

今後、新人の方にいろいろ教える時のために、個人的に知ってて良かったことや、もっと勉強したいと思うことを列挙しています。（ここにあるのはあくまで個人的意見なのでご注意を！）

対象としては、100人以下の規模のWEB系企業の新人開発者を考えています。

強いエンジニアさんがみると、間違えてる部分や過不足があるかもしれないので、ご指摘いただけると助かります。
どなたかの参考になれば！

時間ができたら、サーバーサイドとインフラに関しても書きます！

HTML

基本構文

progateとかで勉強するのがいいと思います。

構造化コーディング

HTML5で追加されたsectionやarticleといったHTMLタグを適した場所に利用するコーディング方法です。
HTML5.1を使ってSEOに強いセマンティックコーディングをする方法 | FASTCODING BLOG

この記事に書いてあるレベルのことを気をつければ良さそうです。
（あんまり自分は出来てなかったので気をつけます...）
完成したら、自分の作ったサイトをLighthouseで確認してみて、SEOとAccesibilityの部分を修正していくのが勉強になるし、おすすめです。
Lighthouseの計測結果を見ていく - Qiita

SEO

• パンくず
• noindex, nofollow
• canonical, pagination
• 構造化データ
• OGP
• Sitemap
• robots.txt
• google search console

ぐらいを知識として覚えておけばいいと思います。
実際に必要な時は、SEOに詳しい人が指示してくれると思うので。

アクセシビリティ

目の見えない方などがアクセスしやすいように、HTMLタグを適切に使うようにするのが推奨されます。
正しくコーディングすれば問題ないのですが、頭の片隅には入れておきたいです。
Webアクセシビリティっていったいなんだろう？ | 株式会社グランフェアズ

レンダリング

HTMLのページをブラウザどうやって表示しているかの流れを理解しておくと、予期せぬバグが起こった時に役立ちます。
また、ページ速度（レンダリング速度）を上げたいときにこの知識は必要になります。
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita

最初は良く分からないと思いますし、分からなくてもサイトを作ることはできますので、ふわっとまずは理解しておくといいと思います。
（恥ずかしながら、自分も深くは理解できてないです）

CSS

こちらのサイトがいろいろ載ってて勉強になるので、先に紹介しておきます。
コリス

基本知識

progateとかで勉強するのがいいと思います。

特に、
- block要素とinline要素の違い
- marginとpaddingの余白の違い
- media queryの使い方
この辺は簡単かつ重要なので、しっかり覚えた方が業務が楽だと思います。

flex & grid layout

横にblock要素を並べたり、レスポンシブなサイトを作ったりする時は、下記の2つを使うと便利です。

• display: flex
• display: grid

使い分けに関してはこちらの記事がわかりやすかったです。
簡単にいうと「Flexboxは1次元、CSS Gridは2次元、と覚えておいてもよいでしょう。」とのことです。
CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

これらを使えるのと使えないのでは、出来る表現が大きく違うので積極的に使いながら覚えた方がいいと思います。
tableレイアウトとかfloatとかありますが、その辺りは（ブラウザ対応的に問題なければ）使わない方が保守しやすいとされています。

CSSリセット

CSSリセットとは、ブラウザ毎にdefaultのCSSが少し違うので、それを統一するものです。
2020年、モダンブラウザに適したCSSリセットのまとめ | コリス

もし何もしていない場合は、対応ブラウザによると思いますが、何らかのCSSリセットを導入した方が楽だと思います。

Sass

これからはcssはSassで書こう。 - Qiita

cssを拡張した言語です。
書き方自体はcssと大きく変わらないように書けるので、すぐ慣れると思います。
使い方としては、変数やfileのimportが出来るので、colorとかfont-sizeとかは、変数定義ファイルで定義して、そのファイルを使うところでimportして、変数を用いるイメージです。

ただ、下記みたいな書き方は、「.block__element」と、class名で検索しても見つからないので、個人的には避けたいです。

.block {
    color: #fff;

    &__element {
      color: #ccc;
    }
}

PostCSS

PostCSS まとめ - Qiita
「CSSツールを作るためのフレームワーク」とのことで、好きなプラグインを組み合わせて使います。個人的にはAutoprefixerがとても重宝しています。

Autoprefixerは、対応したいブラウザを指定すると、それらのブラウザ毎に必要なベンダープレフィックスを自動で追加してくれます。覚えることがめっちゃ減るので便利です！
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita

pluginを追加することで、sassと同じ様に使えるので、最近は、Sassを辞めてPostCSSのみを使う会社もいるようです。

Stylelint

css用のコードチェックツールです。
最初にルールを定義して、そのルールと違う書き方をすると、注意してくれます。
できるだけ入れた方が、レビューで細かい指摘が減るので、精神的に楽です。
美しくメンテナブルなCSSを書くための 「Stylelint」の使い方とは - WPJ

css class設計

classを適当につけていくと予期せぬstyleが当たったりします。
それを防ぐために、classの名前づけのルールがあります。
OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける | Black Everyday Company

最近は、ファイルを細かく区切って部品に分けていくのであまり必要ないかもしれませんが、ルールは定まっていた方がわかりやすいと思うので。

Animation

cssだけでできるアニメーションは結構あります。
JavaScriptをわざわざ使わなくて良くて簡単なので、一通り下の記事に目を通しておくとイメージがつきやすいと思います。
CSSアニメーション 入門 - Qiita

こんなこともできるそうです！
30 Cool CSS Animation Examples to Create Amazing Animation Websites

マルチブラウザ対応

まず、IE対応する場合は確実にテストが必要です。
そろそろ、IE10のサポートも切れるので、前ほどは問題起きないと思いますが。

普段使わないcssなどを使う時は、下記で対応しているか確認が必要です。
Can I use... Support tables for HTML5, CSS3, etc

また、android4系を未だ対応している場合は、不具合が多いので注意してください。自分も苦しみました...
Android 4.4.2以下で起こる、特にうざったい不具合・バグの解決法【厳選4策】 | 東京上野のWeb制作会社LIG

iOSで:hover問題とか（ちなみに自分は:hoverをPCサイズのブラウザのみでつけるよう対策しています。）
iOS 10.3.1のSafariでCSSの:hoverを1クリックカウントしてしまい2タップしないとリンク遷移しないのをjQueryで修正 - 6ixブログ

最近だと、Macで違うフォントが表示される問題とかも。
Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ - かもメモ

まだまだあると思うのですが、個人的にここが一番辛いです...

JavaScript

基本知識

progateとかで勉強するのがいいと思います。

jQuery

自分はここ数年は使ってませんが、制作会社に入社した場合は使う機会があると思いますので、志望する会社によっては覚えておくと便利だと思います。
2019年になってもまだjQueryを使用している理由 | コリス

ただ、jQueryでSPAは厳しいはずなので、ある程度書けるようになったら、jQueryを使うのを封印して、他のフレームワークの勉強をした方ができることが広がると考えています。

React or Vue

React – ユーザインターフェース構築のための JavaScript ライブラリ
Vue.js

本格的にフロントエンドを仕事にしていきたいならばReact、とりあえずやってみたいならVueがいいと思います。
ReactとVueのどちらを選ぶか - Qiita

このフレームワークを使って、最初は個人開発していくことになると思うので、Angularだと個人で使うには大袈裟かなと思って省いています。

Next or Nuxt

Next.js - The React Framework
Nuxt.js - The Vue.js Framework

Next.jsはReactを用いたフレームワーク、Nuxt.jsはVueを用いたフレームワークです。
ReactやVue単体だと必要なライブラリを組み合わせて作っていくのですが、これらを使うと最初からページ作成に必要なライブラリが入ってるので便利です。
特にVueを選んだ場合は、Nuxtのチュートリアル通り作っていく方が簡単なので、まずは触ってみるのがいいと思います。
ちなみに自分は業務でVue&Nuxtを、家ではReact&Nextを使ってます。

React Native

Reactだと同じ感じでアプリが作れちゃいます。
React Native でアプリ開発をして良かったところ・ツラかったところ - BizReach Tech Blog

FacebookやInstagramもReactNativeだそうです。
React Nativeで作られたアプリケーションをご紹介【全11アプリ】 - bagelee（ベーグリー）

ESLint & Prettier

ESLintはコードが間違えてないかチェックしてくれるツールです。
ESLint 最初の一歩 - Qiita

Prettierはコードを綺麗にしてくれるツールです。
Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita

業務で利用する際は、両方入れておいた方が開発が捗りますし、レビューする側も楽なので入れてもらえるようお願いした方がいいと思います。

テスト

大きく３種類あります。

• componentテスト

  • コンポーネントごとに動きが正しいかをテスト
  • このテストを書けば、TDDが可能になります。
  • テストのレシピ集 – React

• スナップショットテスト

  • 修正前後の表示崩れをテストを検知するテスト
  • テストのレシピ集 – React

• end to end テスト

  • 実際にページにアクセスしてみて、エラーが発生しないか確認するテスト
  • Reactアプリにpuppeteer + JestでE2Eテスト書いてみた - JavaScriptをがんばるブログ

自分はend to endテストしか現状できていないです...

TypeScript

本格的にフロントエンドをやりたい人にとっては、避けては通れない道だと思うので、TypeScriptに早めに慣れちゃった方がいいと思います。
自分もまだまだ慣れてないのでちょっとずつ利用してます。
TypeScript再入門「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に（gfx執筆） - エンジニアHub｜若手Webエンジニアのキャリアを考える！

WebGL

一気に難易度上がりますが、JavaScriptで下のようなことも可能です。
WebGL入門 - サンプルで理解する3D表現の迫力 - ICS MEDIA

やりたいと思いながら全然挑戦できてないので今年こそ！

TensorFlow.js

ブラウザで機械学習を用いたアプリを作れるようになっています。
自分は全然詳しくないので記事をみていただけると！
TensorFlow.js で機械学習Webアプリを作る | Avintonジャパン株式会社

Firebase

Firebase
フロントエンドで開発する際にFirebaseを利用してみるといいと思います。
アクセス数少ないならば無料です！
Firebaseの始め方 - Qiita

• hosting
• cloud firestore
• authenication
• cloud storage あたりを使って、ログイン機能付きInstagram的なものを、ReactかVueのSPAで作れるようになると、一気にできることが広がると思います。

終わり

いかがでしょうか？
参考になる方がいらっしゃったら幸いです！

もし、こういうのもおすすめだよっていうものがあったら、教えてもらえると幸いです！