ウェブサイトを作ろうと思った時、最初にぶつかるのが、言葉の壁ではないでしょうか。
たくさんの用語があって、なかなか把握するのが難しいと思います。
コーディングもその1つ。
よく聞くけどコーディングとは？と思っている人も多いと思います。
コーディングとはなんだろう？と調べても、よく分からなかったりしますよね。
なので、今回は、誰にでも分かりやすく「コーディングとは」の疑問にお答えしていきます。
結論から言うと「コーディングとは、プログラミング言語でコードを組み立てる作業」のことです。
世の中には様々なプログラミング言語があり、それらでコードを作ることの総称です。
何も、ウェブサイトを制作する時だけに使うわけではありません。
と言っても、これも難しいと思いますので、もっと簡単にしてみましょう。
今回の「コーディングとは」への返答は、ウェブサイト制作を対象にしています。
その上でコーディングとは何か、という疑問に答えると「ウェブサイトを組み立てる」作業と言えます。
例えば、家を作ろうと思った時、最初に模型や設計図を作りますよね。
しかし、僕たちは、模型や設計図には住むことはできません。
模型や設計図、3Dデザインを、実際に組み立てて、初めて住めるようになりますよね。
同じような工程を、ウェブサイトでも行う必要があるのです。
ウェブにおけるコーディングとは「ウェブサイトを組み立てる」ことです。
まず、パソコンのツールでデザインを書きます。
しかしデザインを作っただけでは、ウェブサイトとして使えません。
リンクや動きもありませんし、当然、投稿することもできません。
パソコンやスマートフォンによって、レイアウトが見やすく変更されたりもしません。
デザインとは1枚の絵のことで、それらの仕組みが実装されているわけではないものです。
コーディングとは、デザインをしっかり、動くように作ることです。
クリックすれば移動するし、動きもある。
デバイスによって画面が見やすい形に変化したりもする。
会員登録や更新も出来るでしょう。
そしてもう1つ、コーディングが必要な大きな理由があります。
基本的にWEBサイトは、Googleのような検索エンジンで探すことができます。
その時、しっかりコーディングされたウェブサイトだと、見つかりやすくなるんですね。
コーディングとは、Googleのような検索エンジンがわかりやすい形に変換することでもあります。
だからこそ、よりみんなに見てもらうために、Googleがわかりやすい言語にする必要があるのです。
なんとなく、コーディングの概念について、お分かり頂けたでしょうか。
今はまだ、なんとなく概念を理解している程度で大丈夫えです。
何にせよ、自分で実践してみるまでは、明確に理解出来ませんからね。
それでは、実際にコーディングとは、どのように行っていくのかお伝えしていきます。
ウェブサイトのコーディングとは、基本的にHTMLとCSSをから始まります。
家の作り方に例えると分かりやすいので、引き続き例えていきます。笑
コーディングとは、HTMLとCSSと呼ばれる言語を使って行われます。
家に例えると、HTMLが木材など骨組みを作る材料。
そしてCSSが、色を塗る塗料や、壁紙のようなイメージです。
つまりHTMLでウェブサイトの骨組みを作り、CSSで装飾する。
この2つの言語を使って、初めてウェブサイトが形になります。
ウェブサイトを作る際、基本的にはデザインを最初に作ります。
PhotoshopやIllustratorというツールを使って1枚絵のデザインを作るのです。
それを、そのまま再現するようなイメージで、コーディングが進められます。
できるだけデザインと差異が無い、まったく一緒に再現することがベストです。
もし、デザインがコーディング後と前で違ったりすると「再現率が低い」と言われます。
あまりにも異なってしまえば、二度と仕事を頼まれることはないでしょう。
コーディングとは、いかにデザイン通りに再現出来るかが腕の見せどころなのです。
また、HTMLとCSSは、端末やブラウザによって、やや解釈が異なります。
例えば、Google Chromeで見た場合と、Safariで見た場合、ずれが発生したりするのです。
なので、コーディングを仕上げる前に、様々なブラウザを見てチェックしなければなりません。
もちろん、スマートフォンやタブレットでも、確認する必要があります。
だからと言って、スマホからタブレットまで、全部買う必要はありません。
ブラウザには、それぞれ確認ツールがついているので、それを使えば実機無しで確認できます。
ただ、やはり微妙に異なる場合もあるので、実機があるなら実機で確認した方が良いでしょう。
ちなみに、言語そのものは、慣れるとそんなに難しくはありません。
むしろ、コーディングそのものの作業は、体が勝手に動くようになります。
何も考えなくても、勝手に体が作っていってくれるイメージです。
なので、じっと向かい合っていると、ひたすら時間が長く感じます。
内職と同じような、ひたすら単純作業の繰り返しにさえ思えてくるでしょう。
むしろ、飲みながらや、誰かと話をしながら行った方が、効率的な時もあります。
集中力が途切れて、無駄に漫画読み始めたりしませんから。
コーディングとは文系か理系か、なんてお話している方もいますが、関係ありません。
文系でも理系でも、単純作業なので、あまり意識することも無いでしょう。
とにかく場数を重ねることが、コーディングが上手くなるコツです。
コーディングとはどこまでを意味する？ Javascriptはプログラミング？
よく、HTMLとCSSのコーディングとは「プログラミングではない」と言われたりもします。
正式にはHTML×CSSコーディングのように「組み立てる」作業はマークアップと呼ばれます。
確かに、プログラミングとは異なるイメージがありますね。
では、一体何がコーディングで、何がプログラミングなのでしょうか。
ここからは、僕の持論も少し入ってきます。
マークアップはHTMLやCSSのようにルールに従って再現するのがコーディング。
プログラミングとは、機能を考えて実装することだと考えています。
例えば、javascriptのように、複雑な処理を有する言語はプログラミングと言えます。
どのような処理を書けば最もスムーズにオブジェクトを動かせるか試行錯誤します。
しかし、マークアップの場合は適切に一定のルールに沿って書いていけば良いのです。
実際、HTMLやCSSには、ルールが決められています。
こういう表現には、このタグを使うべきという意味付けがあります。
しかしJavascriptには、それがありません。
一定のルールがあったとしても、それは個人や会社の決めるルールに等しいものです。
PHPやRuby、Pythonのような言語もルールはありません。
コーディングとは、HTML×CSSからJavascriptまで、言語での開発全てを意味します。
しかし、マークアップはHTML×CSSのようにルールに沿うもの。
プログラミングはJavascriptやPHPのように、特にルールが無いものと言えるのでは無いでしょうか。
コーディングとは何か、という概念は、個々にもよるかもしれません。
ところが最近、CSSはより複雑な処理が可能になってきました。
CSSだけで、3Dを描画したり、自由に動かしたりと、非常に活躍の幅が広がっています。
それ単体で、Javascriptのような処理も可能になりつつありますからね。
いずれ、マークアップもプログラミング一括りになる時が来るかもしれませんね。
コーディングとは何か、に対する返答は、どんどん進化していきそうです。
フロントエンドとバックエンドの違いって何？
コーディングとは、言語を使ってコードを作っていくこと。
しかし、ウェブサイト制作において、知っておくべき分類が、まだあります。
それがフロントエンドとバックエンドです。
フロントエンドとバックエンドのコーディングとは、何が違うのでしょうか。
フロントエンドとは、HTML×CSS×Javascriptによる、表のデザインや動きの表現を意味します。
色やレイアウト、動きやユーザーに対するレスポンスの演出などを担当します。
フロントエンドのコーディングとは、つまり表側の表現を担当するものです。
上記のように、フロントエンドを生業とするエンジニアを、フロントエンドエンジニアと呼びます。
一方でバックエンドのコーディングとは、裏側を担当します。
会員登録システムや、ブログの更新出来る機能など「保存や記録」に関わるものが多いです。
データを送って保存して、取り出して処理する、その一連の処理はバックエンドです。
言語としては、PHPやRuby，Pythonなどで行います。
上記のようにバックエンドを担当するエンジニアを、バックエンドエンジニアと呼びます。
表と裏側は、知らないと、一括りにコーディングと表されますが、同じではありません。
フロントが出来たからと言って、バックエンドはできません。
その逆もしかりで、バックエンドが出来たからと言って、フロントエンドは出来ないのです。
もちろん、両方学べば、両方とも扱えるエンジニアになれるでしょう。
コーディングとは、マークアップ、フロントエンド、バックエンド、これら全て含まれた言葉です。
しかし、ウェブ制作の業界においては、マークアップのみを指すことが多いようですが。
バックエンド側になると、なぜかプログラミングと呼ぶケースが多いですね。
人によって、言葉の意味自体は曖昧なので、随時、読み取ってみてください。
最初はどの言語を学ぶべき？
僕自身はフロントエンドから学ぶことをオススメしています。
つまり、HTML×CSS×Javascriptの組み合わせです。
なぜなら、バックエンドをするにせよ、ある程度フロントエンドを理解する必要があるからです。
HTMLやCSSで作られたファイルに対して、コーディングしていくわけですからね。
バックエンドだとしても、ある程度フロントエンドをいじれる必要はあります。
また、フリーランスで収益化を急ぎたい場合も、フロントエンドをオススメします。
バックエンドは、高額ですが、責任の大きい仕事になるケースが大半です。
もし決済システムにバグがあったりしたら、それこそ致命傷になりますよね。
セキュリティに穴があって、個人情報が盗まれたりしたら、損害賠償にさえなるでしょう。
長年、経験を持った人に頼みたいと思うのが普通ではないでしょうか。
高額な案件は、大抵、実績豊富であるか、会社として組織に頼まれがちです。
額が大きいですし、ミスがあると売上に大きく響くケースもあります。
それなりに、実績を積んだ人に頼みたいと思うでしょう。
または、仲間と一緒にウェブアプリを作るケースですが、こちらの収益化は遅いです。
一方、HTML×CSS×Javascript×デザインであれば、どうでしょう。
友達、知人、企業、個人事業主、全ての人が「ウェブサイト欲しい」と言ってます。
つまり、身近な人から仕事が発生する機会も多いのです。
だからこそ、収益化を早めたければ、フロントから入ることをオススメします。
気軽に周りの関係性が仕事に繋がりやすいですからね。
加え、フロントエンドであれば、柔軟に変更可能です。
ミスがあっても、即座に修正できます。
かといって、ミスをして言い訳では無いのですが。
損害賠償等には繋がったケースは、ほとんど見たことはありません。
フロントエンドを覚えた上で、バックエンドを覚えるのは非常に良いです。
特に自分でサービスを作る場合、バックエンドは必須ですからね。
また、経験を積めばさえ、超高額な案件に携わりやすくなります。
1案件、数百万円なんて規模も、ざらに存在します。
人工知能や機械学習などをやりたい場合は、確実にバックエンドが必要です。
より最先端のプロダクトを作りたい場合も、ぜひ挑戦してみてください。
作れるプロダクトの自由度が一気に増しますし、純粋に楽しいですよ。
バックエンドを中心にやりたい場合は、フロントエンドはそこそこでも良いでしょう。
軽く修正できる程度まで学んだ上で、バックエンドに集中するのはありです。
なお、可能ならウェブデザインの習得もオススメします。
お願いされた時に、一人で全部できると楽だからです。
コーディングとは、という話の中で、ウェブデザイン？と思うかもしれません。
しかし、デザインができれば、お願いされた時に、わざわざデザイナーを探す手間も省けます。
誰の力も借りず、ぱぱっと作ってしまうためには、デザインが必要です。
コーディングとは、技術の選び方で大きく稼ぎ方もリスクも異なる仕事です。
ぜひ、よく考えた上で、学ぶ言語を選択してみてくださいね。
コーディングとは、いくらくらい稼げるものなのか？
この質問は特に多いですね。
色々な言語やタイプがありますが、結局、どれが一番稼げるのでしょうか。
といっても、本当に実力にもよりますので、ピンきりです。
会社員か、フリーランスかによっても違いますし。
一つ言えるのは、コーディングとは、まだまだ稼げる仕事ということです。
下記に、フリーランスと会社員の収入について、大体のところを記します。
僕の周りにいるエンジニアさんの報酬を参考にしていますので、そう遠くは無いはずです。
今後のキャリアプランに、ぜひ参考にしてみてください。
会社員の場合
- 300万円〜400万円 / マークアップのみのコーダー
- 300万円〜500万円 / フロントエンドエンジニア
- 400万円〜1000万円 / バックエンドエンジニア
フリーランスの場合
- 400万円〜600万円 / マークアップのみのコーダー
- 400万円〜800万円 / フロントエンドエンジニア
- 500万円〜1500万円 / バックエンドエンジニア
といったところでしょうか。
しかし、コーディングの収入とは、言語によっても異なります。
使える人が少なく人気のある言語であれば、高くもなるでしょう。
技術力にも比例して、機械学習や人工知能が使えれば、さらに高額にあります。
上記はあくまでも参考であり、実力次第で2,000万〜4,000万の収入もありえます。
初任給から数千万円の年収も、最近では当たり前になってきました。
エンジニアの価値が、ようやく評価され始めたと言ったところでしょうか。
アメリカだと普通なんですけどね。
だからこれまでは、優秀な人材ほど海外に引き抜かれてました。
報酬の額が桁違いなので、当然アメリカに人材は流出します。
コーディングとは、日本だけではなく世界も仕事の視野に入るのですね。
そこがまた、コーディングの面白いところでもあります。
ただ、フロントエンドだと、今の所天井は低いイメージです。
僕のまわりで最も稼いでいるフロントエンドでも1,000万を超える程度でしょうか。
そのくらいあれば十分だと思いますが、以上はもちろん存在します。
しかし、一長一短であり、技術力が必要とされる案件は、そんなに転がっていません。
もしフリーランスとして収益化を早めたいのであれば、フロントから入ると良いでしょう。
もちろん最も素晴らしいのは、全て出来ることですね。
頑張れば出来ないことも無いので、ぜひ、挑戦してみてください。
まとめ
色々とざっくばらんにお話したので、コーディングとは、についてまとめます。
まず、コーディングとは、プログラミング言語でコードを書く総称です。
ウェブサイト制作の業界の、コーディングとは、大きくわけて、下記の3つに分かれます。
- フロントエンド – 表面のデザインや動きをコーディング
- マークアップ – フロントエンドの一部でウェブサイトのデザインを再現
- バックエンド – データの保存や出力を中心とする裏側をコーディング
という認識があります。
同時にウェブ制作業界ではコーディングはフロントエンドを多く意味します。
バックエンドは共通してプログラミングと呼ばれるイメージあります。
コーディングとは、個々によって多少、概念が異なるかもしれません。
また、それぞれで使う言語は下記のとおりです。
- フロントエンド – HTMLやCSS、Javascript、jQueryなど
- マークアップ – 主にHTMLやCSS
- バックエンド – PHPやRuby、Pythonなど
どの言語を選ぶかによって、その後の人生は大きく変わるでしょう。
収益化を早めたいのであれば、フロントエンドとデザインがオススメ。
技術力を武器に、収益化が遅れてもいいけど大きく稼ぎたいならバックエンドです。
コーディングとは、何を選ぶかによって、出来ることも収益も、仕事の仕方も異なります。
クライアントも違っていますし、習得にも時間がかかるので、どこを目指すか目標は持つべき出す。
自分がどんなエンジニアになりたいのか、ウェブデザイナーになりたいのか。
学びながら、作りながらでも良いので、ぜひ、考えてみてください。
とは言え、最終的にはどんな言語も操れるところが終着点ですけど。
スーパーエンジニアはそれこそ、大抵の言語を使えてしまいますし。
コーディングとは、の話から話が広がりましたが、ぜひぜひ、参考にしてみてくだいね。