今回の記事では、プログラミング初心者と言うより、プログラミングに興味があってこれから学習を始めようと思っている方に、まず始めに何をすれば良いかについてお話しします！
プログラミングには、HTML、PHP、Javascript、Rubyなど数多くの”言語”が存在し、これから学習を始められる方は何から、なんの言語から学習すれば良いか分からないかと思います。
プログラミング言語は全部で200種類以上もあるんだって！！
3ヶ月で現役エンジニアになれた僕が、初心者の方がプログラミング学習を何から始めれば良いかについて僕の経験を踏まえてご紹介します！
- これからプログラミング学習を始めようと思っている方
- 初心者にとって効率の良い学習方法について知りたい方
- 初心者にとってオススメのプログラミング言語が知りたい方
無論。HTML,CSSから始めよう！
始めに結論から言うと、初心者の方はまず始めにHTML、CSSと言うプログラミング言語を学ぶ事をオススメします！
HTMLとはwebページの“見た目”を作るプログラミング言語で、「文章に意味付け」をする役割があります。この記事もHTMLを元に作られており、webページにおいてHTMLを使用しないページはありません。
HTMLはサイトの骨組みを作る言語
CSSはデザイン言語と呼ばれており、HTMLで作った骨組みのページに装飾をしていく言語です。例えば黒の文字を赤色にしたり、ページのレイアウトを変える事も可能です。
CSSはHTMLで作られた骨組みに装飾を指定く言語
少しはイメージができたかと思います。
つまり、webページを作りたい！webサービスを開発したい！などの目標があるかたは、JavaScript、PHP、Rubyなどを始めに勉強しないとと思うかもしれませんが、このHTML,CSSをマスターしないとwebサイトは作れません。
webサービスやECサイトを作る際は、
HTML,CSSでサイトの見た目を作る（静的なサイト）→Js、PHPを組み込み動くサイトにする（動的なサイト）
このような流れで作っていきます。
- webサイトを作りたい方
- ショッピングサイトを作りたい方
- webサービスを開発したい方（マッチングサイト、ブログサイトなど）
- ゲーム開発をしたい人
- 金融システムを作る人
- 目に見えないプログラムを作る人
まあ簡単に言うと、HTML,CSSを勉強しておけば基本何でも作れてしまうと言う事です。
Facebook、Twitterなどの有名なサービスもHTML,CSSを用いて開発されました。
↓HTML,CSSを学習するべき理由についてはこちらの記事を↓
HTML,CSSと合わせて学んでおきたい事
HTML,CSSの学習を始めるべき理由が分かり、これから学習を始められるかと思いますが、この学習の際に合わせて学んでおくべきことをいくつかご紹介します。
1.Google Chrome検証ツールの使い方
これはwebエンジニアでフロントエンド（webページの見える部分）を作る際には必須と言っても過言ではないツールです。
プログラミング学習者はもちろん、現役エンジニアでも仕事で頻繁に使うので同時に学んでおきましょう！
検証ツールを使わないと完成度の高いwebサイトができないです！
- 既存or製作中のサイトのコードが見れる
- デザイン、レイアウトの変更テストができる
- スマホやタブレットでの見え方を確認できる
- 要素の余白（padding,margin）が一目で分かる（1番使う）
このGoogle Chromeの検証ツールはChromeブラウザを使っていれば、簡単に無料で使えるのでどんどん活用していきましょう！
2.Bootstrapを使って爆速でサイトを作る方法
Webサイトを作る際にHTML,CSSで作っていくのですが、それだけでは効率よくサイトを作ることができず、早く作るためにはBootstrapやSCSSと言うCSSのフレームワーク（CSSをより便利にした言語）を使ってサイトを作っていきます。
- HTMLだけでおしゃれなサイトができる
- HTMLだけで動くサイトができる（ハンバーガーメニューなど）
- コピペで簡単
- 早くサイトをコーディングできる
このBootstrapをマスターすればサクッと1時間で、FacebookのログインページやAirbnbのページなんかも簡単に作れてしまいます！
Bootstrapを学ぶ前に、しっかりCSSをマスターしてからにしましょう！Bootstrapは便利ですが、頼りすぎはよくありません。
3.使っているエディタのショートカットキーを覚えよう
これからプログラミング学習を始める先には、コードを書く為のツールとしてエディタと呼ばれる物を使う必要があります。
このような初心者が見ると萎えそうな画面ですね！笑
これからコードと呼ばれる文字をこのエディタに書いていくわけですが、その際にショートカットキーを使うことができるととても便利で早くコーディングすることができます。
- 一つ前の動作に戻る
- ファイルを保存する
- カーソルの移動
- 複製、コピー、削除、置き換えなど
- 検索ボックスの表示
お使いのエディタによってショートカットキーは異なるので、調べて自分の物にしていきましょう！
4.ファイルの管理・整頓
プログラミング学習において、かなり重要なのがフォルダの管理や整頓です。
学習過程の間は自分がわかる形でいいですが、いざ実務になると他人が見やすいフォルダ配置が必要になってきます。
これは慣れないとできないので、学習を始めた頃から行うようにしましょう！
基本はこのような形で、プロジェクト名の書いたフォルダを作り、その中に画像の入ったimagesフォルダ、cssファイルの入ったCSSフォルダを作ります。
htmlファイルはプロジェクト直下に置くようにしましょう！
プログラミング学習始めるならまとめ
早速HTML,CSSの学習を始めてみよう〜！
おっと！何をすればいい！！
初心者の方はまずProgateから始めてみましょう！
いかがでしたでしょうか！
これからプログラミング学習を始められる方は、HTML,CSSから始めるべき事と、同時に学ぶべきことが分かったかと思います。
この記事を参考にぜひプログラマーを目指してください！
最後までご覧いただきありがとうございました！
