コーディング教材【模写修行】の効果的な活用方法を紹介！

模写修行はコーディングの練習ができるサービスです。

この記事では、より効果的な『模写修行の活用方法』について紹介します。興味を持っていただけましたら、無料教材もあるので、ぜひ覗いてみてください。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

模写修行はどんなサービス？

模写修行では下記を提供しています。

• デザインデータ(Figma/XD/スタイルガイド/書き出したデザイン)
• 素材(ロゴやアイコンなど)
• サンプルコード
• web 上で見れる解説

中級編の教材には、SCSSで書いたサンプルコードも入っています。

基礎を1から解説する教材ではなく、実際にサイトを作りながらコーディングの練習と勉強ができるサービスです。

また、デザインツールは、FigmaとXDに対応しています。

コーディング教材の【模写修行】は他の教材と何が違うのか？

他の教材との違いについては、👆 こちらの記事をご覧ください。

模写修行の学習手順

模写修行の効果的な活用方法を学習手順に沿って紹介します。

1. 教材購入後にデザインをダウンロード
2. デザインを見ながら自力でコーディングに挑戦！
3. 完成したらコードと解説で答え合わせ
4. 作ったサイトを拡張してみよう！
5. さらに勉強！

こちらの順で紹介します。

Step1：教材購入後にデザインをダウンロード

• デザインデータ(Figma/XD/スタイルガイド/書き出したデザイン)
• 素材(ロゴやアイコンなど)
• サンプルコード(SCSS もあり)

教材を購入していただくと、上記の資料ダウンロードとweb上で解説を見ることができます。

Step2：デザインを見ながら自力でコーディングに挑戦！

サンプルコードや解説を見る前に、実践と同じようにFigmaやXDのデザインを見てコーディングに挑戦してみましょう。わからないことがあればその都度ググって解決すると良いです。

• 1 週間後までに完成させる
• 期限はなしでとにかく綺麗に書く

ご自身の今の課題に合わせて、上記のような条件や設定を決めて取り組むことをおすすめします。

一通り自分の力でサイトを完成させたら本番公開してみましょう。サーバーの契約をしていなくても、Netlify や Vercel を使えば無料で公開できます。

模写修行の全教材はポートフォリオにすることを禁止していますが、各ブラウザやデバイスで確認するために短期間(数時間程度)公開することは構いません。

Step3：完成したらコードと解説で答え合わせ

完成したらサンプルコードと解説を見てみましょう。コードの書き方に絶対の正解はないので、一例だと思って参考にしてみてください。

配布素材の中には SCSS で書いたコードも入っています。コーダーやフロントエンドエンジニアにとって、SCSS は必須で覚えるべきスキルの 1 つなので、まだ勉強していない方はこの機会に勉強してみるのも良いと思います。

また、保守性の高いコードを書くには CSS 設計の勉強も必要です。

わからなかったことや知らなかったことは詳しく勉強してみると良いです。参考サイト(模写修行メディア)のリンクを載せている箇所も多いので、ぜひ目を通してみてください。

Step4：作ったサイトを拡張してみよう！

模写修行で作ったサイトを拡張したり、改修してみるのも良い勉強になります。そのときに『拡張しやすいコードだったか？』という点に注目してみましょう。

web サイトや web サービスは公開してからがスタートです。拡張や改修を重ねても、カオスになりにくいコードを書けると良いです。

💡 拡張・改修の例

• 新しいページを作ってみる
• 既存のページに何か機能やコンテンツを追加してみる
• JavaScript で動きをつけてみる
• WordPress で投稿機能をつけてみる

Step5：さらに勉強！

模写修行では HTML・CSS のコーディングの練習に特化しましたが、実際は JavaScript も書くことになります。WordPress を導入することもあります。web 開発を仕事にしたい方は React や Vue などのライブラリやフレームワークも勉強する必要があります。

IT 系の仕事をするのであれば、勉強に終わりはありません。今現役で活躍してる方々も日々勉強しています。無理はせずに楽しみながら続けることが大切です。

近道はない！とにかく書く、悩みながらたくさん書く！

基礎学習の後は、とにかくたくさん書いて、その都度わからないことや知らなかったことを勉強するのが 1 番良いです。

模写修行の初級編が全然分からなかった方は 1 から入門書をやり直しても良いと思います。しかし、いつまでも基礎的なインプットばかりだと自分の力で書けるようになりません。

できれば、模写修行の全教材に挑戦していただきたいです。それだけでも、現場の書き方はかなり掴めるはずです。

多くの方に使っていただければ嬉しいです！

教材の質にはかなりこだわったので、多くの方に使っていただきたいです。きっと価格以上の価値があったと思ってもらえるはずです。

改めてこんな方におすすめです！

• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 実践的な練習がしたい
• 基礎学習中、もしくは終えたばかり
• CSS 設計や SCSS を使った書き方も学びたい

※ 解説は SCSS を使わない前提でします
※ 配布するサンプルコードに SCSS が含まれるのは中級以上の教材です

メンターもやっています！