ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【初心者向け】プログラミング学習始めるなら何の言語がオススメ?

学習法
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

今回の記事では、プログラミング初心者と言うより、プログラミングに興味があってこれから学習を始めようと思っている方に、まず始めに何をすれば良いかについてお話しします!

プログラミングには、HTML、PHP、Javascript、Rubyなど数多くの”言語”が存在し、これから学習を始められる方は何から、なんの言語から学習すれば良いか分からないかと思います。

ネコ君
ネコ君

プログラミング言語は全部で200種類以上もあるんだって!!

3ヶ月で現役エンジニアになれた僕が、初心者の方がプログラミング学習を何から始めれば良いかについて僕の経験を踏まえてご紹介します!

こんな方にオススメ
  • これからプログラミング学習を始めようと思っている方
  • 初心者にとって効率の良い学習方法について知りたい方
  • 初心者にとってオススメのプログラミング言語が知りたい方
スポンサーリンク

無論。HTML,CSSから始めよう!

始めに結論から言うと、初心者の方はまず始めにHTML、CSSと言うプログラミング言語を学ぶ事をオススメします!

HTMLとは

HTMLとはwebページの“見た目”を作るプログラミング言語で、「文章に意味付け」をする役割があります。この記事もHTMLを元に作られており、webページにおいてHTMLを使用しないページはありません。

HTMLはサイトの骨組みを作る言語

CSSとは

CSSはデザイン言語と呼ばれており、HTMLで作った骨組みのページに装飾をしていく言語です。例えば黒の文字を赤色にしたり、ページのレイアウトを変える事も可能です。

CSSはHTMLで作られた骨組みに装飾を指定く言語

少しはイメージができたかと思います。

つまり、webページを作りたい!webサービスを開発したい!などの目標があるかたは、JavaScript、PHP、Rubyなどを始めに勉強しないとと思うかもしれませんが、このHTML,CSSをマスターしないとwebサイトは作れません。

webサービスやECサイトを作る際は、

HTML,CSSでサイトの見た目を作る(静的なサイト)→Js、PHPを組み込み動くサイトにする(動的なサイト)

このような流れで作っていきます。

HTML,CSSを学習すべき人
  • webサイトを作りたい方
  • ショッピングサイトを作りたい方
  • webサービスを開発したい方(マッチングサイト、ブログサイトなど)
HTML,CSSを学習すべきでない人
  • ゲーム開発をしたい人
  • 金融システムを作る人
  • 目に見えないプログラムを作る人

まあ簡単に言うと、HTML,CSSを勉強しておけば基本何でも作れてしまうと言う事です。

Facebook、Twitterなどの有名なサービスもHTML,CSSを用いて開発されました。

↓HTML,CSSを学習するべき理由についてはこちらの記事を↓

HTML,CSSと合わせて学んでおきたい事

HTML,CSSの学習を始めるべき理由が分かり、これから学習を始められるかと思いますが、この学習の際に合わせて学んでおくべきことをいくつかご紹介します。

1.Google Chrome検証ツールの使い方

これはwebエンジニアでフロントエンド(webページの見える部分)を作る際には必須と言っても過言ではないツールです。

プログラミング学習者はもちろん、現役エンジニアでも仕事で頻繁に使うので同時に学んでおきましょう!

Hiko
Hiko

検証ツールを使わないと完成度の高いwebサイトができないです!

Chrome 検証ツールで出来る事
  • 既存or製作中のサイトのコードが見れる
  • デザイン、レイアウトの変更テストができる
  • スマホやタブレットでの見え方を確認できる
  • 要素の余白(padding,margin)が一目で分かる(1番使う)

このGoogle Chromeの検証ツールはChromeブラウザを使っていれば、簡単に無料で使えるのでどんどん活用していきましょう!

スポンサーリンク

2.Bootstrapを使って爆速でサイトを作る方法

Webサイトを作る際にHTML,CSSで作っていくのですが、それだけでは効率よくサイトを作ることができず、早く作るためにはBootstrapやSCSSと言うCSSのフレームワーク(CSSをより便利にした言語)を使ってサイトを作っていきます。

Bootstrapで出来る事
  • HTMLだけでおしゃれなサイトができる
  • HTMLだけで動くサイトができる(ハンバーガーメニューなど)
  • コピペで簡単
  • 早くサイトをコーディングできる

このBootstrapをマスターすればサクッと1時間で、FacebookのログインページやAirbnbのページなんかも簡単に作れてしまいます!

注意

Bootstrapを学ぶ前に、しっかりCSSをマスターしてからにしましょう!Bootstrapは便利ですが、頼りすぎはよくありません。

3.使っているエディタのショートカットキーを覚えよう

これからプログラミング学習を始める先には、コードを書く為のツールとしてエディタと呼ばれる物を使う必要があります。

このような初心者が見ると萎えそうな画面ですね!笑

これからコードと呼ばれる文字をこのエディタに書いていくわけですが、その際にショートカットキーを使うことができるととても便利で早くコーディングすることができます。

ショートカットキーで出来る事
  • 一つ前の動作に戻る
  • ファイルを保存する
  • カーソルの移動
  • 複製、コピー、削除、置き換えなど
  • 検索ボックスの表示

お使いのエディタによってショートカットキーは異なるので、調べて自分の物にしていきましょう!

4.ファイルの管理・整頓

プログラミング学習において、かなり重要なのがフォルダの管理や整頓です。

学習過程の間は自分がわかる形でいいですが、いざ実務になると他人が見やすいフォルダ配置が必要になってきます。

これは慣れないとできないので、学習を始めた頃から行うようにしましょう!

基本はこのような形で、プロジェクト名の書いたフォルダを作り、その中に画像の入ったimagesフォルダ、cssファイルの入ったCSSフォルダを作ります。

htmlファイルはプロジェクト直下に置くようにしましょう!

プログラミング学習始めるならまとめ

ネコ君
ネコ君

早速HTML,CSSの学習を始めてみよう〜!

おっと!何をすればいい!!

Hiko
Hiko

初心者の方はまずProgateから始めてみましょう!

いかがでしたでしょうか!

これからプログラミング学習を始められる方は、HTML,CSSから始めるべき事と、同時に学ぶべきことが分かったかと思います。

この記事を参考にぜひプログラマーを目指してください!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
学習法
HikoPro Blog

コメント

タイトルとURLをコピーしました