こんにちは！みさんです。
2020年12月に未経験からProgateでプログラミング学習を始めてから4ヶ月でこんなサイトを作ることができるようになりましたー！
RaiseTechの最終課題制作です。未経験にしては4ヶ月でここまでできたのは頑張ったと思います。
今回は最終課題が終わり一区切りしたのでこの4ヶ月何をしてここまでのレベルになったのか学習のロードマップをご紹介します。
学習ロードマップ
4ヶ月の大まかな学習内容はこの通りです。毎日やっていたわけではありませんが114日中101日何かを学習していました。
RaiseTechの最終課題を終えた3月24日までのトータルプログラミング学習時間は286時間35分でした。単純計算で1日3時間ほど学習をしていたことになります。
実際は記事を書きながら学習していたのでそれを含めると450時間以上、1日5〜7時間は作業してましたね。
Progate（1ヶ月）
↓
HTMLデータをWordPressテーマ化（1.5週間）
↓
模写コーディング（3.5週間）
↓
FLOCSS学習（1週間）
↓
XDからコーディング（1週間）
↓
コーディングデータをWordPress化（3週間）
↓
ローカル環境から本番環境移行（1日）
学習の流れは以上の通りです。
Progate
プログラミングスクールの事前学習として1ヶ月短期集中でProgateをずっとやってました。
何をやっていたのか、今から始めるなら何から始めるのがおすすめかについては以下記事でご紹介しています。
RaiseTech WordPressテーマ制作課題
RaiseTech最初のテーマ制作課題は講師の方のブログに沿ってテーマを作っていく課題でした。
事前にコーディングの学習はしていましたがWordPressの学習は全くのゼロだったので初めは完成できるか不安でしかありませんでした。なんとか完成した当時の理解度は高く見積もっても40％ほどだったかなと振り返ります。
このように考えるのは基本コピペをしていたからです。講師の方のブログには説明ももちろんですがコードも丁寧に書かれているのでコピペをするだけで進めることもできます。これに甘えすぎていた部分と私の説明文を読むのが苦手な部分が掛け合わされて低い理解度のまま完成してしまった感じです。
では完全に理解して次にすすむべきだったかと考えるとそれも無駄な時間になるだけかなと思います。理解するにはどんどん実装してアウトプットするのが効果的だと思うので6〜7割の理解くらいがちょうどよかったかなと今振り返って思います。
ほぼ理解した実感がなかったテーマ制作ですがこのありがたさを実感したのは最終課題のWordPress化に取り組み始めたときで少し時間が空いています。ただこれを初めにやっていなかったら4ヶ月でクリアすることはできなかったと思います。
講師の方のブログというのがこちらです↓
RaiseTech 模写コーディング課題
テーマ制作課題後の模写コーディング課題ですが初めは検証ツールの写経状態でした。ProgateでHTML/CSSを学習したはずなのに実際のサイトではこんなにも役に立たないのかと思いました。
特に私を悩ませたのがレスポンシブ対応でのハンバーガーメニューの実装です。正直ネットに情報たくさんあるからできてしまうだろうと初めは楽観視していました。しかし実際は参考にしようとしたサイトの作り方全て失敗しました。
この全失敗の原因は「jQueryでの実装にこだわりすぎた」「コードコピペで実装しようとしていた」の２点が考えられます。
この失敗なのですが最初から全てうまくいかなかのではなく最後の一歩がうまくいかないことばかりでした。そこで各参考サイトからうまくいった部分（3本線の作り方・メニューの作り方・動きの付け方など）だけをかき集めてオリジナルのハンバーガーメニューを実装しました。
コピペでできるのは簡単ですがプログラミング学習には全く身にならないことをしっかり実感しました。この記事で作り方をアウトプットしたことで理解も進みましたし次の課題にも活かされました。
FLOCSS学習
最終課題に必要なCSS設計FLOCSSの学習です。
ただネットの情報でFLOCSSってこんなものなんだーと学ぶだけでなく架空のプロフィールサイトをFLOCSSにそって作成しました。
コーディングレビューとかはしていないのでクラス名に修正箇所は多々あるかと思いますがとにかくFLOCSSの基礎（ファイルの作り方・各ディレクトリの役割・命名規則）固めやアウトプットにはよかったかなと思います。
XDからコーディング
RaiseTech最終課題のXDデータからまずはコーディングをしました。前回の模写コーディングは3週間以上かかりましたがこちらは1週間でコーディングをすることができました。
コーディングボリュームも5ページ分やレスポンシブ、ハンバーガーメニューと模写課題以上だったことやデザインカンプなのでHTML/CSSの写経はできない中で1週間でのコーディング完了はコーディングの力がついているんだなと実感できました。
1週間ほどで完了したコーディングで難点だったのはpositionプロパティの使い方です。要素の位置調整にpositionプロパティを乱用していたのが原因でした。詳しくは以下記事で書いています。
コーディングをWordPress化
XDからコーディングしたHTMLファイルデータのWordPress化です。
進め方は最初のテーマ制作課題に沿って進めていくのですがWordPressテンプレートの学習を全く行わずに取り掛かったためなかなか苦戦しました。そこで講師の方のブログと共に参考にしていたのがYouTubeです。WordPressテーマ制作手順を解説している記事もありますが長文を読むことが苦手ということで動画と音声で学習をできるYouTubeを学習ツールとして選びました。
わかりやすい動画だったのがたにぐちまことさんのたにぐちまことのともすたチャンネル「WordPress開発講座」です。何度か過去記事でも軽く紹介していますが無料で閲覧できるのがもったいないくらい本当にわかりやすい動画シリーズになっています。
WordPress化でのつまづきは<wp＿footer(); ?>の入れ忘れによるJSファイルの読み込みができないことと画像のパスでした。解決方法は小さな見落としなのですがフロント側で見ると大きなミスに見えるので何が原因なのかと見当違いのワードで調べて試行錯誤して失敗して…というサイクルに時間を費やしていましたね。
またWordPress化に3週間かかっていますがこれは同時にアウトプットのための記事を書いていたためで記事を書いていなかったらもう少し早くできたと思います。
ただ急いで完成させたい理由もないですし時間がかかっても今後の学習のために記事でアウトプットしておいて正解だったと振り返ってみて感じます。
実際に自分の記事で振りながら作業することも何度かありました。自分で書いた記事ならどこに何が書いてあるのかわかりやすいですし自分の言葉なのでふわっとした表現もすぐに理解することができるので便利です。
ローカル環境から本番環境移行
サーバーやドメインをとって本番環境を構築し最終課題データをローカル環境から移行させました。
サーバーやドメインについてはマニュアルが豊富だったことやこのブログ立ち上げで1度触れていたことが功を奏して簡単にできました。
移行については「All-in-One WP Migration」という神プラグインのおかげで5分ほどでできました。
こんなに簡単にできてしまって学習になっているのか不安な部分はありますがRaiseTechの課題を全て完了させることができました。
まとめ
基本私の学習は「とにかく実装」というスタイルだったなと振り返ってみて感じました。Progateで事前学習はしていましたがWordPressは事前学習ゼロ、テーマ化も実装しながら分からない事が出てきたら初めて調べてみるというスタイルで学習してきました。
こんな猪突猛進学習を続けられたのはRaiseTechの手厚いサポートとブログでアウトプットをしていたことです。何回でも内容不問で質問できるサポートは質問することが恥ずかしいことだと思うことが1度もありませんでした。また記事として世の中に発信していくことでわかりやすいように調べて自分の言葉でまとめて文章にすることが必要になるのでこの行為が理解を深めたと思います。
まだまだプログラミング学習で学びたいことが山積みですがこの4ヶ月のうまくいったこといかなかったことを振り返りながら学習を進めていこうと思います！
コメント