プログラミング未経験でも今すぐ始める方法【JavaScript】

2021年1月27日システムJavaScript,プログラム入門

プログラミング未経験でも今すぐ始める方法【JavaScript】
プログラミング未経験でも今すぐ始める方法【JavaScript】

どうも、UT(@ut_1029)です。

プログラミング未経験から始めるプログラミングの独学方法を紹介したプログラミング入門講座の記事まとめです。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細:プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

プログラミングを始める方法

プログラミングの勉強を始めようと思っている人は

  • 何から始めればいいかわからない
  • なんだか難しそう

と悩んでいると思います。

この記事ではプログラミングの始め方にポイントを絞って「最短でプログラミングを始める」ように解説します。

例えばパソコンを触り始めた人に「パソコンはCPUやメモリーがあって、内部で計算して・・・」などの知識は不要ですよね?

プログラミングにおいても、小難しい知識はいったん無視して「プログラミングの基礎だけを勉強して最短ルートで始める」ことができます。

これからプログラミングを始めようとしている人に向けた内容を具体的に紹介します。

  • たくさんあるプログラミング言語の中から何を選べばいいのかわからない
  • 勉強を始めやすいプログラミング言語

プログラミング初心者にオススメなプログラミング言語とは

プログラミング初心者にオススメなプログラミング言語について解説します。

プログラミングを始めるのに一番オススメなプログラミング言語って何?

その答えは「JavaScript(ジャバスクリプト)」です。

初心者に「JavaScript」がオススメな理由

プログラミング初心者にJavaScriptがオススメな理由について解説します。

JavaScriptがオススメな理由

それは「すぐにプログラミングの勉強を始められる」からです。

プログラミングの勉強をすぐに始められるって。。。どうゆうこと?

通常プログラミングの勉強を始めるためには、プログラミング言語が動作するためのパソコン設定「環境構築」をする必要があります。

この環境構築は、めっちゃハードルが高い作業なのです。

いまだに自分も環境構築で丸1日作業することもあります💦

ですが、JavaScriptは環境構築が不要です。

JavaScriptが環境構築しなくていい理由

それはブラウザで動作するため、パソコンにブラウザがインストールされていればOKなのです!

つまりJavaScriptはプログラミングの勉強をすぐに始める事ができる言語なのです。

JavaScriptが初心者におススメな理由
  • 環境構築が不要
  • すぐにプログラミングの勉強が始められる

詳細記事:プログラミング初心者にオススメするプログラミング言語

JavaScriptの特徴や出来ること

JavaScriptの特徴や出来ることについて解説します。

JavaScriptって何ができるの?

みなさんがよく利用しているWebサービスでJavaScriptはめちゃくちゃ使われています。

JavaScriptが利用されているWebサービス

JavaScriptがWebサービスで使われている実例から解説します。

例1)Twitterでページ下にいくと続きが挿入される

Twitterのページで一番下へ行くと続きの情報がページに挿入される動きがあります。これはJavaScriptが使われています。

例2)横並びの画像スライダー

画像が横並びになっていて、画像が1枚1枚スライドするページもよく見ます。これもJavaScriptでプログラミングされています。

他にもいいねをクリックした際やツイート投稿など各所で使われています。

JavaScriptの特徴
  • ページの情報を一部分だけ更新することが出来る。
  • ボタン押下で何か動きをすることが出来る。

JavaScriptでプログラミングを始める方法

JavaScriptでプログラミングの勉強を始める方法について解説します。

どうやってJavaScriptでプログラミングすればいいの?

実はめちゃめちゃ簡単です。

JavaScriptでプログラムを実行する方法

JavaScriptのプログラムを実行する一番簡単な方法を解説します。

ここでは「Chromeブラウザを使った方法」について解説します。

手順1:ブラウザを表示

まずChromeブラウザを起動します。

JavaScriptでプログラムを実行する方法(手順1:ブラウザを表示)
JavaScriptでプログラムを実行する方法(手順1:ブラウザを表示)

手順2:ブラウザで開発ツールを表示

そしてChromeの開発ツール(デベロッパーツール)を表示します。

JavaScriptでプログラムを実行する方法(手順2:ブラウザで開発ツールを表示)
デベロッパーツールの表示方法
  • メニューから表示
    • Mac
      • [表示] – [開発/管理] – [デベロッパーツール]
    • Windows
      • 右上アイコン横の三点リーダー – [その他のツール] – [デベロッパーツール]
  • ショートカットキーで表示
    • Mac
      • [optionキー] + [commandキー] + [iキー]
    • Windows
      • [ctrlキー] + [shiftキー] + [iキー]

デベロッパーツールを開くと以下のような画面が表示されます。

JavaScriptでプログラムを実行する方法(手順2:ブラウザで開発ツールを表示)
JavaScriptでプログラムを実行する方法(手順2:ブラウザで開発ツールを表示)

手順3:JavaScriptのプログラムを書く

そして以下のプログラムコードをデベロッパーツールへコピー&ペーストします。

alert('はじめてJavaScriptのプログラムを実行!');
JavaScriptでプログラムを実行する方法(手順3:JavaScriptのプログラムを書く)
JavaScriptでプログラムを実行する方法(手順3:JavaScriptのプログラムを書く)

手順4:プログラムを実行

そしてデベロッパーツールで[Enterキー]を押下して、プログラムを実行します。

すると、以下のように「はじめてJavaScriptプログラムを実行!」っとダイアログメッセージが表示されます。

JavaScriptでプログラムを実行する方法(手順4:プログラムを実行)
JavaScriptでプログラムを実行する方法(手順4:プログラムを実行)

どうでしょう?思った以上に簡単だったと思います。

JavaScriptでプログラミングを簡単に始める方法
  • ChromeブラウザのデベロッパーツールでJavaScriptを実行する

本格的にプログラミングを始める人は、以下の詳細記事からJavaScriptでプログラミングする方法を参照してください。

詳細記事:JavaScriptでプログラミングを始める方法

まとめ:プログラミング未経験から始めるための入門講座

今回はプログラミング未経験から始める方法を解説しました。

  • プログラミング初心者にはJavaScriptがおすすめ
  • JavaScriptは、環境構築が不要である
  • JavaScriptは、ブラウザで動作する
  • ChromeだとJavaScriptはデベロッパーツールで簡単に実行できる
  • JavaScriptは、色んなWebサイトで使われている
  • JavaScriptを使うと「Webページに動きを持たせる」や「ページの一部情報を更新」することができる

今回の内容の詳しい解説については、以下の記事をご覧ください。

最後にプログラミングを習得する方法を紹介します。

それは「プログラミングは実際にプログラムを書いて習得する」ことです。そして1つ以上動作する簡単なシステムを自分でプログラミングしてみてください。

すると、実績が出来て自分の自信やモチベーションにつながります。また転職などでポートフォリオとして提示することができます。

あきらめずに簡単なシステムを1つ以上プログラミングしてみてください!

プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2021年1月27日システムJavaScript,プログラム入門

Posted by UT