【初心者から実務レベルまでスキルアップ】コーディングが難しくて進まないを無くす為のロードマップ

昨今のフリーランス革命とも言われる時代の中で、
理想とする生活をする為のプログラミングを始めた方も
多いのではないでしょうか？

かくなる私自身も自分の夢を追い求めてプログラミングを始めた一人です。
今ではWeb制作を淡々とこなす毎日ですが、
プログラミングを始めたばかりの頃は私自身もコーディングに対して

• 模写コーディングを始めたけれども、わからなくて手が進まない！
• そもそもわからないことがわからない！
• 自分の思うようにコーディングができない。。。

といったありさまでした。。。
きっとこの記事を見にきてくれたあなた自身も同じことが
当てはまるのではないかと思います！

「初心者の頃にわかりやすく解決方法をまとめてくれたような
ロードマップみたいなものがあればいいのになぁ、、、」
なんて思いながら日々コーディングの練習をしていたのを覚えています。

なので、今日はそんな初心者で

「コーディングが難しい！」
「思うように進められない！」
「だめだ、、諦めてしまいそう、、、」

となってしまっているあなたに向けてコーディングの難しいを
打破する秘訣をお伝えできたらと思います！

コーディングが難しく感じてしまう理由

コーディングにおいて難しいと感じているけれどもどうすればいいのだろうか、、、と思っている方も多いかと思います。
私自身が今までの経験の中で”難しい”と感じるポイントは大きく分けて5つあるのではないかと思っています。

デザイン通りにしないといけない！

これはコーディングをする上では大前提となっている考え方でもあります。
コーダーはデザイナーが下ろしたデザイン案をWeb上に表示させる為にコードを書く仕事とも言えるからです。

ですが、初心者のうちは完璧を求めてはいけません！
デザインの6〜8割出来たら合格と考えましょう！

本当の案件となると100%の出来で納品するのは当たり前にはなりますが、
まだ練習段階の模写コーディングの段階であれば合格点を下げることは必須です。

回数をこなしていく内にデザインに近づけていければいいですし、
本当に1px単位で正確に合わせるんであれば模写コーディングでは難しいからです。

なのでまずは完璧を求めるよりも、1つでも多くのことを終わらせるということを大前提として進めていきましょう！

各ブラウザ・レスポンシブに対応させないといけない

Webの技術が凄まじいスピード進化していく中で、
そのWebを扱うための携帯やPCといった媒体も様々な形で
進化していっています。

ひとえにPCといっても機種は様々ですし、同じ機種であっても
年式によって使用も異なってきます。

そして、Webサイトを閲覧する為には切ってもきれない関係にあるのが
SafariやChromeといったWebブラウザ達です。
このブラウザも各会社ごとで仕様が異なっているのもクセモノですね。。。

PCなどのデバイスの幅はある程度決まってはいるものの、
Webブラウザの仕様はマチマチなので、
コーディングが終わってからチェックすると全然違っていたりも
するところが厄介なポイントとなってきます。

初心者のうちはまずはPCのレイアウト（大体1440px）と
スマホのレイアウト（大体375px）を作れるようになるといいでしょう！

こちらのpx幅については検証ツールで分類出来ますので、
検証ツールを使ってレイアウトを切り替えてコーディングをしてみましょう！

Javascriptが難しい

このJavascriptは非常に優秀なプログラミング言語でもあるのですが、
エンジニアを目指す人たちが挫折をする登竜門的な言語でもあります。

確かにJavascriptを完璧に描こうとするとそれ相応の経験が
必要にもなりますが、今の時代ではjQueryというWeb制作を
する上でJavascriptを簡単に記述できて、
高度なアニメーションを簡単に実装できるライブラリもあります。

基本的にWeb制作の現場ではjQueryを使っていることがほとんどなので、
プレーンなJavascriptが難しいと感じるのであれば
jQueryを使うことをオススメします。

Javascriptをしっかりと勉強したいという人は、
Javascriptのメカニズム（どの様にしてJavascriptが動いているのか）を
勉強することで、言語の動作が見えてくるのでオススメします！

模写サイトのレベルが難しすぎる

これも初心者がコーディングで挫折してしまう理由のトップに入ってきます。
いうならば、筋トレをしたことがないのに無理に重たいダンベルを
使ってトレーニングしているのと同じです。

まずは簡素化されたシンプルなサイトを選んで模写コーディングを
することがいいでしょう。
肌感覚として「これなら出来そうだ！」と思えるレベル感に
しておくのが無難です。

私自身は一番最初の模写コーディングでは難しいサイトを
選んでしまったので、実施には模写コーディングが完成するまでに
１ヶ月半くらいはかかっていました。

難しいサイトを選んでそれを乗り越えるだけの熱量と
行動量があるのであれば、無理にとは言いませんが、
ほとんどの人はそうやって果敢にもトライしても挫折を
しているのが現状かと思います。

近くに経験値のあるメンターがいるのであれば問題はありませんが、
ほとんどの人は独学で模写コーディングをしているかと思います。
誰にも頼れない状況に加えて、まだ右も左もわからない状況が合間って、
心理的にかかる負担はかなり大きいものにもなるかと思います。

まずは1週間ほどで完成させられそうなサイトを選んでトライしていくのがいいでしょう。

やりたい実装に対して道筋が立たない

模写サイトをみた時に「これってどうするんだろう？」と思ったものの、
どこから手をつけていったらいいのかわからず、
そのままフリーズしてしまうなんてこと、あるのではないでしょうか？

大丈夫です！これは誰にでもあることなので仕方ないです！
まだ慣れていないうちはどういった順序で物事をロジカルに
考えていったらいいのかもわかっていない為に起こってしまう問題です。

この記事ではこの「わからないけどどうしたらいいのだろう？」を
乗り越える為の考え方や行動フロー等も説明していますので、
後のセクションから学んでみてください！

「わからない」を乗り越える為の大事な3つのポイント

初心者から実務レベルまでスキルアップしていく中で一番大事なのは
”自分の中にあるわからないをどうやって解決していくか”
です。

ここでは私自身が実務から学んできた
問題解決のために欠かせない3つのポイントをお伝えします。

①大前提となる問題解決のフロー

大前提となる考え方の結論としては
「仮説を立てて検証していく」ということです。

わからないことに直面したらすぐにググる人もいるかとは思いますが、
一番最初のステップでは絶対にググってはだめです！

何も絶対にググってはいけないというわけではありません。
問題を解決する為には「今何が問題になっているのか？」を
具体的にしないといけないからです。

闇雲にググって、答えが見つからなければまたググってを
繰り返して、結局問題は解決出来なかった。。。
なんて経験はありませんか？

これはなぜ起こるのかというと、
問題に対して何が原因であるのかを把握できておらず、
どういったところからアプローチをしたらいいのかが
わかっていないからです。

すぐに調べるという行動力は素晴らしいものではあるのですが、
調べるという行為の前に”仮説”を立てることで
その調べるという行為の価値は何倍にも跳ね上がります。

一回の検索で答えを見つけられれば、闇雲にググるよりも
ずっと効率的ですし、記憶にもしっかりと残ってくれます。
なので、まずは落ち着いて問題をリストアップしていくのがいいでしょう。

以下に示すものが、私が問題に当たった時に考えている頭の中を
フローにしたものです。

最初は少しめんどくさく感じるかもしれません。
ですが、エンジニアとして自分の力で問題を解決していきたいと
思うのであれば、自分の頭の中にあるものを見える化して、
そこに仮説を立てて検証をしていくというスキルはすごく重宝されます。

実際のところ、実務となると問題が起きた時に誰も助けてはくれません。
特にスクールのようにおんぶに抱っこという訳もいきませんので、
やはりエンジニアとして成長していきたいのであれば、
”自分で問題を解決するスキル”はマストでしょう。

②Google先生に教えてもらう

独学で学んできた私は全部このGoogleで検索をして問題を解決してきました。
その経験からいうに、Googleに解決できない問題はないとも思います。
というよりもGoogle検索を使いこなすというのはエンジニアにとっては
切っても切れないスキルとも言えます。

ですが、無数にもあるWebページの中で自分に必要な情報を検索を通して
ヒットさせるというのは容易ではありません。
なので、自分の欲しい結果を検索でヒットさせる為に必要なのが、
①大前提となる問題解決のフローで紹介した”問題の仮説”です。

この仮説がベースにないとどういった検索をしていいかがわからないので、
闇雲にググりまくるしかないという負のループに陥る訳です。

とはいっても、
「仮説は立てられたけれども、どういったワードで検索すればいいの？」
と思われるかもしれません。

初心者のうちはそもそも、”単語”を知らないので検索ワードが
出てこない問題に直面するかと思います。
ですが、今のあなたの中にあるワードを組み合わせて、
欲しい結果に近い単語は生み出せるかと思います。

まずはそのワードを使って調べてみてください。
そしたら、次の結果が出てきます。
その結果を元に再度仮説を立てて検証していくのです。

オススメとなるのは調べた先で出てきた方法やワードで、
「これは問題解決に近いんじゃないか？」と思うものを
再度調べていくということです。

何よりも多くのワードに触れて、「こんなこともあるのか！」
と新いこと知ることも非常に大事です！
そうやっていくうちに、使える単語の数も増えていくので、
より仮説を立てやすくなっていきます。

最初の頃は時間がかかることも多いかとは思いますが、
そうやって仮説を立てていくことで、自走力が身に付きますし、
「わからない」状況に陥ったとしても自分で道を作っていくことができます。

③これを実装したいサイトがあるなら検証ツールからパクる

エンジニアとして日常的にお世話になるのが「検証ツール」です。
検証ツールとはWebサイトのソースコードやネットワークでの通信に関しての
情報を教えてくれる神ツールです。

この検証ツールを使えば、適用されているCSSを見ることや
Javascriptがどうやって動いているのかなどを調べることができます。

また、CSSをはじめとしたソースコードも引っ張ってこれるので、
自分よりもスキルのある人が作ったWebサイトを分析する上では
必ず必要になるツールです。

特に検証ツールでは答えを見ることができるようなものなので、
自分が考えた仮説がどうやって実装されているかを事細かに
チェックすることができます。

気になったサイトなどはこの検証ツールでどういったことを
しているのかなどを日頃からチェックして見るのもいいかと思います。
もちろん、ただ見るのではなくて自分の中で仮説を立てて、
それを検証するとより一層いいでしょう。

どう進めたらいいの？コーディングの具体的なステップフロー

意外と思うことは、コーディングの具体的なステップを把握せずに
模写コーディングをしている人が多いなという印象です。

例えるなら、旅行で北海道にいくとだけ決めたけれども、
移動手段や日程は何も決めていないようなものです。

そこで私の経験から導き出したコーディングでのフローをご紹介します。
しっかりとしたスケジューリングをすることで、
今何をしているのかをご自身の中で把握して、
着実に前に進むための足枷に使ってください。

具体的なフローの概要は以下の通りです。

それでは、一つずつ見ていきましょう！

1.模写のルールを決める

実際の現場でも各会社ごとに決まった制作でのルールがあります。
これはフリーランスで仕事をする上でも重要な考え方かと思います。
早いうちから、自分の中でルールを決めておくことは重要ですし、
そこから改善を繰り返していくことで、確固たるルールが
作られていくこともまた事実です。

まずはチグハグでも自分の中でのルールを決めてみてください！
どちらにせよ改善していくことが大前提となるので、
無理に完璧なまでに細部まで作り込まれたルールを作るのはNGです！

また、やりがちなミスとしては「ルールを作ることが目的」になって
しまう人も多くいられます。。。
最終的な目的は模写コーディングを完成させることなので、
それだけはお忘れなく！！

「実際にはどんなルールですか？」と思う方もいるかと思いますので、
簡単にご紹介するのであれば、

・コーディングは各セクション毎に行い、PCのレイアウトをしてからスマホのレイアウトも行う。
・順番はHTMLを書いてからCSSを実装し、Javascriptを実装する。
・CSSのクラス名はわかりやすい単語か動詞を使う。

などです。

やってみてここは違うなと感じるポイントもあるかと思いますが、
都度都度細かく変更するのではなくて、模写コーディングをしてから
しっかりとフィードバックをして改善していくことをオススメします。
（ケースバイケースな部分もありますが。）

ちょこまかとルールを変えてしまうと、模写コーディングを終えてから、
ここは何を考えてこうしたのかなどが見えなくなるからです。

一旦決めたルールで完走してから改善点を見出して、
ルールを変えていく方が遥かに効率的です。

2.模写サイトのコーディングを予測してスケジュールを立てる。

コーディングを開始するに当たって大事なことは、
問題解決の時に実践した”仮説を立てて検証していく”
ということです。
（大前提となる問題解決のフロー）

つまりは、模写をするサイト全体を見まわした時に
「ここはあれをこうしたらできるかな」と
ある程度の予測を立てておき、そして、
そこから模写コーディングのスケジュールを立てる
ということです！

なぜ、スケジュールを立てておくことが大事かというと、
実案件では決められた納期の中で最高のパフォーマンスを
発揮しなければならないからです。

決められた納期に対して納品が遅れるということは
あってはいけません。
仕事を依頼してくれるクライアントは1日でも早くビジネスを
展開していきたいと考えていますので、納期が遅れれば遅れるほど
クライアントの機会損失に繋がります。

それに、仕事に対してきちっとした成果を出せないのであれば、
次から仕事を依頼されることもありません。

なので、模写コーディングの段階からきちっとスケジューリングをして、
その計画に対して自分の中でフィードバックができるように
練習をしておくことが何よりも大事です！

初めての模写コーディングであれば中々スケジューリングが
難しいと感じることもありますが、ざっくりと立ててみてください！
その立てたスケジュールを元にコーディングが終わってから、
しっかりフィードバックをすれば問題ないです。

私自身は一番最初の模写コーディングは3週間ほどで
みていましたが、実際にコーディングの完成までには1ヶ月半ほど
かかってしまいました。。。

最初は思うようにはいかないものなので、
あまり背負いすぎずにトライしていきましょう！

3.コーディング開始

スケジューリングまで終われば、いざ本番です！
ここから先は自分の中で決めたルールとスケジューリングを
守りながらコーディングを進めていくだけです。

コーディングをしていてわからないところに直面した時は、
「わからない」を乗り越える為の大事な3つのポイント
で説明した問題改善の為の考え方をベースに問題解決をしてみましょう！

「大前提となる問題解決のフロー」はこちら

4.Javascriptの実装

コーディングが終わればコーディングの登竜門とも
名高いJavascriptの実装です。

Javascriptの実装に関しては、個人個人のルールの中で
実装するタイミングが異なることも多いですが、
まずは一旦コーディングを完走してからJavascriptの実装に
取り掛かる方がいいでしょう！

プレーンなJavascriptは難しいと感じると思いますので、
最初はWeb制作の現場でも多く使われている
jQueryを使うことをお勧めします。

jQueryはJavascriptをより簡単に使えるようにしたものなので、
初心者にとってはかなり重宝されるものです。

ただ技術な発展もあり、近年ではJavascriptのライブラリや
フレームワークも発達してきています。
その時代の流れの中で、jQuery自体が時代から
取り残されていくことも考えられますので、
Javascriptの勉強もしっかりとしておきましょう！

いずれにせよ、Webページに様々な動きをつけたりするのに
Javascriptは必ず必要になるプログラミング言語です。
他のフリーランス と差別化を図るWebサイトを作れるようになる為に
コツコツと勉強を積み上げていきましょう！

Javascriptの実装でわからない時が出た時も、
”仮説を立てて、それを検証していく”ということを
お忘れなく。
不安に感じる部分も多いかと思いますが、
ゆっくりとしっかり考えれば、必ず達成できますので、
頑張ってください！！

5.デザイン確認

コーディングとJavascriptの実装が終われば、
納品前にもする必ずする必要がある、
デザインチェックです。

デザイン通りにフォントサイズやmargin、paddingといった
余白などを1px単位で合わせることは大前提です。

デザイナーはWebサイトを使うユーザーのことを考えて、
適切なフォントサイズやボックス同士の余白などを考えています。

しかしながら、コーディングを実装するあなたが、
その意図を考えずに適当にコーディングをしてしまうと、
出来上がったWebページはパッとみは同じでも、
デザインとは大きく解離するものとなります。

普段はあまり気にせずにWebページを使っているかもしれませんが、
プロは細部までこだわって物づくりをしています。
それはWebページだけに限らず、日常に溢れる
ありとあらゆるものでも同じことが言えます。

緻密な設計を実現するからこそ、
使い心地のいいものは出来上がるので、
初心者だからではなくて、プロとしての自覚を
持ちながら練習もこなして行く方が、
ゆくゆくの大きな成長に繋がります。

それに神は細部に宿るとも言いますが、
そういったデザイナーの意図を汲み取って、
そこまでしっかりとコーディングができるエンジニアは
数少ないので、かなり重宝されます。

デザイナーとしても1px単位でしっかりとコーディングを
してくれる人に自分自身のデザインをコーディングしてもらいたいので、
そういう人には自然と仕事が舞い込んできます。

ただ、模写コーディングの場合は案件とは違って、
デザインカンプ（コーディングする為のデザインの設計書になるもの）が
ありませんので、px単位で合わせるのは難しいところもあります。

なので模写コーディングでのpx単位の設計は検証ツールで調べて、
同じpxサイズに合わせていくようにしましょう！

Webサイトをみただけで「これは何pxだ！」とわかるように
なる必要はありませんので、無理にそこに執着する必要はありません。
あくまでも”設計書通りに実装する”ことが大切です。

また、補足にはなりますが、実際の現場では
一旦コーディングをしてから、デザインを変更したり、
デザインのカラー等を変更することも多くあります。

実際にコーディングをしてみることでカラーの色合いが
デザインと変わってしまうということもよくあります。
実際にブラウザで表示してみないとわからないことも
多々ありますので、そういった変更は日常的にあります。

6.フィードバック

デザインチェックまで終われば、
最後の締めとなるのがフィードバックです。

このフィードバックではコーディングをする前に立てた、
”自分の中のルール”と”コーディングのスケジュール”をもとに
自分自身の中でフィードバックをしていきます。

何がうまくいかなかったのかや、うまくいったこと、
知らなかったことなどを洗いざらい出していきましょう！

特にコーディングをする上で時間がかかった点は
あなた自身の中での成長ポイントでもあります。

自走力が身についているエンジニアは
自分で問題解決をして成長をしていけるエンジニアです。
この自走力はフリーランス を目指すにしても、
転職を目指すにしても必ず必要なスキルです。

優秀な自走力のスキルを身に付ける為にも
このフィードバックが欠かせませんし、
そこからの改善も欠かせません。

初めてのコーディングで難しかったことも
沢山あったかとも思いますし、
思うようにできなくて「自分でもできるのかな、、、」と
落ち込んでしまったこともあるかと思います。

ですが、それは今現場で活躍している先輩方も
同じように辿ってきた道でもあります。

まずは初のコーディングを完走することができた
自分自身をしっかりと褒めて上げることも大事です！

それに、大多数の人はこの模写コーディングを
完走することなく挫折していく人がほとんどです。
なので、完走できたあなた自身は十分にスキルがあると
言えます。

あとは登っていくだけなので、
どんどん数をこなして成長していきましょう！！

コーディングを上達させる3つのポイント

「コーディングが難しくて進まない、、、」と感じているのなら、
きっとコーディングのメカニズムを理解していないことに原因が
あるかもしれません！

メカニズムというと難しく感じるかもしれませんが、
どういった思想の元でコーディングをしていくのか
ということです。

そこで初心者がつまずいてしまうポイントと、
ここを抑えておくとコーディングが理解しやすい
ポイントをまとめてみました。

①ボックスモデルを常に意識する

コーディングを実装する上で一番大事な考え方でもあります。

このボックスモデルはCSSでの説明でよく出てきますが、
意識するのはCSSだけでなく、HTMLの記述でも
同じことが言えます。

それはブラウザで表示されているものは、
一般的には箱（ボックス）の積み重ねだからです。

ここでいうボックスとはdivタグやpタグなどの
タグで囲んだ範囲のことです。
模写コーディングでも実際には沢山の要素をdivで囲んだり、
一度divで囲んだ範囲をdivで囲んだかと思います。

つまりは、箱を用意してその箱をどう積み上げていくかを
実装していることになります。

Webサイトをみた時に、どういった箱が積み重なっているのかを
常に意識しながら見てみてください！

検証ツールで確認をしてみると、
「こんな方法もありなのか」と新しい発見を
することもできます。

特に要素の余白を作るmarginはマイナスの値も取れるので、
箱に対してマイナスmarginをつけて、
デザインを再現する時もよくあります。

気になったところに対しては、
どういった箱の作り方をしているのかを意識して
見てみるようにしましょう！

②クラスのネーミングテクニック

初心者で難しいと感じている点で
「CSSのクラス名のつけ方がわからない！」
という声を非常に多く耳にします。

実際、私自身もコーディングを始めたばかりの頃は、
「どうやってクラス名をつけていったらいいのだろう？」
と頭を抱えていました。

ズバリ、結論から言うに、CSSのクラス名は以下のことを
ポイントとして考えればかなり簡単になります！

①わかりやすい単語・動詞を使う

CSSのネーミングとしてはそのクラス名が
「何を表しているのか」を明確にすることが
非常に重要になります。

コーディングでありがちなのが、
コーディングをしている時は覚えているけれども、
あとで見返した時に何が何だかわからなくなる現象です。

「これって何を思ってこのクラス名にしたんだろう？」とか、
「あれ？ここの部分のCSSが見当たらない、、、」などの
問題がよく起こります。

あなたは3日前の晩ご飯を思い出せますか？

この質問に答えられる人は少ないかと思います。
なんなら、昨日食べたものでも思い出せないかと思います。
この事実からわかるように、人間はすぐに忘れていく
生き物ということです。

それに、難しい文章を読んでいると眠くなりませんか？
仮に、六法全書(「憲法」「民法」「刑法」「商法」
「民事訴訟法」「刑事訴訟法」について書かれた法律の本)を
解読しようものなら、１ページも読み切ることなく
夢の世界に飛び立つことになるかと思います。

このように難しいことを理解するのは
人間にとってはかなり苦痛になります。

絶対に覚えておいてもらいたいことは、
「人間は忘れる生き物」ということです。
そしてもう一つ、「人間はバカ」ということです。

この2つのことはめちゃくちゃ重要なので、
しっかりと覚えておいてください！

上記の2つの事実をもとにCSSのネーミングを考えるとなると、

・簡単なネーミングで何を指しているのかがわかる
・どんな動作をしているのかがわかる

というのが必要な要素となってきます。

具体的な少し例を上げると、

class=”profile-title”
class=”profile-titleUnderText”
class=”button-color”

などのようなネーミングです。
上記の例であるならば、
「プロフィールのタイトルのCSSなんだな」、
「タイトルの下のテキストのCSSだな！」や
「ボタンのカラーについてのCSSか」と
予測しやすくなります。

わかりやすく意図を伝えることで、
誰がみてもわかりやすく、理解しやすいCSSの
ネーミングが可能になりますので、
「3日後に自分が読んでも理解できるか？」を
常に頭の片隅においてネーミングをしてみてください！

②短いネーミングにする

これは①わかりやすい単語・動詞を使うに
当てはまることでもあるのですが、CSSの
ネーミングを長くしすぎないということです。

では、なぜCSSのネーミングを長くしすぎると
ダメなのでしょうか？

それは単に管理性が悪くなりコードが見にくくなるからです。

ただし、実案件ではデザインが複雑だったり、各デバイスやブラウザ、
Javascriptに対応させる為に特別なクラスを複数つけたり
することもありますので、一概に悪いとは言えません！

あくまでも管理する上で、
「簡素にまとめられている方が、
あとで見返した時にわかりやすくていいですよね」
というニュアンスで受け取ってください。

例えばですが、

class=”profile-title fontColorPink fontColorChangeMobile”

みたいなCSSのクラスがあったとします。

これってパッと見てどう思いますか？
私はゴニョゴニョしすぎてて鬱陶しい！と感じます。

これが一つだけならまだいいですが、
いくつもこんな感じのものが並ばれると、
頭では理解できなくなってしまいます。

ここに縛られすぎると、
ひたすらネーミングだけを考えている無駄な時間を
過ごしてしまうからです。

確かにネーミングも大事ですが、
最終的な目標は成果物を完成させることにあるので、
そこばかりに気を取られないでくださいね。

③ネーミングパターンを決める

CSSのクラス名を考えるときに、
自分の中でのお決まりのパターンを決めておくと、
リズミカルにクラス名を決められるので、
非常に効率的にコーディングを勧められます。

それはどんなことかというと、
コーディングをする上でのHTMLのレイアウトは
お決まりのパターンが多いからです。

タイトルがあって、その下にテキストがあって、
右か左か画像があるようなレイアウトです。

パターン見出せればテンプレ化させることができるので、
非常に便利です。

例えばですが、

<section>
    <div>
        <h2>タイトル</h2>
        <p>テキストテキストテキスト</p>
    </div>
    <img src="./hogehoge.png" alt="hogehoge">
</section>

といったHTMLがあったとします。
これにクラスをつける時ですが、

<section　class="hoge">
    <div class="hoge-contentsLeft">
        <h2 class="hoge-title">タイトル</h2>
        <p class="hoge-text">テキストテキストテキスト</p>
    </div>
    <img class="hoge-img" src="./hogehoge.png" alt="hogehoge">
</section>

といった風に、コンテンツはどこに配置するのかや、
その要素自体がタイトルなのかテキストなのかなどで、
つけるクラス名を決めておくということです。

慣れの部分もあるかとは思いますが、
検証ツールを用いていろんなサイトのネーミングパターンを
パクるのが早くてオススメです！

④用途ごとに使い分ける

少しだけ入り組んだ話にはなるのですが、
CSSにクラスをつけるのにはJavascriptの実装や、
一意なデザインに対しての実装など、
実に様様な理由があります。

そこで、用途ごとにクラス名をある程度テンプレのように
使うことで、そのCSSが指し示す役割を明確にすれば、
後から見返してもわかりやすいCSSになります。

どういったことかというと、
例えば特異的にフォントサイズを変えたい時が
あったとします。そういう時は、

class=”font-sizeChange”

といった風にfont〜で始めることで、
何に対してのCSSなのかを明確にすることができます。

他にもJavascriptの実装で使うようなCSSであれば、

class=”js-panel”

の様にjs〜で始めることで、
Javascriptの実装で使うクラスだとわかります。

これは共通のクラスを使い回すときや、
特異的に一部分だけCSSを変えたい時などに
非常に有効に使えるテクニックです。

なんの役割を指し示しているのかを記載することで、
複数のクラスがついた時に、分類ができるのも
メリットの一つです。

コーディングで困ったときのお悩み解決編

コーディングではエラーがつきものです。
特に「思い描いていた通りに実装ができない！」
というのもよく見かけます。

他にも「CSSが効かなくて泣きそう。。。」といった様な
声を聞いております。

そんな時に役に立つのが、エラーを解決する手引きと、
実戦でも使えるノウハウではないでしょうか？

実務での経験をもとに、
つまづきがちなポインをまとめましたので、
紹介していきます！

CSSが効いていない？！お悩み解決

コーディングでのエラーとして最も多いのが、
「CSSがちゃんと反映されない！！」という声です。

実務でもやっている解決方法をお伝えしていきまので、
状況に合わせて使い分けてください！

①CSSが反映されない時の対処方法

「CSSを記述したけれども、ブラウザ上での見た目が変わらない、、、」
という時によくやっているミスは以下の通りです。

CSSが効かない時にチェクリストを上から順に
チェックしていきましょう！！

実際のところ、スペルミスや、{}が一つ足りていないなどの、
凡ミスがかなりトップに君臨しています。

打ち間違い等は起こりうることなので、
落ち着いてCSSが聞いていない原因を探りましょう。

②CSSのメカニズムを考える

CSSが効かない理由として、①CSSが反映されない時の対処方法
でも扱いきれない原因があるとすれば、
CSSのメカニズムに依存する部分かもしれません。

CSSのメカニズムとは、どの様にして、
ブラウザのテキスト等にCSSを適用させているのかを
指しています。

CSSも一つの言語なので、
開発者の思想に基づいて、裏ではプログラムが動いています。

この裏で動くプログラムが起こすエラーも
実際のところ沢山ありますので、簡単に概要だけを紹介していきます。

CSSの優先度

CSSは一つの要素に対して、いくらでもCSSを
書き加えることができますし、
特に開発では共通のクラスを適用させてCSSを実装することが
当たり前です。

意図的にCSSを干渉させてmarginなどの余白をなくしたり
することもありますが、複数のCSSをつけることでCSS同士が
干渉してしまうケースも多くあります。

そのCSS同士が干渉するケースで多いのがCSSの優先度の違いです。
CSSの優先度とは一つの要素に対して、どのCSSを優先的に
適用させていくのかというルールです。

この優先度はクラスをつけるのか、IDをつけるのかや、
インラインで書くのかなどで変わってきます。

例えばですが、部分的にフォントの色を変えたり、
共通クラスを使用するが、CSSの設定を少し変えたいなどを
思ったことはないでしょうか？

この時に出てくるのが優先度という考え方です。

しっかりと管理しているのであれば問題ありませんが、
コードの書き方のミスで予期しない優先度の上昇で、
思っている実装ができなくて困るというケースも
決して多くはありません。

CSSの記述をする時はなるべくフラットな優先度を
意識して書いていく必要があります。

z-index

z-indexは要素同士の重なりを指定するCSSです。
立体的なデザインでは非常によく出てきます。

このz-indexですが状況にもよりますが、
子要素の位置関係を指定する時に、
思っている挙動とは違う挙動を示すことがあります。

それはz-indexの重なりは親要素に依存するからです。

例えばですが、
ある2つの親要素があり、その子要素をそれぞれ、
z-indexで位置関係を指定したい時などに起こります。

この場合でしたら、どういうボックスでくくるのか
というところがポイントとなってきます。

前出でもお伝えしましたが、HTMLをコーディングする上で、
ボックスモデルをどう組み込むかで、
CSSの実装方法も変わってくるということです。

時にはその実装がボックスの括り次第では、
束縛されてしまうケースもあるということを
覚えておきましょう！

marginの相殺

marginの相殺とは重なり合う上下のmarginは
相殺されるということです。

要素同士の余白を80pxとしたくて、
要素1にmargin-bottom: 40px;を、
要素2にmargin-top: 40px;をつけた場合に
marginの相殺は起こります。

このことから言えるのは、marginの余白に関しては、
topにつけるのか、bottomにつけるのかを自分の中の
ルールとして統一しておくことが重要になります。

意図しないmarginの相殺でレイアウトがズレている、
なんてことにならない様に気をつけましょう！

em,rem,%,vh,vwの仕組み

レスポンシブでのコーディングをする上で相対指定は
なくてはならないものです。

この相対指定のCSSではどこを基準として、
相対的な値をとるのかが異なってきます。

また、それぞれの使う場面も異なってきますので、
適切な箇所（例えばフォントサイズならrem）で使用しないと、
思っている挙動とは違う挙動をとることに繋がります。

少しややこしい部分でもあるのですが、
それぞれの使い所に合わせた相対指定をしてあげましょう。

②エラーをわかりやすくするための施策

CSSでは現状として、スペルミスなどで起こるエラーを
教えてくれないという非常に不親切な部分があります。

なので、単なるスペルミスでも気付きにくく、
その解決にすごく時間を使ってしまったなんてことも、
非常によく起きる事件として挙げられます。

そこでこのエラーを教えてくれる機能もついた、
CSSの便利な拡張機能として「Saas（またはScss）」が
あります。

これはCSSを非常にわかりやすく、かつ、
便利な拡張機能を使うことで、よりCSSを効率的に
開発することができる優れものでもあります。

また、なんと言ってもSaasはWebで読み込む時に
CSSに変換する（これをコンパイルするともいいます。）のですが、
その時にCSSでの記述ミスがあるとエラーを返してくれます。

このエラーを返してくれるおかげで、
コロン（;）が抜けていたりなどの凡ミスに対して、
瞬時に気づくことができる様になりました。

Saasの使い方についてはプロゲートに講座があるので、
そちらで勉強してみてください！

実際の開発現場では当たり前の様に使われているので、
ゆくゆくは必須になるものとも言えます。

JSが効いていない？！お悩み解決

Javascriptでのエラーが起きてしまうと、
「どうしよう、、、」と焦る気持ちはよくわかります。

「ただでされ難しいJavascriptなのに、エラーなんて、、」と
悲しい気持ちになったのをよく覚えています。。

Javascriptのエラーに関してはお伝えするのであれば

・今、どんなエラーが出ているのか？
・どこまでプログラムは動いているのか？
・変数やオブジェクトには何が格納されているのか？
・どこを直したら問題が解決しそうなのか？

を明確にしていくことです。

Javascriptのデバックとしてconsole.log()などがあります。
こう言った道具を使って、問題点を明確にしていくことで、
解決の糸口は見えてきます。

あとはJavascriptがどうやって動いているのかなども
勉強しておくと、解決策は見えやすくなります。

ここに関してはどれだけエラーを起こして、
解決してきたのかが成長のポイントになりますので、
エラーが起きた時は悲しまずに、「成長ポイントが目の前にある！」
という気持ちを忘れないでください。

CSSのカンペ集？！困ったときのスニペット！

プログラミングをする上での大事な考え方として、
「車輪の再開発はしない」という言葉があります。

これは、車を作る時に新しく車輪の設計から始めるのではなくて、
すでにある車輪の設計書を使えば無駄なことをせずに、
車の開発が勧められますねという意味を持っています。

世の中には沢山の優秀なエンジニアがいて、
そう言った方達が便利なツールを沢山開発してくれています。

つまりは、そういったツールを使っていくことで、
無理に自分自身だけで開発をしなくてもいいようになるということです。

そこで登場してくるのが、CSSの自動生成ツールや、
CSSをテンプレ化させてあるコードスニペットなどです。
いうならば、CSSのカンペ集とも言えます。

プログラミングはいくらでもカンニングOKなので、
先人達が作ってくれた便利ツールは余すことなく、
使っていきましょう！！

そのほうがハイクオリティだったりもしますし、
自分なりのカスタムを加えていくことで、
自分自身のオリジナルを作っていくこともできます。

むしろ、既存の技術をうまく組み合わせるスキルがある方が、
エンジニアとしての上達も早いと思います。
（組み合わせるにも前提となる知識が必要だからです。）

様々なツールがあるので、
必要な時に調べて、使ってみてはいかがでしょうか。

実務を通して感じたおすすめ学習方法とNG学習方法

最後に今、コーディングが難しいと感じている方に向けて、
私自身が実務を通して学んできたことをお伝えしていきます。

実際に私自身がやってきたことでもあるので、
少なからず、助けにはなることです。

①心構え

コーディングを勧めていく上でも、
エンジニアとして仕事をする上でも大事な考え方です。

多くの先輩エンジニアをみてきた中で、
それぞれ共通しているなと思う点をピックアップ
していますので、ぜひ取り入れてみてください！

「隣の芝生は青い」という言葉がありますが、
プログラミングにおいても同じことが言えると思います。

ちょっと周りを見回したら、優秀な人はごまんといますし、
不安なところは永遠に出てきます。

着実にステップアップしていくには、
そういった感情に対して割り切ることが大事です。

いつまで経っても同じ基礎をぐるぐると学習していても、
システムを組める様にはなりません。
システムを組める様になるにはシステムを組むしか
道はありません。

「ここまで学んだから大丈夫だろう！」と割り切って、
次のステップにジャンジャンと進んでいってください！
そのときにわからないことがあれば、振り返ってみて、
復習すればいいですし、新しいことも学べはOKです。

必要なのは前に一歩進む勇気です！

②コーディング学習のフローステップ

ここでは初めての学習からステップアップしていくまでの
大まかなフローをお伝えします。

ここの詳しい詳細に関しては割愛させていただきますが、
お伝えしたフロー毎に調べながら学習をする方が、
学びも大きいかと思います！

step1　プロゲートとドットインストール
step2　検証ツールを用いた模写必殺技
step3　いざ、模写をする。
step4　思ったことを実現できるまで汚くても書き殴る
step5　書いたコードを綺麗にしていく
step6　SEOなどの知識をインプットして応用していく。

step2〜4に関しては、
どう進めたらいいの？コーディングの具体的なステップフロー
で詳しく説明しています。

step5はCSSのクラス名を決める時に説明したこととも
かぶるのですが、全体を通して誰が読んでもわかりやすく、
かつ、瞬時に理解できるコードを書いていく必要があります。

「3日後の自分が見ても理解できるか？」を
意識して、コードをより洗礼されたものに
磨き上げていきましょう！！

step6は応用編になるのですが、コーディングをする上で、
SEO対策（検索で適切な情報を表示する施策）が欠かせません。

これはWebの普及とともに、ユーザーが欲しい情報を
ちゃんとネットから拾えるようにしないと、ユーザーは
振り向いてくれないので、会社の事業の成功の可否に
関わってくるポイントでもあります。

制作を依頼してくれるクライアントに対して、
適切な情報をWeb上に表示できる様に、
しっかりとSEO対策についても学んでおいてください！

また、サイトスピードの改善など、少しでも
ユーザーが使っていて違和感を覚えないサイトにする為にも、
様々な技術について学ぶ必要性があるでしょう。

③NG学習方法

基本的な学習スタイルに関してはこれまでのセクションで
お伝えしてきたとおりですが、
忘れてはいけないのがNGな学習方法です。

NGな学習方法については3つあります。
「無意識のうちについついやってしまっていた」なんてことに
ならない為にもしっかりと確認しておきましょう！

・丸暗記
・完璧主義
・不安だからって同じところを何回もする

初心者でありがちなことは、
何でもかんでも丸暗記してしまおうとすることです。

確かにある程度は覚えておく必要があるのですが、
英単語を覚えるようにコードを覚える必要はありません。

プログラミングは学校のテストとは違って、
いくらでもカンニングをすることができます。
わからなくなった時に都度都度調べて、
解決できれば優秀なエンジニアともいえます。

覚えるのに労力をさくのであれば、
一つでも多くのサイトを模写した方がいいでしょう！
実践ベースで学ぶ方が記憶にも残りますし、覚えられます。

完璧主義においても、
完璧を目指しすぎるとかえって効率が悪くなります。
細部までこだわる姿勢は素晴らしいですが、
今、確実に成し遂げなければいけないもの優先順位を
しっかりとつけて、どこまでが合格点なのかを
スケジューリングしておくのがいいでしょう。

④スキルアップさせていくために

模写コーディングが終われば、
うまく実装できなかったところなどを修正して、
自分自身の課題を克服していきましょう！

また、それとは別にどんどんと新しいスキルも
身に付けていく必要があります。

ここではここに対して詳しくは説明しませんが、
コーディングを進めていく上でも大事なスキルを
ご紹介します！

模写コーディングを完了して、次は何をしたら
いいのかに迷った時などに参考にしてください。

・誰が呼んでも理解できるコードに直していく
・書いたコードを説明してみる
・CSSのメカニズムを考える
・書いたコードをテンプレ化させていく
・Sassやemmetを使って効率的に開発する
・Javascriptやphpなどの基礎学習
・サーバー周りやSEO対策を学ぶ

まとめ

初めてのコーディングでは壁にぶち当たることも多く、
何かとメンタル的にもやられてしまいます。

ですが、そこを乗り越えてこその大きな成長です。
現場で活躍している先輩方もこの登竜門を
突破しています。

特にコーディングでの考え方や、
問題解決の方法はこの先もずっと使い続ける
基礎となるスキルとも言えますので、
しっかり身に付けておきましょう。

わからないことがあるのは大前提なので、
それをどうすればできるようになるのかの
道順を立てれるようにしていくことが何より大切です！