初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

【初心者向け】コーディングが上達する勉強法を現役コーダーが教えます

投稿日:2020年1月13日 更新日:

コーディングが上達するためにmogaが実践した方法
web制作会社に入社したら案件を振られコーディングをするわけですけど、知識や技術がないとき「ちゃんと組めるんだろうか」、「納期までに完了させることができるんだろうか」となりたての時代は不安ばかりですよね。
今回はコーダーになりコーディングが上達するためにやった勉強法を解説していこうと思います。

自己紹介サイトを作りました。

入社してすぐに各々の実力を見るのも兼ねて自己紹介サイトを作ることになりました。
実は私の場合、大学の授業で少しだけかじった程度だったため結構焦りました。
知識は0ではありませんでしたがほぼ0に近かったため、必死に本を読んだりWebで検索したりして進めました。
「ホームページ 作り方」で検索したものです・・・。

載せたい内容をまとめワイヤーフレームを作り、デザインし、コーディングしていくというweb制作の一連の流れをやりました。
ワイヤーフレーム、デザインのパートは省きますが、基本的にコーディングはブロックを意識して作っていきます。
まずヘッダー、フッター、コンテンツ・・・といった具合にブロックで作っていきました。

今あなたがやるとするならば、練習も兼ねてポートフォリオサイトを作るのがいいと思います。
web制作会社に入社するにしろ、フリーランスで活動するにしろ絶対役に立ちます。

公開されているサイトを模写しました。

次に行ったことはweb上に公開されているサイトをスクリーンショットなどを使ってコピーして、そのデザインを基にコーディングを行いました。
フローとしては下記になります。

  1. 自分でも作れそうな簡単なサイトを見つけ、キャプチャーをとる。※模写用のデザインが多々web上にアップされていますのでそちらでもOK
  2. 全部まるごとコーディングするのではなくブロックごとに作っていく(今日はヘッダーを作るなど)。
  3. わからない部分はアップされているサイトを見て(HTMLソースを見たり、CSSを見たり)作っていく。

上記3ステップを繰り返し行ってスキルを上げていきました。
※CSSのみで組まれているサイトを見つけては、どういう風に作っているんだろうとワクワクしながら分析していたのを今までも覚えています。



web上の技術系の記事を読み漁りました。

大体のことはwebにあります。初心者の場合どういう単語で検索すればいいか悩むことが多々あるかと思います。
みんな同じようなところで詰まったりしています。先人の知恵を拝借しましょう。

意外と擬音系の言葉でも見つかったりします。
例)「ぴょんぴょん ボタン javascript」など。

技術系の本を読み漁りました。

私の場合は新卒で制作会社に入社しましたので、先人の知恵が本として会社にたくさんありました。
私が勉強した本は絶版になっていたりして紹介が厳しいですが今勉強するなら下記記事で紹介している本がオススメです。

【未経験必見】webコーダーになるために必要なスキルと勉強法!

まとめ

結論は模写コーディングをしてひらすらコードを書くですね。
私が入社したのはおよそ10年前なのでその当時はprogateやドットインストールといった学習系のサイトが充実していなかったため、ほぼ実戦で学んだことが多いです。

ですが今の時代は無料で学べるツールがたくさんあるので使わない手はないですね。
ただ、今も昔も変わらずいえることは、かっこいいと思ったサイトやランディングページを模写するコーディングで数をこなすと知識と技術が確実に上がっていくとということです。

結局のところ継続して数をこなすことが重要です。

もっとよく知りたいと思った方はコメントでもツイッターに返信でもいいので是非お気軽にご相談ください。

コーディングの進め方はこちらの記事にまとめました。合わせてどうぞ。

まずは流れを知ろう!HTML・CSSコーディングの手順

ではまた。

この記事を書いた人

moga

moga

歴14年のフロントエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.