フロントエンドエンジニアを目指している、ねこらのん（@nekoranon256）です。
今回またロードマップを編集しようと思います。
編集する理由は以下のとおりです。
- 追加依頼などでLP制作が長引いたこと
- プログラミングの勉強方法への混乱がようやく解けたこと
- やっとやる気になれたこと
などからようやくスタートが切ることが出来ると思ったからです。
やる気になった理由は身近な友人がエンジニアのロードマップを教えてくれたことが最も大きいです…！
以上のことからロードマップを改めて作成していこうと思います！
目次
前回のロードマップ
前回のロードマップは以下のものでした。
2020.8.10に作成したロードマップ
5/25
【済】HTML/CSSプロゲート
6/22
もりけん塾入塾
↓
【済】デイトラ1st （bootstrap関連以外）まで終了
↓
【済】ぷよぷよプログラミングでJavaScriptをつつく
↓
【途中】JavaScript本格入門の書籍
↓
＊〆切＊
9月頭までLP制作案件
【NOW】友人のLP制作案件において必要なスキル
▼もりけん先生（@terrace_tech）アドバイスのもと
＊HTML＊
【済】・サーバーから送られてきたファーストバイトをブラウザが受け取ってから描画されるまで
【済】・解析、DOM構築、レンダリング、レイアウトフローなど
【済】・SEO
【済】・アクセシビリティ
＊CSS＊
・flex, or gridで横並びができるようになる
・position absolteとrelativeの違いを理解できて、2つのwidthが違う要素で中央配置ができるようになる
・擬似属性とボーダーだけでアイコンを作ることができる
・media queryでスマホ対応できる
・display blockとinline-block, inlineの違い、できることを理解
を一旦目指す
CSSはとりあえずこれだけでいいです
＊git(github)とLinux＊
・変更をpushすることができ、github上でぷるりくをmergeできること
・リモートブランチからpullで変更を取り込むことができること
【済】・cd, pwd, cp, rm, ls, chmod, cat,
【済】・パスを通すとは何か
・権限の読み方
・ログインシェルとは何か
＊JS＊
・Arrayのメソッドとfor文、Stringのメソットに重点
・onClick（途中介入）
＊フォトショ・イラレ＊
・画像をスライスできる
・簡単な加工ができる
・バナーが作れる
・パスを自由に操れる
・バッジ処理ができる
（途中理解のもの多いので未達）
↓
9月末まで
JavaScript本格入門再開し以下を重点的に
・入門以外の書籍を何回も読む
・ES6以降の記述
・正規表現、Promise、カリー化、モジュール、prototype、クロージャ、高階関数、クラス(オブジェクト指向構文)、値参照と参照渡し、this、ジェネレータ関数、イテラブル
・reduce, map, entries, filter
10月
①HTML&CSSを扱う会社で勤務
②フリーでWordPress案件を獲得していく
2021年4月
ECサイト業務がある会社
できなきゃいけない部分がいまだできていない…やらなかったからなんですが…
今回新しく作成したロードマップ
前回のロードマップを変更しました。
変更した点で以前と違うところは11月末から1ヶ月〜4ヶ月程度、「季節労働をしながらの勉強」だというところ。
その点も踏まえて作成していきます。
5/25
【済】HTML/CSSプロゲート
6/22
もりけん塾入塾
↓
【済】デイトラ1st （bootstrap関連以外）まで終了
↓
【済】ぷよぷよプログラミングでJavaScriptをつつく
↓
＊〆切＊
9月頭までLP制作案件
【済】友人のLP制作案件において必要なスキル
↓
9月末〜12月末（3ヶ月）
・完全未経験からエンジニアになった友人がしていたJavaScript含むものを写経・模写・何かを実際に作る（できれば毎日1つ）
・以下のもりけん先生（@terrace_tech）アドバイスを活かせるものの模写と写経
＊HTML＊
【済】・サーバーから送られてきたファーストバイトをブラウザが受け取ってから描画されるまで
【済】・解析、DOM構築、レンダリング、レイアウトフローなど
【済】・SEO
【済】・アクセシビリティ
＊CSS＊
【微妙】flex, or gridで横並びができるようになる
【微妙】position absolteとrelativeの違いを理解できて、2つのwidthが違う要素で中央配置ができるようになる
・擬似属性とボーダーだけでアイコンを作ることができる
【済】media queryでスマホ対応できる
【済】display blockとinline-block, inlineの違い、できることを理解
を一旦目指す
CSSはとりあえずこれだけでいいです
＊git(github)とLinux＊
・変更をpushすることができ、github上でぷるりくをmergeできること
・リモートブランチからpullで変更を取り込むことができること
【済】・cd, pwd, cp, rm, ls, chmod, cat,
【済】・パスを通すとは何か
・権限の読み方
・ログインシェルとは何か
＊JS＊
・Arrayのメソッドとfor文、Stringのメソットに重点
・onClick（途中介入）
＊フォトショ・イラレ＊
・画像をスライスできる
・簡単な加工ができる
・バナーが作れる
・パスを自由に操れる
・バッジ処理ができる
（途中理解のもの多いので未達）
JavaScript本格入門再開し以下を重点的に
・入門以外の書籍を何回も読む
・ES6以降の記述
・正規表現、Promise、カリー化、モジュール、prototype、クロージャ、高階関数、クラス(オブジェクト指向構文)、値参照と参照渡し、this、ジェネレータ関数、イテラブル
・reduce, map, entries, filter
↓
2021年4月
ECサイト業務がある会社
友人が本気で身につけたいなら1日1サイト模写・写経が良いと言っていたので、調べるものなどがなければその意識でやっていけたらいいなという願望で作成しました！
これからすることをロードマップから抜粋
これからすることをGoogle Calendarのメモ帳に貼り付けましたが、消えるといけないのでこちらにも残しておきます。
9月末〜12月末（3ヶ月）
・完全未経験からエンジニアになった友人がしていたJavaScript含むものを写経・模写・何かを実際に作る（できれば毎日1つ）
・以下のもりけん先生（@terrace_tech）アドバイスを活かせるものの模写と写経
＊CSS＊
【微妙】flex, or gridで横並びができるようになる
【微妙】position absolteとrelativeの違いを理解できて、2つのwidthが違う要素で中央配置ができるようになる
・擬似属性とボーダーだけでアイコンを作ることができる
＊git(github)とLinux＊
・変更をpushすることができ、github上でぷるりくをmergeできること
・リモートブランチからpullで変更を取り込むことができること
・権限の読み方
・ログインシェルとは何か
＊JS＊
・Arrayのメソッドとfor文、Stringのメソットに重点
・onClick（途中介入）
＊フォトショ・イラレ＊
・画像をスライスできる
・簡単な加工ができる
・バナーが作れる
・パスを自由に操れる
・バッジ処理ができる
（途中理解のもの多いので未達）
JavaScript本格入門再開し以下を重点的に
・入門以外の書籍を何回も読む
・ES6以降の記述
・正規表現、Promise、カリー化、モジュール、prototype、クロージャ、高階関数、クラス(オブジェクト指向構文)、値参照と参照渡し、this、ジェネレータ関数、イテラブル
・reduce, map, entries, filter
↓
2021年4月
ECサイト業務がある会社
やることがたくさんあるけど、勉強するのではなく楽しみながら何かを生み出すことが大事だと聞いたので、模写などする際はそれを意識したものを選んで行こうと思います！
HTML・CSS編：目的のものが学べる（だろう）サイト
同じ塾生のharuさんのロードマップが非常にタメになるので、こちらを真似てサイトを選んでいきます。
【すべて無料のもの】
- クロールさんのコーディング課題
- クリスタさん（@cresta_design）のコーディング課題【初級】・解説記事
flexboxを理解、横並び、背景画像の設定、上下左右中央寄せ、position、formの型、inputタグ、レスポンシブ - サイト模写（WordPressテーマ「Write」）
- クリスタさん（@cresta_design）のコーディング課題【中級】・解説記事
jQuery：スティッキーヘッダー、スライドショー、ハンバーガーメニュー - サイト模写（「flower」さん）
- デイトラのコーディング課題
- ひらともやさん（@hiratomoya）のコーディング課題
- クリスタさん（@cresta_design）のコーディング課題【上級】・解説記事
- しょーごさんのライブコーディング
模写や写経は10サイト程度でよく、あとは自分で作成することに意味があるとエンジニアの友人から聞いたので上記をやっていこうと思います。
残りはyoutubeの動画も良いと聞いたので探していこうと思います。
JS編：目的のものが学べる（だろう）サイト
次はJS。
- motiQさんの電卓コーディング
- Online Tutorialsさんの電卓コーディング
- Online Tutorialsさんのアナログ時計
- Online Tutorialsさんのデジタル時計
- ログインと登録フォーム
- スロットゲーム
- じゃんけんゲーム
など
こちらもやっていけたらなと思います！
おわりに
忘れるので、何度もロードマップを見よう…。
あと働きながらになるので度々移動もあるので、それも考慮しつつやっていこう！
広島→長野（家賃10円でコワーキング500円/日）→和歌山（みかん）→沖縄（さとうきび）→東京（就職）の流れでいけたらいいな！
もりけん塾（@terrace_tech）
Thanks：もりけんさん