他にも勉強しないといけない言語ってあるの？
プログラミングの勉強を検索すると、「おすすめのプログラミング言語」といった記事がたくさんヒットします。
Webのシステムやアプリをつくるつもりなら、プログラミング言語を覚える前に「マークアップ言語」と「クライアントサイド言語」を覚えないといけないです。
マークアップ言語やクライアントサイド言語は、Webページを構成する言語だからです。
つまり、Webページに表示されているテキストとかボタンなどは、マークアップ言語で作られています。
この記事では、マークアップ言語・クライアントサイド言語の説明とプログラミング言語との違い、「なぜプログラミング言語より先に覚えた方がいいのか」ということを解説します。
後半は、マークアップ言語・クライアントサイド言語の効率的な勉強方法を紹介します。
マークアップ言語・クライアントサイド言語とは
Webページの表示や動きを制御している言語です。
Webページ自体を構成する言語となるので、そもそもマークアップ言語がわからないとWebページが作れません。
次は、マークアップ言語とフロントサイド言語を深堀りしていきます。
マークアップ言語とは
文字やボタンなどのWebページに表示されているモノを構成するのが、マークアップ言語です。
Webページを作るにあたって必ず必要になる言語となるので、「Web系でやっていこう」としているなら避けては通れない言語です。
- HTML
- CSS
※簡単なアニメーションならCSSのみでできる
クライアントサイド言語とは
プログラミング言語に分類されますが、主に画面のアクションを制御する言語です。
つまり、「ボタンをクリックした後のにどのように動かすか」のような処理を行う言語です。
- JavaScript
- jQuery（ジェイクエリー）
サーバーサイド言語（クライアントサイド言語の対局）
よくプログラミング言語として紹介されている言語です。
データベースへの接続や計算処理などの処理をさせます。
- PHP
- Ruby
- Python
プログラミングの勉強を始めようと思うけど、プログラミング言語って何を選べばいいんだ？みんなはどんなプログラミング言語を勉強しているんだろう？ プログラミング言語は種類が多いので何を選べばいいのかわからな[…]
マークアップ言語とプログラミング言語との違い
マークアップ言語、プログラミング言語（クライアントサイド言語、サーバーサイド言語）の違いは大きく２つあります。
- やれることの違い
- 処理が実行される場所
「やれることの違い」は今までの説明で想像つくと思いますが、「処理が実行される場所」というのか「？」ですよね。
Web開発を行う上で、「処理が実行される場所」ということは必ず理解しないといけないことの1つです。
1つ1つ解説していきます。
やれることの違い
繰り返しになりますが、マークアップ言語はWebページ自体を構成する言語です。
プログラミング言語は、計算処理やデータの取得や登録などを行う言語です。
それぞれのプログラミング言語の組み合わせで、Webのシステムやアプリが作られています。
処理が実行される場所
「処理が実行される場所」というのは、「クライアント側なのかサーバー側なのか」ということです。
この関連性の理解は設計・開発するときに必須です。
| クライアント側で実行される |
|
| サーバー側で実行される |
|
なぜプログラミング言語より先に覚えた方がいいのか
Web系のシステムやアプリはマークアップ言語によって画面が作られています。
基本的には画面があっての処理なので、画面がないのに処理を書くことはできないので、プログラミング言語よりマークアップ言語を覚えた方がイイというわけです。
上記の理由が１番ですが、他にもあります。
それは、「特別な開発環境がなくてもできる」ということです。
マークアップ言語を書いて実行するだけなら、「メモ帳」のツールと「ブラウザ（Internet Explorerやchromeやsafariなど）」のツールがあればOKです。
具体的な手順
- 「メモ帳」を開きマークアップ言語を書いて保存する
- ファイルの拡張子を「.html」に変える
- 「ブラウザ」を起動する
- 起動したブラウザにファイルをドラック＆ドロップする
- ファイルで書いたマークアップ言語がブラウザに表示される
【サンプルコード】
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div><h1>表示 テスト</h1></div>
<div><h2>書いたコードがそのまま表示されなければ成功</h2></div>
</body>
</html>
マークアップ言語・クライアントサイド言語の効率的な勉強方法
マークアップ言語とクライアントサイド言語は簡単に勉強することができます。
その理由は、クライアン側で処理されるモノなので、ブラウザの標準機能である「開発者ツール」を起動すれば表示しているWebページの内部の構成が見れます。
実際に表示されているWebページと内部の構成を見比べながら作りを理解しながらマネして自分で作ってみる感じです
HTML・CSSの勉強を始めたけど、どうやって勉強すればいいんだ？効率的な勉強方法はないものか... このような疑問に答えます。「どうしてもプログラミングの勉強が続かない...」、「モチベーショ[…]
マークアップ言語とクライアントサイド言語だけでも仕事はできる
ぶっちゃけマークアップ言語とフロントサイド言語だけできれば仕事ができちゃうんです。
単価も少ないし数もそんなに多くないですが、クラウドソーシングサイト（クラウドワークスとランサーズ）で調べてみるといくつか案件があります。
IT業界への転職を目指しているならば、マークアップ言語とフロントサイド言語だけでもいけます。
ちなみに私は新卒採用でしたが、全くの予備知識なしの未経験の状態でIT業界へエンジニアとして就職しました。
詳しい体験談は”全く勉強なしの未経験のプログラミング初心者がIT企業に就職したらこうなった”の記事にあります。
今までプログラミングと関係ない仕事をしていたけど、未経験でシステムエンジニア（SE）になれるのかな... 結論から言うと、未経験でもシステムエンジニア（SE）にはなれます。プログラミング未経験でIT業界[…]
まとめ：プログラミング言語と同時進行でもOK
「マークアップ言語・クライアントサイド言語を先に勉強しましょう」という内容ですが、マストではないです。
順番に１つずつ理解するならマークアップ言語とクライアントサイド言語を先にやった方がイイということです。
ほとんどの場合は、プログラミング言語から勉強をはじめてしまうので同時進行となってしまいます。
プログラミング始めたばかりで、3つも4つも同時に覚えていると「わけわかんね…」となるので、そうならないために頭の中を整理しながら順番にやっていった方が効率がイイし、モチベーションを保てると思います。
独学はモチベーションをうまくコントロールしないと続かないので、エンジニアになりたいけど「どうしても勉強がしんどいよ～」という場合は、思い切ってプログラミングスクールを始めちゃうのもアリです。
現役のエンジニアの話は刺激になると思うし、勉強の方法やわからないことを手とり足とり教えてもらえるのはありがたいです。
プログラミングスクールって近くにないし、通うのめんどくさいし、家で勉強したい。とは言ってもオンラインのプログラミングスクールっていろいろあるけど何を選べばイイんだ...どう言う基準で選べばイイんだ... […]
「独学」だったり、「プログラミングスクール」だったり、「いきなり転職しちゃう」だったり、いろんな方法がある中で自分に合った方法で勉強するのが1番効率がイイ方法ですよね。
人気記事 【初心者向け】独学でプログラミングを勉強するための手順