プログラミングを始めてみたいけど、たくさん言語があってよく分からない。
難しいって聞くし、何から始めればいいんだろう。
環境が必要とか聞くけど、簡単にできないの？
今回は一文字もコードを書いたことがない人向けに、エンジニア歴1年半、Webデザイナー歴1年の僕がまずやってみてほしい言語を紹介します。
この記事の内容
- 言語の種類を簡単に解説する
- 一番最初に触ってみてほしい言語
- おすすめな無料プログラミング学習サイト
- できたら次に学んでみてほしい言語
- まとめ
言語の種類を簡単に解説
言語には大まかに2種類あります。
マークアップ言語とプログラミング言語です。
Webサイトを例にして説明すると、まずマークアップ言語とはWebサイトの見た目の部分です。
文字や画像を入れたり、段落といった文章の構造を作ったりするのがマークアップ言語の役割です。
反対にプログラミング言語とはWebサイトの裏側の部分です。
ショッピングサイトで商品をカートに保存したり、合計の値段を計算したりといった機能をプログラミング言語で作ります。
一番最初に触ってみてほしい言語
これから紹介するのはマークアップ言語の方です。
なんだプログラミングじゃないのかよ、と思われた方もいるかもしれませんが、これからWebサービスを作ったりする場合、見た目ってすごく大切ですし、プログラミングを専門でやってる方であっても少なからず知っていて当たり前なようなものです。
プログラムを作る場合、必ず必要と言ってもいいでしょう。
何より準備もほぼいらないので、簡単にできます。
HTMLとCSS
僕が紹介する最初に触ってみてほしい言語はHTMLと呼ばれるものです。
スマホやPCで見ているほとんどのサイトやページがこのHTMLで出来ています。
HTMLにはセットで使われている言語が存在します。
それがCSSです。
CSSはマークアップ言語ではなくスタイルシート言語と呼ばれるものですが、HTMLで書いた文字に色をつけたり画像の形を変えられたりします。
例で表すと人間そのものがHTMLで服がCSSといったイメージです。
単に服を着せるだけでもいいですが、メガネや帽子を被せたりすれば、おしゃれになったり、華やかになったりしますよね。
この服やメガネや帽子といった装飾品がCSSです。
服を着ないで外に出ると問題がありますよね。
なのでHTMLとCSSはセットで考えてください。
実際にやってみる
HTMLとCSSを紹介した理由の一つがとにかく手軽だということです。
プログラミング言語の場合、エディタだったり、データベースだったり、サーバーだったりと前準備が色々必要だったりしますが、HTMLとCSSはメモ帳だけでできます。
この記事の中で全て説明するのは難しいので無料でプログラミングが学べるサイトを後ほど紹介しますが、HTMLだけ簡単にやってみましょう。
1.メモ帳の準備
windowsの場合はメモ帳
Macの場合はテキストエディットを開いてください。
テキストエディットはアプリケーションフォルダ内にあります。
※テキストエディットの場合
テキストエディットを起動させたら、以下の設定を見てください。
テキストエディット > 環境設定
画像の赤矢印の部分 標準テキスト を選択してください。
されていれば問題ないです。
2.以下のコードをコピー
<!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>自己紹介</title> </head> <body> <h1>初めまして</h1> <p>こんにちは</p> </body> </html>
メモ帳にそのままコピペしてみてください。
3.ファイルを保存する
ファイル > 保存
または
Ctrl+S(Macの場合command+S)
のどちらでも構わないですが、画像のように名前の.〇〇以降を.htmlに変えてください。
これでHTMLファイルとして保存されます。
4.表示する
保存したファイルをダブルクリックして見てください。
ブラウザが起動し、画像のように表示されると思います。
コードの解説
では、今書いたコードの意味を少し解説したいと思います。
HTMLは表示したい文章や画像をタグと呼ばれるもので囲みます。
この時に使うタグの種類によってその文章や画像にそれぞれの別の意味を持たせます。
今書いたコードで言うと、<title></title>で囲まれた部分はブラウザのタブに表示されます。
<h1></h1>は見出しという意味があり、<p></p>は段落といった意味を持っています。
使うタグによってどういう意味を持つか、どういう表示をさせるか、といったことをコンピュータが認識するためです。
このタグの種類はたくさんあり、表なんかもタグで囲んで作ります。
<title></title>と<h1></h1>と<p></p>の中を自分の好きな文章に変えて表示してみてください。
おすすめな無料プログラミング学習サイト
初心者でも簡単に学べるプログラミングの学習サイトを2つ紹介します。
ドットインストール
ネットで調べてもある程度までなら学習できると思いますが、やはり文章や画像だけでは分かりづらいこともあると思います。
ドットインストールは3分の短い動画で解説してくれるので、非常に分かりやすいです。
▶︎ ドットインストール
Progate
Progateで特徴的なのはゲーム要素を含んでいるところです。
やればやるだけレベルが上がっていき、成長が目に見えるので、楽しんで学習できると思います。
▶︎ Progate
できたら次に学んでみてほしい言語
HTMLとCSSがある程度できるようになったら、その次に学んでおいて損のない個人的におすすめな言語を紹介します。
JavaScript
僕がおすすめしたいのはJavaScriptというプログラミング言語です。
JavaScriptはWebページに動きをつけることができます。
最近はよく使われていますが、トップ画面で複数の写真が一定時間ごとにスライドされて表示されるサイトを見たことがありませんか？
またサイトを読み進めていくとメニュー画面だけ一緒についてきたりなど、ページに様々な機能をつけることができます。
HTMLとCSSはセットで考えられていると最初に言いましたが、JavaScriptも必須スキルになってきています。
JavaScriptではアプリ開発を行うこともできます。
Webデザイナーに転職したい、といった方だったり、おしゃれなWebページを作りたい。
そんな人はもちろん、アプリ開発やエンジニアになりたい人もJavaScriptを使える人は割とニーズがあります。
とりあえずプログラミングをやってみたい、Webサイトやアプリ開発を行ってみたい。
そのどちらの人でもJavaScriptは、後々生きてくると思います。
Javaとの違い
プログラミングを学び始めるとJavaという言葉も聞くことが多くなると思います。
Javaもプログラミング言語ですが、JavaScriptとは別物です。
僕も最初に研修で学んだのがJavaでしたが、JavaScriptという言語を知った時、親戚か何かだと思っていました。
名前は似ていますが、全く関係ないんだな、くらいの認識でいいと思います。
まとめ
今回、僕が紹介したHTMLとCSSはプログラミングとは言えないかもしれません。
僕もそうでしたが、最初はプログラミングの定義が曖昧で、全部一緒なようなものだと思っていました。
準備がいらず、手軽に始められる、かつ楽しくて簡単といった点で今回はHTMLとCSSをおすすめしました。
いや、私はプログラミングがしたいんや！といった人は先ほど紹介したJavaやPHPなんかをやってもいいと思います。
楽しそうだと思ったら、まずやってみてください。
僕も初めはそんな感じでした。
参考になれば幸いです。
それでは。
