はじめに
学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
当初は、プロゲート,ドットインストール,Youtube,Udemyを使い学習をしていたが、
Todolistなどのアプリケーションをテキスト通りに作成できても、カスタマイズなど実装できない事に悩む。
その時に、youtubeを見て、アウトプット中心の学習で少しでも経験を積んで、今の状況を改善できればと思い、『フロントエンド塾』に参加する事に。
学習したスキル
- コンポーネント指向の理解
- Atomic Designの概念の理解
- Atomic Designの概念を理解した上での簡単なデザインスキル
- コンポーネント指向を理解した上でのUI構築スキル
- TypeScript+Reactの構成で、Applicationを開発するスキル
- GitとGitHubのプルリクエスト作成までの流れ及びコードビューの仕方
具体的な手順
- 参考としたいサイトを検索しAdobeXD or Figmaを用いてデザイン作成
- TypeScript×Reactの構成でlocal環境にアプリ作成
- localでポートフォリオサイト実装
- Githubにレポジトリを作成し適宜Push
完成品
コンポーネント指向とは
- ソフトウェア開発において部品ごとに小さく分けて開発する考え方のこと。
- Reactはコンポーネント指向を前提として作られたライブラリで、Reactにおいてコンポーネントとは、
『マークアップなどの見た目とロジック機能を分離せず合わさったもの』もしくは、『構造・見た目・振る舞いをセットにして1コンポーネント』として定義。 - メリット：影響範囲が限定されるため、保守運用がしやすい。パーツの再利用がしやすく、拡張しやすい。
- デメリット：コンポーネントを分ける粒度、分け方が人によって異なる。
Atomic Designとは（概念）
- コンポーネント単位で定義するUIデザイン手法。
- React、Vue用というわけではないがモダンJavaScriptと相性が良い。
- 原子⇨分子⇨有機体（生体）⇨テンプレート⇨ページという５つのレベルに分かれる。
◉５つのレベル
1.Atoms（原子）・・・ボタン、アイコン、インプットエリアなどの要素の最小単位。
2.Molecules（分子）・・・Atoms の集合体、アイコン付きのボタンや検索ボックスなど。
3.Organisms（有機体）・・・Atoms、Molecules の集合体。ヘッダーや検索エリアなど。
4.Templates（テンプレート）・・・Organisms の集合体。ページレイアウトなど。
5.Pages（ページ）・・・表示するページそのもの。
- 画面要素を５段階に分け、組み合わせる事でUIを実現。
- コンポーネント化された要素が画面を構成しているという考え方。
- React、Vue用というわけではないがモダンJavaScriptと相性が良い。
- メリット ： 同じプロジェクト内別プロジェクトでも利用できる。組み合わせ次第で色々なデザインが作れる。
課題その１をこなす上で苦労した点と苦労をどのように克服したか
- Webデザインをそもそも何の事かよくわからなかった。
⇨ youtubeを見て、Figumaの使い方を勉強し、実際に自身で何個か作成し、デザインした物をコーディングしてみた。 - TypeScript×Reactの構成でlocal環境にアプリ作成。localでポートフォリオサイト実装。 Githubにレポジトリを作成し適宜Push。Prettierを導入。
⇨ 下記の参考サイトを中心に学習をして、何度も試行錯誤をして課題を仕上げた。
課題その１：感想
- 自分が望んでいたアウトプット中心の学習が取り組めた。
- 教材を勉強しているだけでは出てこない言葉や技術を知るなど、幅広く経験が出来た。
- 当初は何の事かよくわからない事が多かったが、何度も検索して、試行錯誤を繰り返し、何とか到達することが出来たので良い経験を積む事ができた。
参考サイト
『コンポーネント指向とは』
React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】
理解しておきたいコンポーネント指向
『Atomic Designとは（概念）』
もっと効率的にデザインできる！「Atomic Design」を紹介します
【Atomic Design】ってなんだろう
フロントエンドエンジニアなら知らないと損！アトミックデザインのすゝめ
Atomic Design を分かったつもりになる | DeNA DESIGN BLOG
課題をこなす上で苦労した点と苦労をどのように克服したか
【実践】Webデザインはこんな感じで作る！ノーカット製作の流れ。
【実践】HTML/CSSコーディングの流れ！ノーカット製作風景。
https://www.youtube.com/watch?v=jxIpYOOh-TU
https://www.youtube.com/watch?v=J9agaxgjnXc&t=486s
【初心者】Figma講座
FigmaでWebカンプを作ろう！
【React】React + TypeScriptの開発環境を作る（デプロイまで）
【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る
How to set up Sass in your Create React App
How to Deploy React App to GitHub Pages
React × TypeScriptで作ったポートフォリオサイトをGitHub Pagesで公開してみる
create-react-appでSassやCSS-moduleを使う方法
【日本一わかりやすいTypeScript入門】ESLintとPrettierでコードの品質を高めよう
Prettierの使い方解説。フロントエンドで必須のコード整形ツールで、プログラミング学習の効率も上がります
【初心者向け】TypeScript用にESLintとPrettierを導入する
Prettierの導入方法 フロントエンド開発で必須のコード整形ツール
React 最初からデプロイまで① GitHub Pages編
create-react-appで作ったwebサイトからサンプルコードを漏れなく消す