プログラミングの勉強を始める時に最初に勉強すべきプログラミング言語
プログラミングを始めるなら何を最初に勉強すべきか、それはなぜか、そしてどう勉強すべきかを主観たっぷりで紹介していきます。
はじめに
プログラミングの勉強を始めようと思っても、選択肢が多すぎて一体何を勉強すれば良いか分からないですよね。
「最初に勉強すべきプログラミング言語」について調べてみると、
- 何を作りたいかで決める
- 自分に合っているかで決める
- 今のトレンドで決める
- 仕事の多さで決める
などの情報が出て来ました。
これらの条件から最適なプログラミング言語を選択出来れば無駄もないし、良いスタートが切れると思います。
でもこれ判断出来ます？
今回の記事では、いろいろ調べながらも結局何を勉強したら良いかわからない人に向けて、僕が思うこれを勉強したら良いよっていうのを紹介したいと思います。
いきなり結論
- HTML
- CSS
- JavaScript
です。
いきなり3つ？！
はい、3つです。1つではないんです。ただしこれは何も最初から高いハードルを設定している訳ではなく、むしろ逆です。
プログラミングを学ぶからには何かを作りたいという想いがあると思います。つまり学びたいのは言語ではなく作り方ですよね。作り方を学ぶには簡単なものでも良いので実際に作ってみるのが成長の近道です。
ただし、何かを作ろうと思ったら結局複数の言語が必要になります。トンカチひとつで家が建たないのと一緒です。
幸い今回あげた3つを使えば実際にホームページを作ることが出来ます。テーマはなんでも良いのでまずは簡単なホームページを作ってみるのが良いんではないかという想いから、今回3つの言語を選びました。
選んだ理由
ちなみにこの中で満場一致でプログラミング言語と分類出来るのはJavaScriptぐらいです。が、そういう細かいことはさて置き、なぜこの3つの言語を選んだかについてここで述べていきたいと思います。
始めやすいから
これが一番の理由です。
ほとんどのプログラミング言語は初心者からすると始めるだけで一苦労です。その言語が動くサーバーが必要だったり、設定やソフトウェアのインストールも大変です。これだけでプログラミングを諦める人がいるぐらいです。
一方今回選んだ言語を動かすのに必要なのはブラウザだけです。この記事を見るのに今使っているブラウザです。
つまりこの記事が見れている時点で、すぐにでもプログラミングが開始出来るということです。
無駄がないから
だいたいの言語は出来ることが似たり寄ったりの別の言語があったりします。でも今回あげた3つの言語は、それがありません。HTMLで出来ることはHTMLでするしかありませんし、CSSやJavaScriptも同様です。
つまり、この3つを勉強することは一切の無駄が無いんです。
楽しいから
プログラミングには大きく分類して2つの領域があります。それがページを作るためのフロントエンドと呼ばれる領域と、その裏側でサーバー間の通信やデータベースの操作を行うためのバックエンドと呼ばれる領域です。
プログラミング初心者の人は、慣れ親しんだブラウザにすぐに自分が書いたプログラムが反映されるフロントエンドの領域の方が「楽しい」と感じる人が多く、その気持ちが勉強のモチベーションに繋がります。今回選んだ言語はまさにそのフロントエンドを代表する言語になります。
各言語の特徴
今回選んだ3つの言語がどういうものかを簡単に説明していきます。
HTML
ページ内には画像やリンク、文章やチェックボックスなどのさまざまな要素が存在します。
HTMLを使えばページ内にどのような要素を配置するかを定義することが出来ます。
CSS
HTMLだけでページを作るとハリボテのような何の洒落っ気もないページになってしまいます。そこで役に立つのがこのCSSです。
CSSを使えば要素に色やサイズを変更したり、要素の位置を指定することにより、ページを綺麗で見やすいようにデザインしていくことが出来ます。
JavaScript
HTMLとCSSだけではまだページに「動き」がありません。
そんな時、JavaScriptを使えばボタンをクリックした時や、チェックボックスの選択肢を変えた時なんかにページ内に特定の変化を加えることが出来ます。
またバックエンド側との通信を行い、得たデータをページに反映させる役割も持っています。
アカウント登録ページなんかでアカウント名を入力したら「その名前は既に使われています」みたいな文字が表示された経験はありませんか？あれはJavaScriptがバックエンド側と通信を行い、データベースなどのデータと入力値を照合した結果を表示しています。
ちょっと体感してみませんか？
せっかくなのでこの3つを使って簡単なページを作ってみましょう。
Step1. ソースコードをコピー
メモ帳でもなんでも良いので文字が打てるソフトを起動して↓これを全部コピーして貼り付けてみてください。
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
<!-- ↓↓↓ ここからがCSS ↓↓↓ -->
<style>
.input {
font-size: 18px;
padding: 3px 10px;
width: 100px;
text-align: center;
border-radius: 5px;
}
.btn {
border: 0;
border-radius: 5px;
padding: 10px;
cursor: pointer;
margin-top: 30px;
background-color: #00ff00;
}
.answer {
font-size: 18px;
font-weight: bold;
}
</style>
<!-- ↑↑↑ ここまでがCSS ↑↑↑ -->
</head>
<body>
<input type="input" class="input left" />
<span class="mark">+</span>
<input type="input" class="input right" />
<span class="mark">=</span>
<span class="answer"></span>
<br>
<button type="button" class="btn" onclick="calc()">計算</button>
<!-- ↓↓↓ ここからがJavaScript ↓↓↓ -->
<script>
function calc() {
var left = parseInt(document.getElementsByClassName('left')[0].value, 10),
right = parseInt(document.getElementsByClassName('right')[0].value, 10);
document.getElementsByClassName('answer')[0].textContent = left + right;
}
</script>
<!-- ↑↑↑ ここまでがJavaScript ↑↑↑ -->
</body>
</html>
Step2. 新規HTMLファイル作成
上で貼り付けたファイルを保存します。保存する場合はhoge.htmlとする必要があります。hoge部分は他の名前に置き換えてもらって構いませんが、拡張子(.htmlの部分)は必ず.htmlでないといけません。
Step3. ブラウザに表示させる
保存したファイルを適当なブラウザにドラッグ＆ドロップしてみてください。
このように足し算が出来るページが出てきたら成功です。
ちょっと解説
貼り付けてもらったソースコードを見て頂ければわかると思いますが、CSSとJavaScriptが書かれているところには「ここからが○○」みたいなコメントが書かれていて、そこ以外は全てHTMLのソースコードとなります。
HTMLではページにどんな要素を配置するか、CSSでは配置した要素の装飾、JavaScriptでは計算処理を書いていることがなんとなくわかるかと思います。
このようにHTML、CSS、JavaScriptをひとつのHTMLファイルに全て書くことも出来ますし、CSSは.css、JavaScriptは.jsという拡張子の個別のファイルに書いて、HTMLからそれらのファイルを読み込むことも出来ます。一般的にはファイルはそれぞれ分けて書きますが、ここでは見やすさ重視でひとつのファイルに書きました。
勉強方法
実際にすこしソースコードにも触れてもらいましたが、これから勉強して出来ることをどんどん増やしていき、少しずつ自分のホームページを作っていくのが良いと思います。
ここではおすすめの勉強方法をご紹介していきますので、自分に合った勉強方法が見つかれば幸いです。
ドットインストール
エンジニア御用達のドットインストールという動画サイトです。中には有料のものもありますが、入門レベルの動画は無料で見ることが出来ます。
これらのレッスンの他にも豊富に動画は用意されているのでおすすめです。
技術サイト
これまたエンジニア御用達のQiitaというサイトがあります。ここは様々なエンジニアが独自の記事を投稿しているサイトで、「HTML 入門」なんかで検索してもらうとたくさんの記事がヒットします。その中から自分にとってわかりやすい記事を探していくのもおすすめです。
技術書籍
今回選んだ3つの言語は最もメジャーな言語たちですので、よほど小さい本屋さんでない限り必ず置いてあります。中にはおしゃれなホームページのデザインと、そのホームページを作る為のHTMLやCSSまで書いてある書籍もありますので、自分に合った1冊を探すのもおすすめです。ちなみに僕は電子書籍での勉強が一番はかどります。スマホやタブレットだけあれば所構わず読み漁れるのでおすすめです。
また、電子書籍を買うなら「honto」がおすすめです。お得なクーポンをこれでもかというぐらい貰えるし、アプリも使い勝手が良いので、僕は電子書籍はここで買うようにしています。
さいごに
僕は最初にC言語を勉強して難しくて速攻投げ出しました。
その後、未経験で入社した会社でJavaを勉強しましたが、これも何度も投げ出そうとしました。全然書いてて楽しくありませんでした。
一方今回選んだ3つの言語は結果がブラウザでダイレクトに得られ、どんどん自分の出来ることが増えていくので書いてて非常に楽しい言語です。デザインセンスも磨かれ意外な才能が開花する可能性もあります。
せっかくプログラミングを始めるなら楽しみながらやりたいですよね。僕はいまだにプログラミングが大好きですし、好きじゃないとそもそも続かない業界なのかもしれません。今回あげた言語を気に入って貰えると僕としては本望です。それでは今回はこのへんで。ではでは。
