初心者エンジニアの定番の勉強法。「模写コーディング」
この記事を読むことで、
模写コーディングの一番成長する方法と
効率化の方法を学ぶことができます！
模写コーディングとは？
まず、模写コーディングが何のことか分からない人向けにご説明します！
模写コーディングとは、
- 既に公開されているデザインを真似して（参考に）
- 全く同じデザインになるようにコーディングしてみる
- 答え合わせとして模写サイトと照らし合わせる
模写コーディングは誰にでもできる上に、確実に成長が保証されます。
さらに教材となる模写対象のサイトは、そこら中に転がっているのでお金をかけて、noteや本といったものは買う必要はありません。
しかも模写するサイトはプロがコーディングしたものがほとんどです。
つまり、正しいコーディングを常に確認しながらそのまま自分の技術として盗めるというわけです。
この記事では、こんなことを説明していきます！
- 模写コーディングに必要な4つの準備
- 模写コーディングの効率の良い方法
- 模写コーディングに便利な2つのツール
- 模写コーディングで意識すると良いこと
- どのくらいやれば実務に入れる？
ではスタート！
模写コーディングに必要な4つの準備
模写コーディングはサイトを真似して、コーディングすれば良いわけではありません。
それでは、真似する力が付くだけであまり意味がありません。
模写コーディングを始める前には、準備すべきことがあります。具体的に
・基礎的なコーディング知識（html・css・できれば簡単なJquery）
・最低4時間のまとまった時間の確保
・分からなくて詰みそうな時に気軽に聞ける先輩エンジニア（必須ではないができれば。）
・根性＆やる気（一番大事）
更に詳しくそれぞれ説明します！
【準備すべきこと①】基礎的なコーディング知識
まず大前提、模写コーディングを甘く見てはいけません。
難易度かなり高いです。
それを知らずに、コーディングの基礎的なところが固まっていない状態で模写コーディングをやってしまうと確実に詰みます。
現役フロントエンドエンジニアの僕でも、苦戦する可能性もあります。
このミスをしてしまい、途中で模写を放置する初心者エンジニアはかなり多いですね。もったいなさすぎます。
自分に才能がないわけではありません。練習量が足りていないのにいきなりプロと同じことをしようとしているだけなのです。それは無理がありすぎます（笑）
なので、基礎的なところは調べなくても少し考えればコーディングできるレベルまでには練習しまくりましょう！
面倒かもしれませんが、こういった地道な練習は確実に将来の糧となります。スポーツでも初心者のうちに基礎が固まれば効率よく強くなれますよね？それと全く同じことなのです。
基礎的なコーディングを学ぶなら
- 効率よく！
- 楽しく！
- 実際に自分の頭で考え、手を動かしながら！
- 現役エンジニアのスキルを直に感じながら！
- 無料で！
学むことができるプログラミング学習Webサービス「忍者コード」が初心者エンジニアの方におすすめです！
当ブログで「忍者コード」で
- 忍者コードの使い方
- どんなことを学べるか
- どんなひとにおすすめか
こちらをまとめた記事がありますで、気になった方は読んでみてください！
【準備すべきこと②】まとまった時間の確保
基礎的なコーディングを学べたひとは、実際に模写を始めていきましょう！
でも、ちょっと待って！
ダラダラと「少しづつやってみよう！」とか思ってないですか？
もし思っている方いたら、絶対にやめてください。
でもじっくりコーディングして、
完成できるまでは頑張ったほうがいいんじゃないの？
間違いではないです。頑張って時間をかけて完成はさせるべきです。
ですが、ダラダラコーディングしてしまうとデメリットも多いし実務と比べると非現実できな状況に陥ってしまうため模写で得られる経験値は下がってしまいます。
その理由はこちら！
- 時間を空けることでやる気が落ちる可能性あり
- 短期集中のほうが頭に入りやすい
- 模写の数をたくさんこなせる（時間は有限だからね）
- 実務では１ページを4～８時間程度で作るため
特に最後の「実務では１ページを4～８時間程度で作るため」これが一番意識すべきことですね。
趣味でWeb制作しているなら全く問題ありません。
ですが大半の人はエンジニアに転職or新卒入社orフリーランスを目指していますよね？
なら実務の雰囲気で自分の時間の縛りをつけて模写コーディングをすることをおすすめします。
模写コーディングを4～８時間でそれなりにコーディングできるようになっていればエンジニアという職に就くことはそこまで難しくないでしょう。
さらに時間に縛りがあることで、
このデザインの場合は、
どうやれば速く効率よくコーディングできるかな？
時間制限に間に合わなかったけど、
何がだめだったんだろう？
といった反省が可能ですよね？この反省を繰り返していくことで確実にあなたはスキルアップできます。僕が保証します！
ちなみに制限時間は、先ほどから説明しているので察した方もいると思いますが（笑）
最低4時間は確保してほしいです。休憩は挟んでも大丈夫ですが10分程度を小刻みにとかにしてくださいね。
【準備すべきこと③】詰みそうな時に気軽に聞ける人とつながる
模写コーディングは思ったより難易度が高いです。ゆえに途中で投げ出してしまう方も多い勉強方法と言えるでしょう。
なので、いっそのこと挫折することを前提にしておいて、
詰んでしまったときに気軽に聞ける先輩エンジニアと繋がっておくと心強いですよ！
分からないところをすぐ聞ける環境。これものすごく幸せなことです！
なので繋がりがない人は繋がりましょうね！
え・・・？そんな人いない？探すのめんどくさい・・・？
何を言ってるのですか！僕フィーオンがいます！
気軽にDMやリプで、質問や悩んだことがあれば頼っていください！
ちゃんと答えを返せるように、僕も読んでくれているあなたと一緒に頑張ります！
【準備すべきこと④】根性＆やる気を無くすな！
これ一番大事なことです。
何事もそうですが途中で投げ出して身につくことはありません。やると決めたらやり切りましょう！
先ほど、「時間を確保したうえでぶっ通しでやれ！」と僕言いましたが
本当に限界なときはちゃんと休みましょうね。
現役フロントエンドエンジニアの僕でも分からなくて泣きそうになるときあります。そりゃあ人間だもの。
そんな時は、頭をリセットするために休んじゃいます。
休んだおかげで、根性＆やる気を超回復し分からないところも分かるようになるはずです！
駆け出しの初心者エンジニアの方には、是非自分を鬼のように追い込んでほしいです。
追い込んでいく中で、辛くなったら休むなどして自分のペースで頑張りましょう！
模写コーディングの効率の良い方法
模写コーディングを実務と仮定したとして、
エンジニアとして一番大切なことはたった2つ。
- 正確でエラーや崩れの無いコーディング
- 納期に遅れないスピーディーなコーディング
この２つが簡単にこなしていけるようになれば、あなたもプロエンジニアと名乗っても過言ではありません。
逆に言えばこれができないようでは、初心者エンジニアからは抜け出せないでしょう。
じゃあ、この2つを模写コーディングで意識してやることで自然と
- 模写コーディング（練習）を効率よくできるようになる
- そして、実務（本番）で活かして活躍する
こういったプロセスを経てプロのエンジニアとなれるわけです。
とはいえ、いきなり正確でスピーディーなコーディングができるわけがありません。
そこで「これだけを意識すれば１秒でも早くプロエンジニアになれる！」方法をご紹介していきます！
正確でエラーや崩れの無いスピードなコーディングの方法
まず大前提。マークアップ言語の基礎の基礎の部分の知識と技術があること。
なので少し自信がないという方は、一旦初歩的なところを復習しておきましょう！
- HTML
- CSS
これらのWeb制作をするうえで、最も使用する言語のことです！
自分に自信がついてきた人は、早速模写コーディングを始めましょう！
正確でスピーディーなコーディングを身に着ける方法は、とてもシンプルです。
- まずは今自分が持ってる知識で、頑張ってみる
- 分からないところが出てきて悩む
- ひたすら調べて自力で解決する
- このトライ＆エラーを繰り返す
この流れをひたすら繰り返すだけです。
自分の間違ったコーディングや知識を、ひたすら鬼勉強をすることで正していくイメージですね！
ミスを無くし頭を使う時間を減らすことでコーディングスピードも格段に上がります。
本やネットで調べるだけでは、うわべの知識しか付きません。
一刻も早く上達したいのなら、「習うよりも慣れよ」この言葉通り手を動かしましょう。
実際に手を動かしながら現役フロントエンドエンジニアの技術力を学べるプログラミング学習Webサービス「忍者コード」が初心者エンジニアの方におすすめです！
当ブログで「忍者コード」で
- 忍者コードの使い方
- どんなことを学べるか
- どんなひとにおすすめか
こちらをまとめた記事がありますで、気になった方は読んでみてください！
模写コーディングに便利な2つのツール
模写コーディングをしたいけど、
デザインはどうやってゲットすればいいんだ・・・？
誰かの有料Noteを買う？作ってもらう？
でもお金はかけたくないなあ。
そこのあなた、現役フロントエンドエンジニアの僕も実践した無料でクオリティの高いデザインで模写する方法がありますよ！
方法は簡単です。とあるツールととあるサイトを活用するだけ。
それはこちら！
続いてこのツールとサイトを活用して、模写コーディングをする流れはこちら！
- 「SANKOU」で好きなデザインを選ぶ
- 「Fire Shit」で全体のスクリーンショットを撮る
- 後はスクリーンショットを元に模写コーディング
これだけです。簡単かつ無料でプロのデザインを模写できる。最高ですね。
ただスクリーンショットだけだとWebサイトにある画像等のデータはゲットできません。
こういった悩みを解決するために
模写コーディングのためのツールの使い方とWeb素材の集め方
これをまとめた記事を公開予定なのでお楽しみに！
模写コーディングで意識すると良いこと
意識すべきことはたった1つ。それは
いろいろな組み方を知ることで得られるメリットはとても大きいです。
獲られるメリットはこちら。
- 自分の引出しが増やせる
- ブラウザごとに崩れが起こりやすい組み方が覚えられる
それでは順に説明していきます！
【メリット①】自分の引出しが増やせる
いろいろな組み方を知ることで、自分の引き出しとなる知識が増えます。
自分の引き出しが増えることで、
- デザイナーさんが作る様々なデザインに対応できるようになる
- レスポンシブ（スマホ画面の対応）のコーディングが容易になる
といったように自分のコーディングに柔軟性を持つことができるため、エンジニアとしての価値が上がります！
またデザインを見たときに「このデザインにはこの組み方のほうが良いな」みたいな感じにコーディングの設計図が思い描くことが可能になります。
この設計図を頭に思い描けると、コーディング効率も上がる＆ミスのないコーディングができるようになります。
こちらの記事にて、コーディング効率を上げる方法まとめているので気になた方は読んでみてください！
/coding-speed-up/【メリット②】ブラウザごとに崩れが起こりやすい組み方が覚えられる
Webサイト制作は作って終わりではありません。
制作後に公開して、実際にユーザに見てもらい行動を起こさせる。
この流れの中で、ユーザがWebサイトに訪れてくれた時に見た目が崩れていたらユーザは離脱してしまいます。
Webサイトの崩れの原因の中で、よくあるのがブラウザごとの挙動の違いによる崩れです。
ちなみにブラウザとは、
ブラウザとは、Webサイトを見るためのソフトのこと。
有名なブラウザはこちら
- Googleクローム
- エッジ
- インターネットエクスプローラー
- サファリ
- ファイアフォックス
ブラウザの挙動はかなり違うため、エンジニアはこの挙動の違いにより死にかけることが多々あります。
しかし、自分のコーディング引き出しを豊富にしておけば崩れが発生したとしても容易に対処できます。
挙動の違いはエンジニアとしての経験値を高めていけば、自然と理解できるようになるので、
模写コーディングで自分の引き出し増やしとブラウザの挙動を理解していきましょう！
どのくらいやれば実務に入れる？
理解度は人それぞれなので、一概にこれだけやればOK！とは言えないのですが、目安として
- 深く悩むこと無く、手を止めずにコーディングできる
- 1ページを8時間以内にコーディングできる。
- 他人が見てもデザイン通りの見た目になっている
上記の項目をすべて達成した模写を3つこなせればOK！
ここまでできれば、もう実務に入っても問題はないです！
むしろ、ここまでできるなら実務を実際にやって経験値を高めたほうが効率が良いと思います！
積極的に、Web制作会社に面接を受けてエンジニアデビューしましょう！
まとめ
今回は、模写コーディングの効率の良い方法をまとめてみました。
模写は難しいですが確実に成長できる勉強法なので、あきらめずに頑張りましょう！
ここまで読んでいただきありがとうございます！
誰かの参考になってくれていれば嬉しいです！
それじゃあ、またね！
