「とりあえずプログラミングを始めたいけれど、何の言語を勉強すれば良いか分からない」に答える -JavaScriptから勉強し始めた方が良いと思う理由-

こんにちは、エンジニアのうるです。
今回はタイトルにあるように「**とりあえずプログラミングを初めてみたいけれど、どの言語から始めれば良いのか分からない...**」「**プログラミングをやってみたいが開発環境の構築が難しくて、前に進まない...**」という方に向けて自分なりの見解を示そうと思います。

**※作りたいものがない or 勉強したい言語や技術は無いけど、プログラミングをやってみたいという方向けです。**

プログラミング界隈では「作りたいものがあるわけではない...」「とりあえず、少しやってみたい！」に対する**プログラミングの敷居が個人的には少し高い気がします**。

自身も独学で勉強していた頃は、「何の言語をした方がいいのか...」と思ってた時期がありました。

しかし、この疑問に対する既存の主な回答は「**作りたいものから逆算すれば良い**」というものかと思います。これが少しばかり雑な感じがする（プログラミングに対する敷居を上げている気がします。。）ので、そういう方にこちらを読んでいただければと思います。

# 自分の回答はJavaScript
「とりあえずプログラミングを始めたいけれど、何の言語を勉強すれば良いか分からない」けどプログラミングをやってみたい方にオススメする言語は **JavaScript** の一択かと思います！自分は周囲にも「絶対にJavaScriptから始めた方が良いよ」と伝えています。

ちなみに**Java**というプログラミング言語とJavaScriptは異なった言語なので、気をつけてください。
[→参考記事はこちら](https://www.sejuku.net/blog/31751)

# 理由1：開発環境を整える手間がほとんど不要

JavaScriptを推している理由はこれが最も大きいです。

初心者だろうがプロだろうが、何かを実装しようとすると必ず**開発環境を整える必要**があります。
**しかし、ここで挫折する方が多いのではないでしょうか？**

よく分からない用語がたくさん出てきて、macだとターミナル、Windowsだとコマンドプロンプトによく分からない呪文を打ち込む。すると、参考にしている記事には記載がない解読不可能なエラーが出てきてどうして良いのか分からないという状況に直面することが多々あるかと思います。（自分も過去にWordPressの開発環境構築に挫折しています。。）

**しかし、JavaScriptではその環境構築がほとんど不要です。**
(``Node.js``などを用いると環境構築が必要ですが、その話は後述します。)

ここで少しだけプログラミング言語の話をします。
プログラミング言語には**フロントエンド系言語**と**バックエンド系言語**が存在します。

主には以下のような区分になります。
>フロントエンド系言語 → JavaScriptなど
>バックエンド系言語 → Java, PHP, Python, Ruby, Goなど

JavaScriptがほぼ唯一のフロントエンドのプログラミング言語であり、それ以外の言語は主にバックエンド系言語です。(SwiftやKotlin、C系言語などは詳しくないので割愛します）

そして、以下のように動作する場所が違います。
>フロントエンド系言語 → ブラウザ（Google Chromeなど）側で動作する
>バックエンド系言語 → サーバー側で動作する

バックエンド系のプログラミング言語を書きたい場合は、**サーバー側で動作する故に少し環境構築が難しくなってしまいます**。

一方、フロントエンド系の言語はブラウザ側で動作します。**つまり、ブラウザさえあれば良いのです。**大体の人が自身のPCに``Google Chrome``や``Safari``、``Microsoft Edge``などを入れて頻繁に使っていると思います。これらがあれば、プログラミングを始めることができます。

[JavaScriptでプログラミングを手っ取り早く始める方法](#手っ取り早くjavascriptでプログラミングを始める具体的な方法javascriptの簡単な環境構築)を後述します。

# 理由2：幅広く応用が効く

JavaScriptはフロントエンド系言語として、Webサイトを作る際に多用される言語です。主に演出やモーションを付ける際に使用され、WebGLといった技術もJavaScriptで実装するものになります。

JavaScriptはフロントエンド系のプログラミング言語ですが、``Node.js``といった技術を用いると、バックエンド系言語として動かすことができるようになります。``Node.js``で``TypeScript``などを記述することによって、Webサービスなども作ることができます。

さらに、``React``が使えるようになれば、``React Native``という技術でスマートフォンのアプリも作れるらしい、、（自身は``React``は触ったことがありますが、``React Native``は触ったことがありません。。）

このQiitaにもJavaScriptに関する記事が多くありますが、それは様々な場面で用いられる言語であるからです。

# 理由3：他のプログラミング言語に通じるものが多くある

JavaScriptとバックエンド系の言語は、似通った部分が多くあります。for文やif文などの基本的なプログラミングの概念は、JavaScriptを含めた様々な言語に共通しています。**細かい記述の仕方に違いはあれど、論理を構成する概念は同じものを持っています。**

**つまり、JavaScriptでそういったプログラミングに共通する概念を習得してしまえば、他の言語を学ぶ際にも理解がスムーズに進む可能性が高いということです。**実際に、自身はJavaScriptからプログラミングを始めた（気がします）のですが、その後に触ることになったPHPやRubyの理解もスムーズに進んでいるのは、JavaScriptで学んだ条件分岐や繰り返し処理などの共通概念を知っていたからです。

**「あぁ、これってJavaScriptでいうところのあの処理か」となる場面が多々あります。**

# 手っ取り早くJavaScriptでプログラミングを始める具体的な方法(JavaScriptの簡単な環境構築）

:::note info
追記（2022/3/6)
開発環境を整えなくてもプログラミングを始められるWebサービスもあるので、そっちを利用してみても良いかもです。
例）
・[Replit](https://replit.com/)
・[paiza.io](https://paiza.io/ja)
:::

#### 1. ブラウザを用意する
個人的にはGoogle Chromeを推奨していますが、Macbookに元から入っているSafariやWindowsに元から入っているであろうMicrosoft Edgeでも問題ありません。（ただ、WindowsのInternet Explorerはやめましょう...）
[→Google Chromeのダウンロードはこちらから](https://www.google.co.jp/chrome/?brand=FDKM&gclid=Cj0KCQjww4OMBhCUARIsAILndv6f-E0v7C7ZdqYlkiAxq9F6XfTZpB1taDmZR4SkyQruXlGVAGeVIIYaAv_lEALw_wcB&gclsrc=aw.ds)

#### 2. エディタを用意する

エディタとは、ソースコードを編集するソフトのことです。代表的なものに``Visual Studio Code``や``Atom``などがあると思います。
個人的には``Visual Studio Code``をオススメしています。
[→Visual Studio Codeのダウンロードはこちらから](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

#### 3. 開発用のフォルダを用意する
デスクトップに作成するのが一番早いでしょう。適当な名前でフォルダを作成しましょう。
![スクリーンショット 2021-11-02 19.52.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599964/fe7b8c16-20db-0c3f-3640-2814200567e1.png)

#### 4. エディタでソースコードを記述する

以下のGif動画ののようにフォルダをドラッグ&ドロップで、エディタに持ってくると編集ができます。
![qiita3 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599964/21749a81-5c9a-f76a-594b-61cff1090049.gif)

ここで``index.html``ファイルと``main.js``ファイルを作成しましょう。
![スクリーンショット 2021-11-02 20.40.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599964/acccc504-d6af-d216-32ba-c5a7098d0805.png)

2つのファイルにはそれぞれ次のように記述してください。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
```

```javascript:main.js
function main() {
  alert("JavaScript");
}
main();
```

そして、2つのファイルをそれぞれ保存して、画像のように**index.htmlファイルをGoogle Chromeで開きましょう(Safariを用いる場合はSafariで、Edgeを用いる場合はEdgeで開きましょう）**。
![スクリーンショット 2021-11-02 20.46.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599964/dd73b9f3-cadc-7336-97ce-08e802b98eaf.png)

以下の画像のようにモーダルが出ていたら、JavaScriptが正常に動いています。
![スクリーンショット 2021-11-02 20.48.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599964/aac90eab-866e-e9ea-458d-9f49c88b56fe.png)

以後は**コードを追加するたびに、ファイルを保存して、ブラウザをリロードしてください**。
すると、変更分が反映されます。

ちなみに、ここから先の勉強としては、[ドットインストール](https://dotinstall.com/)がオススメです。
[JavaScriptの基本](https://dotinstall.com/lessons/basic_javascript_v5)を学んだり、[簡単なゲーム](https://dotinstall.com/lessons/omikuji_js_v5)を作ったりできます。

# 最後に
「作りたいものがある」「勉強したい言語や技術がある」という方はそちらを勉強すれば良いと思いますし、そうでない方はこの記事が気にいっていただければJavaScriptを勉強してみてください。