littlem-nooblog

エンジニア王に、俺はなるっ!!

Statistics, CloudNative, Backend, etc..

フロントエンドちょっときついのできちんと基礎から学び直す計画を立てます

なぜフロントエンドを学ぶのか

今、お仕事でディープラーニングや機械学習のシステム基盤やバックエンドを開発している。 色々なツールを組み合わせて利用することが多くDashboardを作成したい、というのが一番のモチベーションである。

どうせ作るのであれば高いレベルのものを作りたいので一からきちんと学びたい。 ただこれまでにも挫折してきた経緯があるのでなぜなのか考察する。

ゴールはDashboard(内部 or toB向け程度)をさらっと1週間以内で作れるレベルになること。 故に、プロレベルでは必要そうなSEO、sketchやワイヤフレーム、 そもそものどういうサイトにすべきかのユーザ分析とそれを踏まえた設計などは対象外とする。

何がフロントエンドが難しいのか考察する

バックエンドエンジニアでこれまで全くフロントエンドをやってきていない人間が、フロントエンドを学ぶのはとてもハードルが高いと感じる。

理由を書き出す。

  1. 何からやっていいのかわからない
    頑張ってぐぐったのでこの記事で学習方針をまとめる
  2. 流行りすたりが激しいので何を信じて学べばいいかわからない
    とりあえずいい感じの本を読み漁る
  3. 本は古いものが多く流れが速いこともありどれを買えばいいかわからない
    新しい本のみ買う
  4. 公式docsを読むのはいいのだろうけど基礎力が低いのだろうか読むのがきつい
  5. PWA, レスポンシブデザイン、Atomic デザイン、CSS Grid、など色々あって意味不明
  6. Javascriptは古いものをやっても無駄感あるのでTypescriptから学んでもいい?
  7. 何を作ろうか悩んで結局作りきらずにやめる
  8. デザインセンスの問題
    どうにもならんので既にあるフレームワーク様に頼る、その勉強をする
  9. 絵を描くような地道な作業が苦手なのでスタイリングでめんどい無理っとなる

今のレベル

色々最新の動向などをググりまくって学びたいものをまとめた。
主に自分が学びたいものに対しての現状のレベルを書いておく。

  • HTML/CSS
    ごまかしごまかしかける程度、Grid layoutやflexboxなど用語レベルでなんとなく理解している。
    ペライチのページ作れと言われると綺麗に作り上げることができない。
  • Javascript/Typescript
    本を一冊読んだ程度で手を動かして何かを作ることはほぼしていない。
    そもそもTypescriptから学ぶのではダメなのか?古い記法が多いのでよくわからん・・という状態。
  • npm
    仕事で多少使っているくらい。package.jsonやらwebpack周りはざっくり理解している。
  • React.js
    本を一冊読んだくらいでまだ積極的に手を動かしていない。
    Gatsbyjsで本記事を書いているので中身を追ってみたくらい。
  • Redux, hooks
    何もわからん
  • jest
    使い方もわからん
  • Styled Components
    本で出てきたので少し知っているくらい。実務には到底耐えない。
  • Bootstrap(Reactstrap)
    使ったことない
  • Material-UI
    使ったことない
  • GraphQL(Apollo)
    美味しいの?チョコ?
  • axios
    わかりませんわ・・

学ぶ順序と方法

これで正しいかわからないがやっていく。
終わった後で振り返りの記事を書く。

自分は本を選ぶときは、

  • 発売日(分野にもよるが3年以上古いときつい)
  • 誤字脱字、正誤表の有無
    誤字脱字は致し方ないが、正誤表にあまりにミスが多いと買う気をなくす。
    そもそも正誤表がないのは誠実ではないのであまり書いたいと思わない。
  • 初級すぎるものはNG
    オライリーのように深い内容で体系的に学べた感があるものが好き
  • 古くないもの、モダンな内容が含まれているもの
    利用ツールが古かったりするとその時点で買わないことが多い

HTML/CSS

Grid Layout、レスポンシブデザインについて書いてあるもの。
実際になんらかの制作を本を通して行うこと。
BEMやらの設計については不要、Styled componentsで最終的には書きたいから。

これが一番良さそうなのでポチった。

上記で到達できるレベル次第だが、以下もレベル高そうだが読む価値はありそう。

Typescript

最低限Javasciptは理解しているので、Typescriptを学ぶ。
大好きなオライリーから最新のTypescriptの本が出ている!!ポチった

こちらのリンクはJavascriptを経ずにいきなりTypescriptを学習するためのページらしく読んでみる。
https://future-architect.github.io/typescript-guide/

React

こちらの本を一冊読んだので後は手を動かしていく。
Jestやらhooks, GraphQLなどは公式docsを読みつつやりながら覚えるしかない。
BootstrapやらMaterial UIはCSS学習進めば理解度も上がると思うので後で学習方法は考える。

まとめ

やっていくにあたっての計画を立てた。


littlem

Written by littlem.