Zenn
🖥️

Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話

2021/10/03に公開
CSS
Next.js
React
TypeScript
frontend
idea

この記事について

Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話を共有する。
どういう勉強をしたかのラーニングパスを某所で話したら興味があるというコメントがあったので、自分の振り返りも兼ねて共有することにした。

TL;DR

  • 学習期間は1ヶ月、30時間程度
  • TypeScript → Next.js → MDNでHTML+CSS → TailwindCSS の順に勉強した
  • JavaScript、React.jsはほぼすっ飛ばした(というより上記ラーニングパスの中で派生して習得した)
  • できるようになったこと: 簡単な処理であればテストつきでTypeScriptのコードが書けるようになり、UIの基本的な設計ができるようになった

DISCLAIMER

筆者の経験を記したものであり、ベストプラクティスではありません。

筆者の開発スキルセット（勉強前時点）

  • バックエンドが得意領域
  • 利用言語はPythonだがほぼ型アノテーションつきのコードしか書かない
  • フロントエンド側については、見様見真似でコピペならできますくらいのレベル。詳細は以下の通り
  • HTML: HTML5が分からない。bodyタグは知っているがsectionタグがわからない
  • CSS: マージンとパディングの違いを説明できないレベル。SASSは名前も知らない
  • JavaScript: DevToolsを開いてconsole.logを何も見ずに叩けるレベル（＝Hello World書けるとほぼ同レベル）。アロー関数がわからないレベル
  • TypeScript: 存在は知っているがJavaScriptとの関係がわからない
  • React: 何をするものか理解していない
  • Next.js: 何をするものか理解していないレベルだが、こいつがフロントエンドのフレームワークだということは分かる。これを動かすのがゴール
  • TailwindCSS: CSSのフレームワーク、みたいな理解レベル

ゴール

  • TypeScriptでテスト込みのコードを書けるようになること
  • 最低限の環境構築ができるようになること
  • Next.js + TailwindCSS でフロントエンドアプリケーションのコードを書けるようになること

学習時間

1日1時間程度を2日に1回以下の頻度で1ヶ月 + 実業務での活用15時間程度。

合計学習時間は30時間程度と思う。

ラーニングパス

  1. TypeScript
  2. Next.js
  3. HTML+CSS
  4. TailwindCSS

技術スタック

ゴールにたどりつくにあたり、必要な技術スタックがわからなかったので、まずどのような構成になっているのかを整理した。

  • Next.js: Reactを使ったフロントエンドフレームワーク
  • React: UIコンポーネント構築用JSライブラリ
  • TypeScript: 型つきのJavaScriptライクな言語。コンパイルするとJavaScriptに変換される
  • Node.js: JavaScript処理系
  • TailwindCSS: CSSフレームワーク

TypeScript

型が書けるのに型を書かない状態から勉強するのはしんどいこと、JavaScriptとの互換性があることなどから、JavaScriptを飛ばして最初からTypeScriptを勉強することを選択した。

フューチャーアーキテクトが公開している仕事ですぐに使えるTypeScriptが非常によくまとまっていたのでこれで勉強した。

https://future-architect.github.io/typescript-guide/index.html

nodenv

Node.jsのインストールとバージョン管理に使う。上記ドキュメントには記載が見つからなかったので自分で入れた。

https://github.com/nodenv/nodenv

開発環境の整備

新たな言語を勉強するにあたってテストフレームワークとlinterは必須なので先に入れる。自分はググったり友人に質問したりして環境整備を行ったが、仕事ですぐに使えるTypeScriptの後半に書かれていたので先にそちらを読めばいいと思う。

https://future-architect.github.io/typescript-guide/baseenv.html

テストを書く

仕事ですぐに使えるTypeScriptではts-nodeというインタプリタが紹介されている。このドキュメントに限った話ではないが、インタプリタを使える言語の入門書は大抵インタプリタを使って試すことを推奨している。
私が勉強する場合はその方法をとらず、同等のテストを書いた。テストの書き方も同時に学べるということだけでなく、実行方法を実行可能な状態で保持するというメリットがあるからだ。Pythonでインタプリタの代わりにJupyterやGoogle Colabで書いて保存しておくことをイメージしてもらえばいいと思う。

React (飛ばした)

Reactのチュートリアルにとりかかろうとしたが結局飛ばすことにした。

https://ja.reactjs.org/docs/getting-started.html

理由は、このチュートリアルはたしかにReactを触るというにはいいかもしれないが、あまりに親切すぎてあれこれ用意されすぎているために、触っても全体の構造を理解することができなかったからだ。
自分がもともとHTML+CSS+JSでフロントエンドのコードを書いてきていないから構造が理解できていないだけなので、決してこのチュートリアルが悪いわけではないと思う。

いずれにせよ一旦これをスキップしてNext.jsを学んだ。

Next.js

https://nextjs.org/learn/basics/create-nextjs-app

Reactの基礎知識が必要とあるが、なくてもこのチュートリアル自体は問題なくこなせる。
チュートリアルのクオリティが非常に高く、とても理解しやすかった。

ただ、やっぱりHTML+CSS+JSというフロントエンドの基本構造をきちんと学んでいなかったため、実際にチュートリアルを超えた範囲になると行き詰まってきた。

MDN (HTML + CSS)

友人からMDNのサイトがいいというのでそちらで基礎から学び直すことにした。

https://developer.mozilla.org/ja/docs/Learn

分量もすごいが何よりクオリティが非常に高い。
今まで、実務経験の中で身につけた断片的な知識だったHTMLやCSSの知識を体系的に学ぶことができたのは非常に大きな経験だった。

マージンやパディングといった、基本的な用語の定義を正しく学ぶことができたのも大きい。正しい用語がわかると、検索ができるようになるし、言語化できるから上級者に質問できるようになる。

TailwindCSS

https://tailwindcss.com/

チュートリアルみたいなものはないので自分で色々試すしかない。

プレイグラウンドを用意してくれているのでまずはこれを使うのがいい。

https://play.tailwindcss.com/

次に、サンプルコードを探す。公式コンポーネント集のtailwindui.comは、基本は有料なので無料部分は一部しかない。公式なのでコードのクオリティは信頼できる(と思う)。

https://tailwindui.com/

検索すると無料のコンポーネント公開サイトが色々出てくるのでそれらを参考にする。

コードを読む

コピペするだけなら探してコピペすればいいのだろうが、勉強するにはそれではダメなのできちんとコードを読み込む。
CSSの世界は理詰めでデザインを設計できるので、コードを正しく読めばなぜそのデザインなのかを理解できる。

……はずなのだが、無料コンポーネントとか読んでるとどう考えてもこれ間違って書いたんじゃないかみたいなコードがちらほらある。結果的に無視されるので動いてるだけだったりするので、コードを読むのに苦労する。

学習結果

1つ目の成果は、フロントエンドのコードを正しい用語を使って言語化できるようになったこと。言語化できるようになれば、正しくググれるようになるし、正しく人に質問できるようになる。
2つ目の成果として、TypeScriptをテストつきで書けるようになった。これで既存システムのコードを改修するためのPRが書けるようになった。
3つ目の成果として、CodePen等を使ってUIの基本的な設計ができるようになった。これにより、さほど重要でないUIであれば自力で作れるようになった。

ラーニングパス再考

TypeScriptの後にすぐにMDNを学習した方がよかったように思う。今の知識でラーニングパスを構築するなら、以下のようになる。

  1. 仕事ですぐに使えるTypeScript
  2. MDNでHTML、CSS、JavaScript、Reactの基本を学ぶ
  3. React公式チュートリアル（MDNで学んだ知識があれば理解できる）
  4. Next.js公式チュートリアル
  5. TailwindCSS

ただ、一方で遠回りしたからこそ全体を俯瞰できて学習スピードが上がったというのもあるので、一概に自分の取ったラーニングパスが悪いとは言えないと思う。

私の場合、テストや環境構築ができるようになることという目的があったので上記のような勉強をしたが、単にフロントエンドUIを試しに動かしたいというのであれば、以下の流れで十分と思う。

  1. MDNでHTML、CSS、JavaScript、Reactの基本を学ぶ
  2. React公式チュートリアル
  3. TailwindCSS
  4. CodePenで色々と試す

CodePenはオンラインでHTML+CSS+JSのコードを書いて動かせるサービスで、無料で利用できる。環境構築は手間がかかるけどとにかく動かしたい、という人はここを使うのが一番いいと思う。
無料だと作成した作品は全て公開になってしまうことに注意。

https://codepen.io/

フロントエンドに対する所感

自分の想像していたよりもはるかに理詰めの世界であることに驚いた。

レスポンシブデザインのような画面サイズごとの考慮、バックエンドAPIやサードパーティAPIの仕様など、様々な要件を理解してUI設計をしなければいけない。
フロントエンドのシステムは基本動き続けてしまうので(何も表示されない、表示がおかしくなる、など)、考慮が漏れていても簡単に検知することができない。
これだけ膨大な要件を考慮した上でフロントエンドUIを設計しなければならないということを学べたのが一番の収穫だった。

フロントエンドはもっと感覚的に作っていく部分が大きいと思い込んでいたので、大いに反省している。

次のステップ

環境構築から簡単な実装まで自力で作れて、質問したり検索するための最低限の用語の理解ができれば、後は数をこなすだけのはず。

以下、不足してると自分が認識しているものについて書き留めておく。

UIデザイン

特定技術に限らない、基本的なUIデザインの知識が不足しているのでそれを学ぶ必要がある。

SASS

SASSの存在は理解したがそれをどう書くかは学べてないので学ぶ必要がある。

より高度な開発ツール

開発ツールの知識が不足している（DevToolsも多分大して使いこなせてない）のでこれも学ぶ必要があると感じる。

Discussion