【初心者向け】Web製作をする上で学ぶべきプログラミング言語【図解あり】

こんばんは、プログラミング学習をしている氷犬です。

 

プログラミングを学習したい人
Web製作を仕事にするためにプログラミングを学習したいんだけど、何を学んだらいいんだろう?
HTMLとかJavascriptとかいろいろあって、違いがよくわからないや。
初心者でもわかりやすいように誰か解説してください。

こんな疑問に答えます。

 

この記事の内容

  1. Web系エンジニアになるために必要なプログラミング言語
  2. プログラミング言語の違いを解説【図解あり】
  3. 学習する順番は「HTML/CSS→JavaScript→PHP」

Web系エンジニアになるために必要なプログラミング言語

プログラミング

Web系エンジニアとは、Web製作の仕事が中心のエンジニアのことです。

簡単に言うと、普段みんなが見ているWebページの見た目を作る仕事ですね。

フロントエンドエンジニアともいいます。

 

Web系エンジニアになるために必要なプログラミング言語は『5種類』です。

  1. HTML/CSS
  2. Javascript/jQuery
  3. PHP
  4. Bootstrap(フレームワーク)
  5. WordPress(Web管理ツール)

※正確に言えば、BootstrapとWordpressはプログラミング言語ではないです。

ひとつずつわかりやすく解説していきます。

 

-スポンサードサーチ

プログラミング言語の違いを解説【図解あり】

ひとくちにプログラミング言語とは言っても種類がいろいろあります。

最初はどんな違いがあるのかよくわからないと思うので、ひとつずつ見ていきましょう。

1:HTML/CSS

html css

HTML/CSSはWebページの見た目を作るための言語です。

Webサイトのレイアウトを決めたり、色をつけたりなど、自由にデザインすることができます。

まず、見た目を作らないことには何も始まらないので、HTML/CSSの知識は絶対に必要です。

 

HTMLでホームページの土台を作って、CSSでレイアウトを整えて装飾するようなイメージ。

作業量は体感でHTML:CSS=3:7くらいですね。

細かい点はさておき、慣れてしまえば割と簡単に扱えるようになります。

 

ちなみにHTML/CSSはWebサイトの構造を作る言語なので、正確にはプログラミング言語ではなく、マークアップ言語といいます。

2:JavaScript/jQuery

Javascriptはざっくり言うと、「HTML/CSSに動きをつけるための言語」です。

 

HTML/CSSだけで作ったページは基本的に見た目を動かすことができません。

たとえば、ボタンをクリックしたら画像が入れ替わるような動きはJavaScriptを使って作ります。

 

しかし、Webサイトでよくあるスライドショーなどの動きをJavaScriptでゼロから書こうとすると、コード量が多くなって大変です。

そこで、JavaScriptでよく使うシステムをより簡単に扱えるようにしたものがjQueryです。

jQueryを使うと少ないコード量で複雑な動きを実装できるようになります。

 

3:PHP

たぶん、PHPは「調べてもどういう言語なのか」がイマイチピンと来ないと思います。

実際に扱ってみるとわかるのですが、PHPは「サーバーに保存したデータを扱うための言語」ですね。

 

たとえば、このブログ記事は普段サーバーに保存されていて、「対応するURLが呼び出されると、PHPがサーバーからこの記事を引っ張って表示する」ような仕組みになっています。

PHPを使うと、サーバーをデータから取り出したり、逆にWebページに入力されたデータをサーバーに保存することができます。

あとで説明しますが、Wordpressを動かすのにもPHPが使われています。

 

4:Bootstrap(フレームワーク)

BootstrapはTwitter社が作ったHTML/CSSのフレームワークです。

先ほど「Javascriptでよく使う動きをまとめたものがjQuery」と説明しましたが、BootstrapはそのHTML/CSS版だと思ってください。

Bootstrapを使うと、簡単に今風のデザインを作ることができます。

 

こんなボタンをゼロから作るのは多少手間なんですが、Bootstrapなら1行コードを書くだけで作れてしまいます。

世界中で使われているフレームワークなので、使えるようになっておいた方がいいですね。

 

5:Wordpress(Web製作・管理ツール)

WordPressは世界中で使われている、Webサイトを楽に制作・管理するためのツールです。

Webサイトをコードのまま扱おうとするとめんどくさいんですが、Wordpressを使うとWebサイトのメンテナンスが楽になります。

このブログもWordpressを使って管理していますね。

 

WordPressには、HTML/CSS/Javascript/PHPが使われていて、この4つの言語を扱えるようになると実質Wordpressも使えるようになります。

「PHPはサーバーにあるデータを取り出すための言語」ですが、Wordpressの構造はこんな感じです。ファイル名がphpで終わっているのがわかるかと。

テーマにもよりますが、OPENCAGEのテーマは基本的にBootstrapが使われているみたいです。

 

【コラム】Rubyってどうなの?

なんとなく何を勉強したらいいのかはわかったよ。
ところで、プログラミング学習について調べるとRubyが人気らしいけど、こっちを勉強したらダメなの?

結論からいうと、「興味があるなら勉強してもいい」と思います。

RubyはPHPと同じように、サーバーのデータを扱うための、いわゆる「サーバーサイドの言語」です。

学習サイトでもよく取り上げられますし、メインの言語として推されていることも多いですよね。

 

ただ、勢いが増してきたのは最近なので、まだPHPの方が人気なのかなーと思います。

まあ、これからRubyの案件も増えてくるでしょうし、興味があるならRubyを勉強するのも悪くないですね。

「Web製作」という観点から言うと、Wordpressがある分だけPHPの方がおすすめです。

【超初心者向け】大まかにRubyとPHPを比較してみる(他サイトに飛びます)

 

実を言うと、僕もRubyやRailsをダラダラと勉強していた時期があったのですが、「別にWebサービス作りたいわけじゃないな」と気づいてやめた、という経緯があります笑

 

学習する順番は「HTML/CSS→JavaScript→PHP」

ここまで、「HTML/CSS/JavaScript/jQuery/PHP/Bootstrap/Wordpressを勉強するといい」と説明してきました。

 

学習する順番はこんな感じがおすすめです。

プログラミング言語を学習する順番

  1. HTML/CSS:見た目を作る
  2. Bootstrap:早く作れるようになる
  3. Javascriptの基礎:jQueryを扱うために
  4. jQuery:ページに動きをつける
  5. PHP:データを管理する
  6. WordPress:Webサイトを管理できる

完全にマスターする必要はなくて、「なんとなくわかってきたかなー」と思ったら次に行きましょう。

たぶん、進めていくうちに自分なりにこうした方がいい、というのが見えてくると思います。

学習サイト・書籍・Googleをうまく使って学習していきましょう(^_^)/

 

最初はProgateがおすすめ

プログラミング学習は最初で挫折しがちなので、本当に簡単なところから始めた方がいいです。

Progateならスライド形式でわかりやすく、重要なところをピンポイントで学習できるのでおすすめです。

 

Progateがいかにおすすめかはこちらの記事に書いています。

プログラミングを始めるなら『Progate』がおすすめ。楽しくコードが書けるプログラミング学習サイト

 

-スポンサードサーチ

初心者向けのプログラミング学習記録はこちら

このブログでは、僕のプログラミングの学習記録を記事にしています。

初心者の方には参考になると思うので、ぜひ見てみてください。

ドットインストールとBootstrap【プログラミング学習記録①】

【画像あり】はじめてのランディングページ模写【プログラミング学習記録④】

 

「Web製作に必要なプログラミング言語」まとめ

  • Web製作に必要なのはHTML/CSS/JavaScript/PHP
  • 他にはjQuery/Bootstrap/Wordpress
  • 学習を始めるならProgateがおすすめ

 

関連記事:
【未経験から】プログラミングの独学方法の手順まとめ【実践済み】

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA