コーディングをやってみたけど難しすぎて挫折しそう……
コーディングって難しいって聞いたんだけど、ほんとなの？
簡単に身につける方法ってないのかな？
Webサイト制作やブログのカスタマイズ等をする際に、切っても切り離せないスキルであるコーディング。
ちょっといじってみたら、おかしなデザインになってしまったり、自分の思うように反映されなかったり……。英語や数字ばかり並ぶので、正直よくわからないし、「コーディングって難しいな」と感じてしまうものですよね。
この記事では現役エンジニア兼ライターである私が、そんな方のために、
- コーディングが難しいと感じる理由
- コーディングを身につける3つの方法
以上2つをメインにご紹介させていただきます。
この記事の目次
コーディングが難しいと感じる9つの理由
あなたはこんな理由で「コーディングが難しい」と感じていませんか？ まずは、具体例とその解決策を簡単に紹介していきます。
用語がそもそも難しい
「コーディング」という名前そのものが難しいと思いませんか？
他にも、HTML、CSS、JavaScriptなど、 「そもそも、それぞれどう読むの？」という疑問から解決しなければならなかったりします。他にもコーディングには英語やカタカナの専門用語がたくさんあり、横文字が苦手な方はこの時点で難しいと敬遠してしまいがちです。
新しい知識を仕入れるのはなかなか大変な作業ですよね。
解決策
一見難しく見える専門用語も、一つ一つ見ていけば理解はしやすく、やがてそれぞれの知識が繋がってひとつにまとまるようになります。
そうなるためにも、まずはコーディング初心者向けに書かれたわかりやすい書籍で勉強していきましょう。
おすすめは「デザインの学校 これからはじめるHTML&CSSの本」です。
コーディングの基本であるHTMLとCSSの本の中ではこれが一番分かりやすいのではないかと思います。
何から始めたらいいかわからない
「コーディングをマスターしたいとは思うけど、何から始めたらいいのかがわからない」という悩みをお持ちの方は多いのではないでしょうか？
今まで知らなかったものを学習するのは最初の一歩が肝心です。ましてやコーディングは学習することが多そうですし、
- 何かサイトをいじってみる
- 参考書を購入して学習する
- 無料学習サイトで勉強する
など、学習の選択肢も広いので迷ってしまうと思います。
解決策
おすすめの方法は無料ブログを開設し元々できているものをいじってみるという方法です。
管理画面にあるHTMLやCSSをいじってみて、HTMLやCSSのどこをどう変えたら、実際のブログのデザインがどのように変わるかを確認してみましょう。
私は実際この方法で「無料ブログを自分好みのデザインにしてみよう」と楽しく勉強できたので、コーディングというものに抵抗がなくなりました。
無料ブログはアメブロやライブドアブログなど色々ありますので、お好みのものを選んでみましょう。
レスポンシブ用に書かなければならない
インターネットをよく利用する方なら、PCとスマホで同じサイトを見てもデザインも使い勝手もそれぞれに最適化された形になっているのはご存知でしょう。
このようなPCとスマホとタブレットと、端末によってデザインの異なるレスポンシブデザインに対応しなければいけないという点を難しく感じている方もいるのではないでしょうか？
「単純に手間が2倍3倍に増えるのではないか……」という不安もありますよね。
解決策
レスポンシブデザインは、今やほとんどのWebサイトが対応していて、基本中の基本になっています。そのため「このサイトのデザインがかっこいいな」と思うサイトのコードを真似て書いてしまえばいいのです。
自分で一から作り上げるのは大変ですか、元々できているものをカスタマイズするのはさほど難しくはありません。
もちろん完全に真似してしまうのはNGなので、参考にして、スキルアップとともに徐々に自分のオリジナルを加えられるようにしましょう。
cssがうまく反映されない
CSSを触っていてよくあるのは「背景の色のコードを変えたのに、Webサイト上で色が変わってない」という現象です。ブラウザにキャッシュが残っている場合もありますが、キャッシュを削除してもうまく反映されないと作業の手が止まってしまい、ストレスが溜まります……。
自分ではきちんと書いているつもりなのにこういった現象が起こると「コーディングって本当に難しい」と感じてしまいますよね。
解決策
Google Chromeのデベロッパーツールを使えば、コードの書き方が間違っている箇所が簡単にわかります。
デベロッパーツールは、コーディングが上手く反映されない箇所にマウスを合わせ、右クリック→「検証」で簡単に起動できます。
これで大抵のことは分かるのですが、「それでも分からない」「きちんと修正したのにうまく反映されない」という時は「!important」を使えば強制的にコードを上書きできます。
とはいえ使いすぎは禁物です。まずはデベロッパーツールを使って、ひとつひとつ検証していくことをおすすめします。そちらの方がスキルもアップしますよ。
jQuery、Javascriptがうまく効かない
jQueryやJavascriptで書いたコードがうまく動作しない……という問題もあります。
jQuery、JavascriptはHTMLやCSSに比べて複雑な分、「全然動かない」「意図したのと別の動きをする」「サイトの表示が乱れる」という現象が起こりやすいです。
解決策
CSSと同じくGoogle Chromeのデベロッパーツールを使用し検証しましょう。
なお、以下の記事では初心者の方向けにわかりやすくデベロッパーツールの使い方をまとめていますので、こちらをお読みください。
デザインの通りにコーディングできない
Webデザイナーから上がってきたPSDデータなどを元に、それをWebサイト上にコードを書くという作業にストレスを感じる方もいらっしゃると思います。
デザイナーさんにもよりますが、1px単位で細かい指摘をしてくる方もいらっしゃるので、そのやり取りに嫌な思いをすることも少なくありません。
解決策
コーディングだけでなくWebデザインのスキルを身につけると、これは意外とあっさり解決します。
デザインの段階から自分がコーディングしやすいように作ってしまえばいいのでストレスがありません。
なおWebデザインに必要なスキルと学習法については以下の記事に詳しくまとまっていますので、お読みください。
コーディング規約を守らなければならない
コーディングの作業にはどうしても、保守のしやすさや品質を一定に保つためにコーディング規約はつきものです。
必要なこととはわかっていても、会社でも違えばプロジェクトによってもルールは違うので、それをいちいち覚え従ってコーディングをしなければならないので、「難しい」と感じる方も多いはず。
解決策
解決策としては「自分がスキルアップしてどんな規約にでも臨機応変に対応できるようになる」のが一番です。場数を踏んで慣れていきましょう。
その経験値がたまれば、今度は自分がコーディング規約を作る側になれるので、その際は、短く見やすいコードの書き方を心がけたり、制限を設けすぎない等、自分が苦労したことを思い出しつつ作成しましょう。
ブラウザによって表示が違う場合がある
同じコーディングでも、ブラウザによって表示のされ方が異なる場合があります。これはブラウザによって元々設定されているCSSが異なるために起こります。
よくあるのが、文字の大きさや余白が違う場合です。その影響でレイアウトが崩れて見栄えが非常に悪くなってしまうことがあります。
そのため複数のブラウザでチェックする必要があり、その煩雑さに手を焼くことも少なくありません。
解決策
この問題は、上記のようなブラウザによるズレを無くすCSSを作成することで比較的用意に対策できます。
具体的には「normalize.css」を使う方法です。これは、デフォルトのCSSは残しながらブラウザによる違いのみを無くすものです。
以下の公式サイトからダウンロードし、使用することができます。
クラス名を決めるのが大変
クラス（class）名の決め方に難しさを感じる方もいらっしゃるでしょう。コーディングは自分ひとりで行うものではなく、多くの場合は複数名で分担して進めていくものです。
そのため、名前を見ればその機能の意味がわかり、名前のつけ方にも一定したルールを設ける必要があります。闇雲に名前をつけると後でメンテナンスが大変になりますので、これもまた難しさを感じやすいポイントです。
解決策
対策としては、まずはclassの付け方の基本ルールを押さえることが大事です。
※classの決め方の基本ルールは以下の記事をご覧ください
その上で、誰でも理解しやすい英単語をメインに、class名をある程度指定しておくといいでしょう。たとえば、インデックスなら「index」、問い合わせフォーム等に関するものなら「contact」等です。
最低限のルールを決めておくだけで、class名の付け方に迷うことはだいぶ減ります。
まず最初に試して欲しいコーディングにおすすめの勉強法
上記の内容を踏まえつつ、私がおすすめするコーディングの勉強法は、アメブロやライブドアブログなどの無料ブログサービスでブログを開設し、そのHTMLやCSSをカスタマイズしてみることです。
初心者が自分で一から作り上げるのはかなりハードルが高く、挫折してしまいがちです。その点、あらかじめある程度できあがったものをいじるのは気軽に楽しんでやることができます。
コツを掴んだあとは、以下3つの勉強法のいずれかでよりスキルアップを目指すといいでしょう。
コーディングを挫折せずスキルアップするための3つの勉強法
無料ブログでコーディングの楽しさを知った後は、下記3つの勉強法で自分に合ったものを選んで学習してみましょう。
無料学習サイトでゲーム感覚で学習する
最近のプログラミング学習サイトは、無料なのに非常にクオリティが高いものが増えています。特におすすめなのはprogateで、スライド形式で、かつゲーム感覚で学習を進めていくサイトなのですが、飽きない工夫がされています。
progateでは課題をこなすことで経験値のようなものがたまり、一定数に達するとレベルアップします。まるでロールプレイングゲームをやっている感覚で学習が進められますので、ドラゴンクエスト等にハマった経験のある方はぜひお試しいただきたいサイトです。
※progateの詳しい説明や、その他の無料学習サイトの一覧は以下の記事をどうぞ。
仕事をこなしつつ学習もする
コーディングが最も上達するのは、実際の仕事をこなすことです。
そもそもクライアントによって、制作するWebサイトの種類も違えば、目的も要望も異なります。そのため、 Web制作会社に転職したりフリーで仕事を受けてみたり、実際にコーディングの仕事をこなすことで早くスキルアップができるのです。
コーディングに最低限必要な、HTMLやCSS・ JavaScript・ jQueryなどがある程度できるのであれば、思い切って転職や仕事を受注してみるのもおすすめです。
スクールに通って学習する
プログラミングスクールに通い現役のエンジニアに直接教わることも、効率的かつ最短でスキルアップができるおすすめの方法です。
独学ではモチベーションの維持が難しく、わからないところがすぐに質問できない等のデメリットがあり、学習が非効率になってしまいがちです。しかし、スクールに通って講師に直接習うことで、実際の開発現場で役立つ知識やスキルが最短で身に着きます。
もちろん費用もかかるのですが、それに見合っただけの成果は得られ、かつ仕事の紹介もしてくれるというメリットまであります。
初心者の方におすすめのスクールは以下の記事を合わせて読んでみてください。
コーディングが難しいと感じてしまう「NG学習法」
なお、以下のような勉強方法はかえって「コーディングが難しい…」と感じてしまい逆効果なので、避けるようにしましょう。
- 参考書などを丸暗記する
- ノートなど紙に書いて覚える
コーディングはテストの穴埋め問題とは違うので丸暗記しても意味がありません。コードの意味を理解して記述しなければなりませんので、参考書を丸暗記しても開発では使えないことがほとんどです。
また、テスト勉強でよくある「大事な部分や自分の知らない箇所をノートなどの紙に書く」というやり方もおすすめできません。ノートに書くと、後で振り返った際に必要な箇所がパッと検索できないので、非効率です。
Evernoteなどのアプリを使い、PCやスマホでメモを取るやり方の方がおすすめです。
まとめ
コーディングは確かに難しいスキルかもしれませんが、学習法や考え方一つで習得のしやすさがだいぶ変わってきます。
今回の記事をご参考に、「自分が躓いているポイント」を確認しつつ、あなたがストレス無くコーディングをマスターすることができますように！
