HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約6分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

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

プログラミングには、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を学習するべき理由についてはこちらの記事を↓

https://hikopro.com/html-css-start/

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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)