Web系エンジニアをめざす人が最初に学ぶべきプログラミング言語【初学者・初心者向け】

ウサギ
ウサギ

プログラミングを始めたいけど、なにから始めたらよいかわからない。

どんなプログラミング言語を選んだらいいんだろう?

イヌ
イヌ

まかせて!

初心者が最初に学ぶべきプログラミング言語を説明していくよ!

ウサギ
ウサギ

やったー!

きくきくー!

本記事の内容

・最初に学ぶべきプログラミング言語について
・最初のプログラミング言語の次にやること

本記事の信頼性

イヌ
イヌ

・小規模の開発会社、上場企業2社でエンジニアを経験

・正社員、フリーランス合わせて10年以上エンジニアとして活動

・現在、フリーランスエンジニアとして時給5桁で活動中

この記事を書いているイヌは10年前、独学でプログラミングを始めました。
プログラミングを学んだおかげで、フリーランスエンジニアとして、時間とお金にゆとりを持って働けています。

最初に学ぶべきプログラミング言語について

いろいろなブログを読んだり、

スクールでおすすめの言語を教えてもらったり、

エンジニアの友人などから話を聞いたりすると、

「PHPが最初は簡単だからいいよ!」

「Rubyが便利だから、Rubyにしなよ!」

「Pythonが書きやすくて、おすすめだよ!」

と、いろいろ意見があります。

じつはすべての意見が、一理あります。

エンジニアは最初に学んだ言語や普段利用している言語をすすめます。

それが自然だからです。

でもこうなると、初学者のかたは、どれからスタートしてよいかわからなくなりますよね。

その気持ちとてもわかります。

どれも正しいとしても、すべてを同時に学ぶことはできません。

さきほど話に出てきたRubyやPHPなどはバックエンド技術のプログラミング言語です。

Web系エンジニアとして必要な技術は大きく分けて2つあります。

  1. フロントエンド
  2. バックエンド

の2つです。

エンジニアによって得意不得意はありますが、Web系エンジニアはどちらも扱えます。

イヌのおすすめは、フロントエンドのプログラミング言語から始めることです。

当然、バックエンドから学習をすることも可能です。

ただ、バックエンド技術は、フロントエンド技術に比べて、基礎部分を習得するのに時間がかかります。

初学者であれば、一般的にフロントエンド技術のほうが入門しやすいです。

そのため、イヌはフロントエンド技術から学び始めることをおすすめします。

次の項目は、

  • フロントエンドのプログラミング言語と関連技術
  • バックエンドのプログラミング言語と関連技術

について説明します。

フロントエンドのプログラミング言語について

フロントエンドは主に、

  1. HTML
  2. CSS
  3. JavaScript

というプログラング言語で成り立っています。

(厳密には、HTMLはマークアップ言語、CSSはスタイルシート言語ですが、ここではまとめてプログラミング言語と呼びます。)

HTML(マークアップ言語)

Webページの構造をブラウザに教えるための役割です。

HTMLはマークアップ言語のため、少しぐらい間違っていても表示されます。

エラーで動かなくなるというのは、あまりありません。

ただ、エラーがないということは、正しい状態かということを確かめることも難しかったりします。

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

CSS(スタイルシート言語)

主にHTMLの見た目を装飾するための役割です。

文字の色や背景の画像を指定します。

最近のCSSは、ボタンのアニメーションなどの動きも設定できるようになってきています。

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics

Sass(スタイルシート言語)

CSSを便利書くことができるスタイルシート言語です。

ある程度の規模のWeb開発になると、必ずといっていいほど、利用します。

https://sass-lang.com/

JavaScript(プログラミング言語)

ブラウザでそのまま実行することができる唯一のプログラミング言語です。

主な役割はWebの体験に動きをつけることです。

ただ、単純に動きをつける役割は、最新のCSSに置き換わってきています。

現在の主流は、SPA(Single Page Application:シングルページアプリケーション)といって、Googleカレンダーのような画面の切り替えなしで、データの登録、更新、削除などを、サクサク体験良くすすめるようなWebアプリケーションの開発を支援することが多くなってきています。

頻度の多少はあれど、Webアプリケーションでは必ず使用するプログラミング言語です。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript

jQuery(ライブラリ)

JavaScriptライブラリの一つです。

ライブラリというのは、プログラミングに必要な機能を必要な単位でまとめて、呼び出すだけで利用することができる、便利なプログラミングの集まりのことです。

このjQueryはDOMの取り扱いをカンタンにするために利用されるライブラリです。

https://jquery.com/

TypeScript(プログラミング言語)

JavaScriptを拡張して作られたプログラミング言語です。

コンパイルという処理をすると、JavaScriptに変換してくれるため、JavaScriptとして、ブラウザで利用できます。

結果的にJavaScriptに変換するなら、なぜTypeScriptを使うのか。

TypeScriptは、静的型付け言語とよばれ、データ型や関数の引数を検査できるなど、大規模で開発する場合に効果を発揮します。

JavaScriptより学習コストはかかりますが、それを上回る利点があるため、最近のJavaScriptプロジェクトの大半はTypeScriptを利用していることが多いです。

https://www.typescriptlang.org/

React(ライブラリ)

JavaScriptライブラリの一つで、UI(User Interface:ユーザーインターフェイス)を構築することを目的としたライブラリです。

SPAをつくるときに、煩雑になりがちな状態管理のスコープを明確にし、かつViewのレンダリングを効率化してくれる機能を有しています。

https://ja.reactjs.org/

バックエンドのプログラミング言語について

Ruby(プログラミング言語)

Ruby on Railsで利用されているプログラミング言語です。

日本で作られたプログラミング言語のため、日本語での情報がとても充実しています。https://www.ruby-lang.org/ja/

Ruby on Rails(フレームワーク)

Rubyでつくられたフレームワークの一つです。いわゆるフルスタックWebアプリケーションフレームワークです。

https://rubyonrails.org/

Sinatra(フレームワーク)

RubyでつくられたWebアプリケーションフレームワークの一つです。

すべてが最初から揃っているRailsとは異なり、Sinatraは小さく始めるフレームワークです。

簡単なアプリケーションの場合、Railsだとオーバースペックになることがあります。

そんなときSinatraであれば、必要な部分に必要な分だけ開発すればよいので、効率的になります。

http://sinatrarb.com/intro-ja.html

Python(プログラミング言語)

Rubyと同じ動的型付け言語です。

海外では、同じLL言語であれば、RubyよりPythonの人気があります。

またPythonは数学や統計などのライブラリやフレームワークが揃っているので、データサイエンスや機械学習、AIなどで用いられることも多い言語です。

https://www.python.jp/

Django(フレームワーク)

PythonでつくられているWebアプリケーションフレームワークの一つです。

Railsと同様にフルスタックフレームワークで、長い歴史があります。

https://docs.djangoproject.com/ja/3.1/

Flask(フレームワーク)

PythonでつくられているWebアプリケーションフレームワークの一つです。

Sinatraと同様に薄く作られたフレームワークで、フルスタックほど事前に準備が不要なときに利用しやすいです。

https://flask.palletsprojects.com/en/1.1.x/

PHP(プログラミング言語)

HTMLにかんたんにプログラミングの機能を埋め込むことを目的とした、プログラミング言語です。

手軽に始められる反面、HTMLにプログラミングをかんたんに埋め込めるという特性上、きちんと理解した上で、利用しないと重大なセキュリティ問題を引き起こすことがあります。

当然、使い方によっては、すべてのプログラミング言語にあてはまることですが、初学者が手軽なためPHPを利用しはじめ、事故を起こしがちなので、十分に注意する必要があります。

https://www.php.net/manual/ja/intro-whatis.php

Laravel(フレームワーク)

RailsやDjangoと同様、フルスタックWebアプリケーションフレームワークです。

比較的新しいフレームワークですが、非常によくできているようで、スタートアップで以前より利用されているRailsから、Laravelで始めるチームが増えてきています。

http://laravel.jp/

Node.js(実行環境)

JavaScriptでバックエンドのコードを書くことができるJavaScript実行環境の一つです。

JavaScriptは元々クライアントサイドとも言って、フロントエンド領域で利用することを想定して作られた言語です。

そのJavaScriptをバックエンド環境でも利用するために作られたのがNode.jsです。

そのため、フロントエンドでしか利用できなかったJavaScriptで、RubyやPython、PHPと同じようにバックエンドのコードをかけるようになりました。

https://nodejs.org/ja/

NestJS(フレームワーク)

RailsやLaravelと同じように、フルスタックWebアプリケーションフレームワークです。

これは基本的にJavaScriptではなくTypeScriptで開発するフレームワークです。

https://nestjs.com/

Express(フレームワーク)

SinatraやFlaskのようなWebアプリケーションフレームワークです。

https://expressjs.com/

バックエンドの言語は、一つ深く学ぶことによって、つぎの言語を学ぶときのハードルが圧倒的に下がります。

なので、Ruby、Python、PHP、Node.jsのどれでも良いので、Webアプリケーションを作ってみて、しばらくメインで利用してみることをおすすめします。

最初のプログラミング言語の次にやること

ただ、どれでも良いと言われると困ってしまいますよね。

イヌのおすすめとしては、以下の通りです。

  1. フロントエンド技術(HTML / CSS / JavaScript)を学ぶ
  2. HTMLとCSSで、かんたんなWebページをつくる
  3. HTMLとCSSとJavaScriptで動きのあるWebページをつくる
  4. バックエンド技術(Ruby)を学ぶ
  5. RubyでTododアプリケーションのコマンドラインツールをつくる
  6. SinatraでTodoアプリケーションをつくる
  7. RailsでTodoアプリケーションをつくる

イヌがRubyを主に書いていたので、勧めやすいのはRuby関連になります。

例えば周りに質問できる人がいて、その人の主たる言語がPythonやPHP、Node.jsであれば、その人が利用している言語がおすすめです。

質問を受ける人の得意言語のほうが、学習効率が圧倒的に高いからです。

プログラミングは運動と一緒です。

本を読んでるだけでは、水泳は泳げるようにならないです。

プログラミングも同様です。

最低限の知識を学んだら、実際にWebサイトやアプリケーションをつくりましょう!

どんなに簡単なものでもいいんです。

自転車にはじめて挑戦したときも、1mずつ転びながら、徐々に距離を伸ばしていったはずです。

プログラミングも同じです。

少しずつでいいので、自分の手で作っていきましょう!

イヌ
イヌ

プログラミングは運動です!

体が反応するまで練習するべし!

ウサギ
ウサギ

おっけー!じゃあウサギは水泳はじめよう!

まったね〜

コメントを残す

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