ウェブサイトを作ろうと思った時、最初にぶつかるのが、言葉の壁ではないでしょうか。
たくさんの用語があって、なかなか把握するのが難しいと思います。

コーディングもその1つ。
よく聞くけどコーディングとは？と思っている人も多いと思います。

コーディングとはなんだろう？と調べても、よく分からなかったりしますよね。
なので、今回は、誰にでも分かりやすく「コーディングとは」の疑問にお答えしていきます。

結論から言うと「コーディングとは、プログラミング言語でコードを組み立てる作業」のことです。
世の中には様々なプログラミング言語があり、それらでコードを作ることの総称です。
何も、ウェブサイトを制作する時だけに使うわけではありません。

今回の「コーディングとは」への返答は、ウェブサイト制作を対象にしています。
その上でコーディングとは何か、という疑問に答えると「ウェブサイトを組み立てる」作業と言えます。

例えば、家を作ろうと思った時、最初に骨組みを作りますよね。
土台を作り柱を立てて、形を作っていきます。
しかし、僕たちは、骨組みには住むことはできません。
見た目の美しさや装飾も加えられていません。
壁をつくったり、家具を置いたりして、初めて住めるようになりますよね。

そして、住める環境を整えるために、壁をつくり、床や屋根を作り、家具を揃える。
同じような工程を、ウェブサイトでも行う必要があるのです。

ウェブにおけるコーディングとは「ウェブサイトを組み立てる」ことです。

基本的なWEBサイト制作の順番

まず、パソコンのツールでデザインを書きます。
しかしデザインを作っただけでは、ウェブサイトとして使えません。

リンクや動きもありませんし、当然、投稿することもできません。
パソコンやスマートフォンによって、レイアウトが見やすく変更されたりもしません。

デザインとは1枚の絵のことです。
それらの仕組みが実装されているわけではありません。

コーディングとは、デザインをWEBサイトとして、動くように作ることです。

クリックすれば移動するし、動きもある。
デバイスによって画面が見やすい形に変化したりもする。
会員登録や更新も出来るでしょう。

そしてもう1つ、コーディングが必要な、大きな理由があります。

基本的にWEBサイトは、Googleのような検索エンジンから辿り着きます。
その時、しっかりコーディングされたウェブサイトだと、見つかりやすくなるんですね。

コーディングとは、Googleのような検索エンジンがわかりやすい形に変換することでもあります。
だからこそ、Googleのロボットがわかりやすい言語にする必要があるのです。
より、素晴らしいサイトだと理解してもらい、見つかりやすくするために。

なんとなく、コーディングの概念について、お分かり頂けたでしょうか。

今はまだ、なんとなく概念を理解している程度で大丈夫です。
何にせよ、自分で実践してみるまでは、明確に理解出来ませんからね。

それでは、実際にコーディングとは、どのように行っていくのかお伝えしていきます。

ウェブサイトのコーディングとは、基本的にHTMLとCSSをから始まります。

家の作り方に例えると分かりやすいので、引き続き例えていきます。
コーディングとは、HTMLとCSSと呼ばれる言語を使って行われます。

家に例えると、HTMLが木材など骨組みを作る材料。
そしてCSSが、色を塗る塗料や、壁紙のようなイメージです。

つまりHTMLでウェブサイトの骨組みを作り、CSSで装飾する。
この2つの言語を使って、初めてウェブサイトが形になります。

ウェブサイトを作る際、基本的にはデザインを最初に作ります。
FigmaやPhotoshopというツールを使って1枚絵のデザインを作るのです。
それを、そのまま再現するようなイメージで、コーディングが進められます。

できるだけデザインと差異をなくしましょう。
まったく一緒に再現することがベストです。

もし、デザインがコーディング後と前で違ったりすると「再現率が低い」と言われます。
あまりにも違いがあれば、2度と仕事を頼まれることはないでしょう。

コーディングとは、いかにデザイン通りに再現出来るかが腕の見せどころなのです。

ブラウザや環境によってもずれが生じる。

また、HTMLとCSSは、端末やブラウザによって、やや解釈が異なります。

例えば、Google Chromeで見た場合と、Safariで見た場合、ずれが発生したりするのです。
なので、コーディングを仕上げる前に、様々なブラウザを見てチェックしなければなりません。
もちろん、スマートフォンやタブレットでも、確認する必要があります。

だからと言って、スマホからタブレットまで、全部買う必要はありません。

ブラウザには、それぞれ確認ツールがついているので、それを使えば実機無しで確認できます。
ただ、やはり微妙に異なる場合もあるので、実機があるなら実機で確認した方が良いでしょう。

ちなみに、コーディングとは文系か理系か、なんてお話している方もいますが、関係ありません。
文系でも理系でも、単純作業なので、あまり意識することも無いでしょう。
とにかく場数を重ねることが、コーディングが上手くなるコツです。

コーディングとはどこまでを意味する？ Javascriptはプログラミング？

よく、HTMLとCSSのコーディングとは「プログラミングではない」と言われたりもします。
正式にはHTML×CSSコーディングのように「組み立てる」作業はマークアップと呼ばれます。
確かに、プログラミングとは異なるイメージがありますね。
では、一体何がコーディングで、何がプログラミングなのでしょうか。

ここからは、僕の持論も少し入ってきます。

マークアップはデザインの再現。
プログラミングとは、機能の実現です。

デザインの再現とは見た目。
機能の実現とは、使い勝手。
道具の見た目を作るか機能を作るかにも似ています。

そして、見た目を作るよりも機能を作る方が複雑でもあります。

例えば、JavaScriptのように、複雑な処理を有する言語はプログラミングと言えます。
複雑なので、どんな形が一番管理しやすく改善しやすいか、より試行錯誤が必要です。

もちろんHTMLやCSSも複雑化していますが、JavaScriptよりはある意味シンプルです。

コーディングとは、HTML×CSSからJavascriptまで、言語での開発全てを意味します。
しかし、マークアップはHTML×CSSは、ある意味シンプル。
プログラミングはJavaScriptやPHPのように、より複雑です。
コーディングとは何か、という概念は、個々にもよるかもしれません。

とはいえ、最近、CSSはより複雑な処理が可能になってきました。
CSSだけで、3Dを描画したり、自由に動かしたりと、非常に活躍の幅が広がっています。
それ単体で、JavaScriptのような処理も可能になりつつありますからね。
いずれ、マークアップもプログラミング一括りになる時が来るかもしれませんね。

コーディングとは何か、に対する返答は、どんどん進化していきそうです。

フロントエンドとバックエンドの違いって何？

コーディングとは、言語を使ってコードを作っていくこと。
しかし、ウェブサイト制作において、知っておくべき分類が、まだあります。
それがフロントエンドとバックエンドです。
フロントエンドとバックエンドのコーディングとは、何が違うのでしょうか。

フロントエンドとは、HTML×CSS×JavaScriptによる、表のデザインや動きの表現を意味します。
色やレイアウト、動きやユーザーに対するレスポンスの演出などを担当します。
フロントエンドのコーディングとは、つまり表側の表現を担当するものです。

上記のように、フロントエンドを生業とするエンジニアを、フロントエンドエンジニアと呼びます。

一方でバックエンドのコーディングとは、裏側を担当します。
会員登録システムや、ブログの更新出来る機能など「保存や記録」に関わるものが多いです。
データを送って保存して、取り出して処理する、その一連の処理はバックエンドです。
言語としては、PHPやRuby，Pythonなどで行います。

上記のようにバックエンドを担当するエンジニアを、バックエンドエンジニアと呼びます。

表と裏側は、知らないと、一括りにコーディングと表されますが、同じではありません。
フロントが出来たからと言って、バックエンドはできません。
その逆もしかりで、バックエンドが出来たからと言って、フロントエンドは出来ないのです。
もちろん、両方学べば、両方とも扱えるエンジニアになれるでしょう。

コーディングとは、マークアップ、フロントエンド、バックエンド、これら全て含まれた言葉です。
とはいえ、人によって、言葉の意味自体は曖昧なので、お互い理解し合う姿勢も大事です。

最初はどの言語を学ぶべき？

僕自身はフロントエンドから学ぶことをオススメしています。
つまり、HTML×CSS×JavaScriptの組み合わせです。

なぜなら、バックエンドをするにも、ある程度フロントエンドを理解する必要があるからです。
WEBの場合、HTMLやCSSで作られたファイルに対して、コーディングしていくわけですからね。
バックエンドだとしても、ある程度フロントエンドをいじれる必要はあります。

また、フリーランスで収益化を急ぎたい場合も、フロントエンドをオススメします。

バックエンドは、高額ですが、責任の大きい仕事になるケースが大半です。
もし決済システムにバグがあったりしたら、それこそ致命傷になりますよね。
セキュリティに穴があって、個人情報が盗まれたりしたら、損害賠償にさえなるでしょう。
長年、経験を持った人に頼みたいと思うのが普通ではないでしょうか。

高額な案件は、大抵、実績豊富であるか、会社として組織に頼まれがちです。
額が大きいですし、ミスがあると売上に大きく響くケースもあります。
それなりに、実績を積んだ人に頼みたいと思うでしょう。

または、仲間と一緒にウェブアプリを作るケースもあります。
とはいえ、こちらの収益化には割と時間がかかります。

一方、HTML×CSS×JavaScript×デザインであれば、どうでしょう。
友達、知人、企業、個人事業主、全ての人が「ウェブサイト欲しい」と言います。
つまり、身近な人から仕事が発生する機会も多いのです。

だからこそ、収益化を早めたければ、フロントから入ることをオススメします。
気軽に周りの関係性が仕事に繋がりやすいですからね。

最初はフロントエンドエンジニアがおすすめ。

加え、フロントエンドであれば、柔軟に変更可能です。
ミスがあっても、即座に修正できます。

かといって、ミスをして言い訳するのはいけませんが。
それでも、損害賠償等には繋がったケースは、ほとんど見たことはありません。
バックエンドの仕事をフリーランスでするなら、ある程度経験を積んでからが良いでしょう。

また、フロントエンドを覚えた上で、バックエンドを覚えると早く覚えられます。
逆もしかりですが、1つ言語を覚えると次の言語は覚えやすいものです。

また、経験を積めばさえ、超高額な案件に携わりやすくなります。
1案件、数百万円なんて規模も、ざらに存在します。

特に自分でサービスを作る場合、バックエンドは必須ですからね。

人工知能や機械学習などをやりたい場合は、確実にバックエンドが必要です。
より最先端のプロダクトを作りたい場合も、ぜひ挑戦してみてください。
作れるプロダクトの自由度が一気に増しますし、純粋に楽しいですよ。

バックエンドを中心にやりたい場合は、フロントエンドはそこそこでも良いでしょう。
軽く修正できる程度まで学んだ上で、バックエンドに集中するのはありです。

なお、可能ならウェブデザインの習得もオススメします。
お願いされた時に、一人で全部できると楽だからです。

コーディングとは、という話の中で、ウェブデザイン？と思うかもしれません。
しかし、デザインができれば、お願いされた時に、わざわざデザイナーを探す手間も省けます。
誰の力も借りず、ぱぱっと作ってしまうためには、デザインが必要です。

コーディングとは、技術の選び方で大きく稼ぎ方もリスクも異なる仕事です。
ぜひ、よく考えた上で、学ぶ言語を選択してみてくださいね。

コーディングとは、いくらくらい稼げるものなのか？

この質問は特に多いですね。

色々な言語やタイプがありますが、結局、どれが一番稼げるのでしょうか。
といっても、本当に実力にもよりますので、ピンきりです。
会社員か、フリーランスかによっても違いますし。
一つ言えるのは、コーディングとは、まだまだ稼げる仕事ということです。

下記に、フリーランスと会社員の収入について、大体のところを記します。
僕の周りにいるエンジニアさんの報酬を参考にしていますので、そう遠くは無いはずです。
今後のキャリアプランに、ぜひ参考にしてみてください。

会社員の場合

• 300万円〜400万円 / マークアップのみのコーダー
• 300万円〜500万円 / フロントエンドエンジニア
• 400万円〜1000万円 / バックエンドエンジニア

フリーランスの場合

• 400万円〜600万円 / マークアップのみのコーダー
• 400万円〜800万円 / フロントエンドエンジニア
• 500万円〜1500万円 / バックエンドエンジニア

といったところでしょうか。

しかし、コーディングの収入とは、言語によっても異なります。
使える人が少なく人気のある言語であれば、高くもなるでしょう。

技術力にも比例して、機械学習や人工知能が使えれば、さらに高額にあります。
上記はあくまでも参考であり、実力次第で2,000万〜4,000万の収入もありえます。
初任給から数千万円の年収も、最近では当たり前になってきました。
エンジニアの価値が、ようやく評価され始めたと言ったところでしょうか。
海外なら、当たり前にもっと評価されているますけどね。

だからこれまでは、優秀な人材ほど海外に引き抜かれてました。
報酬の額が桁違いなので、当然アメリカに人材は流出します。

コーディングとは、日本だけではなく世界も仕事の視野に入ります。
そこがまた、コーディングの面白いところでもあります。

ただ、フロントエンドだと、今の所、稼ぎの天井は低いイメージです。
僕のまわりで最も稼いでいるフロントエンドエンジニアさんは1,000万を超える程度でしょうか。
そのくらいあれば十分だと思いますが、それ以上はもちろん存在します。
しかし超一級の技術力が必要な案件は、そんなに多くはありません。

もしフリーランスとして収益化を早めたいのであれば、フロントから入ると良いでしょう。

まとめ

色々とざっくばらんにお話したので、コーディングとは、についてまとめます。
まず、コーディングとは、プログラミング言語でコードを書く総称です。
ウェブサイト制作の業界の、コーディングとは、大きくわけて、下記の3つに分かれます。

• フロントエンド – 表面のデザインや動きをコーディング
• マークアップ – フロントエンドの一部でウェブサイトのデザインを再現
• バックエンド – データの保存や出力を中心とする裏側をコーディング

という認識があります。

同時にウェブ制作業界ではコーディングはフロントエンドを多く意味します。
バックエンドはプログラミングと呼ばれるイメージが強いです。
コーディングとは、個人によって多少、概念が異なるかもしれません。

また、それぞれで使う言語は下記のとおりです。

• フロントエンド – HTMLやCSS、JavaScriptなど
• マークアップ – 主にHTMLやCSS
• バックエンド – PHPやRuby、Pythonなど

どの言語を選ぶかによって、その後の人生は大きく変わるでしょう。

収益化を早めたいのであれば、フロントエンドとデザインがオススメ。
技術力を武器に、収益化が遅れてもいいけど大きく稼ぎたいならバックエンドです。

コーディングとは、何を選ぶかによって、出来ることも収益も、仕事の仕方も異なります。
クライアントも違っていますし、習得にも時間がかかるので、どこを目指すか目標は持つべき出す。

自分がどんなエンジニアになりたいのか、ウェブデザイナーになりたいのか。
学びながら、作りながらでも良いので、ぜひ、考えてみてください。

とは言え、最終的にはどんな言語も操れるところが終着点ですけが。
スーパーエンジニアはそれこそ、大抵の言語を使えてしまいますし。
コーディングとは、の話から話が広がりましたが、ぜひぜひ、参考にしてみてくだいね。