プログラミング基礎を理解するコツを解説【JavaScript入門】

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

JavaScript入門-プログラミング基礎を理解するコツを解説
JavaScript入門-プログラミング基礎を理解するコツを解説

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

プログラミング未経験から始めるJavaScriptの入門講座まとめです。

プログラミング歴

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

プログラミングの基本知識

いざプログラミングの基礎勉強を始めたけど

  • なかなか基礎勉強が進まない
  • 勉強しても基礎を理解できない
  • 基礎知識をどうやってプログラムに使うのかイメージできない

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

この記事ではJavaScriptのサンプルコードを使ってプログラミング基礎を解説します。

プログラミングの基礎知識を理解するコツやポイントも解説しています。

実際のサンプルコードを使って解説するので基礎知識を応用した勉強へステップアップすることが出来ます。

では、プログラミングの基礎知識について解説します。

変数とは【箱をイメージして理解】

変数とはプログラムで扱われるデータの読み書きする記憶領域です。

変数は数字や文字を入れたり出したりすることが出来る箱とイメージすると理解しやすくなります。

サンプル:変数(箱)に数字を入れる

hakoという変数名の変数(箱)に数字「0」を入れて作成し、「1 + 1」の結果「2」を入れるプログラミングです。

var hako = 0;
    hako = 1 + 1;

サンプルの解説

  • 1行目
    • hakoという変数名で変数を作成しています。また初期値として数字「0」を入れています。
  • 2行目
    • 変数のhakoに「1 + 1」の結果「2」を入れています。
変数の解説記事
  • いまいち理解できない
  • 変数名の付け方がわからない
  • 変数名にルールってあるの?
  • 変数名でよく使われている"i"とか"tmp"って何?

など悩んでいる人は、変数について詳しく解説した記事もご覧ください。

条件分岐とは【if文の条件分岐は図を使って理解】

if文は『もし~ならば』とプログラミングで処理を分岐することができる演算子です。

if文を理解しやすいコツは「文章や図で解釈する」とシンプルに考えることができます!

サンプル:もし~ならば

if文で「もし~ならば」という条件でif文を使った基本サンプルです。「もし国が日本ならば」という条件式です。

var country = 'japan';
var language = '';
if (country == 'japan') {
    language = 'japanese';
}
条件分岐とは:if文の条件分岐は図を使って理解
条件分岐とは:if文の条件分岐は図を使って理解

サンプルの解説

  • 1行目
    • countryという変数にjapanを代入
  • 2行目
    • languageという変数を宣言して初期値の空文字を代入
  • 3行目
    • if文で「もしcountryがjapanならば」という条件式を定義
  • 4行目
    • 3行目で定義したif文の条件に該当する時だけlanguageへjapaneseを代入する
if文の解説記事
  • 演算子ってなんだか難しそう
  • 条件分岐がよくわからない
  • else ifとかelseやandやorとか混乱する
  • if分の!(ビックリマーク)ってどういう意味?

など悩んでいる人は、if文について詳しく解説した記事もご覧ください。

ループとは【for文の繰り返し処理は表をイメージして理解】

ループ処理とは、同じ処理を繰り返し行うプログラムのことをいいます。

ループ処理で難しくなる2重ループを理解するコツは「作りたいデータをしっかりイメージすること」「表をイメージすること」です。

for文のループ処理

for文は「指定した回数だけ繰り返し処理」を行います。

for文の構文

for (初期化式; 条件式; 変化式) {
}
  • 初期化式
    • ループ処理をはじめるときに実行する処理
    • 初期化式は最初の1回だけ実行
  • 条件式
    • ループ処理を続ける条件
    • ループ処理が1週回るたびに判定
  • 変化式
    • ループ処理が実行された時に実行する処理
    • ループ処理が1週回るたびに実行

for文を使ったサンプル

for (var count = 0; count < 10; count++) {
}
for文の解説記事

配列とは【タンスをイメージして理解】

配列とは、変数などの複数データを1つにまとめたデータ構造またはデータ型です。

配列は「“値が入った変数(箱)"をたくさん収納するタンス」をイメージすると理解しやすくなります。

サンプル:配列へ変数を格納

プログラムで配列へ変数を格納する基本的なサンプルコードを解説します。

var hensu = 1;
var hairetu = [];
    hairetu[0] = hensu;
    hairetu[1] = hensu;
配列とは:タンスをイメージして理解
配列とは:タンスをイメージして理解

サンプルの解説

  • 1行目
    • hensuという変数を宣言して、数字の「1」を代入
  • 2行目
    • hairetuという配列を宣言
  • 3行目
    • hairetuの要素0番目にhensuを代入
  • 4行目
    • hairetuの要素1番目にhensuを代入
配列の解説記事

Ajaxとは

Ajax(エージャックス)とは、Asynchronous JavaScript + XMLの略で、JavaScriptで非同期にXMLを使ってサーバと通信となります。

サンプル:Ajaxで非同期通信

JavaScriptのAjaxで非同期通信するサンプルコードを解説します。
※今回はJavaScriptを使いやすくするライブラリ「JQuery」を使用しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$.ajax({
    type: 'POST',
    url: 'https://hogehoge.com/hoge.php',
    dataType: 'json',
    async: true, // 非同期通信でAjaxを実行
    data: {
     'hoge': 'ほげ'
    }
})
.done(function (data, textStatus, jqXHR) {
    console.log('レスポンス', data);
})
.fail(function (jqXHR, textStatus, errorThrown) {
    console.log('リクエストに失敗');
});
</script>

サンプルの解説

文章で処理を紹介すると「Ajaxで非同期通信を"https://hogehoge.com/hoge.php"へPOSTメソッドで行う」サンプルコードとなります。

1行目
JavaScriptでプログラミングしやすくするライブラリである「JQuery」を読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

3~11行目
Ajaxで通信する設定を定義します。

$.ajax({
    type: 'POST',
    url: 'https://hogehoge.com/hoge.php',
    dataType: 'json',
    async: true, // 非同期通信でAjaxを実行
    data: {
     'hoge': 'ほげ'
    }
})
  • type
    • サーバと通信するリクエストメソッド
  • url
    • 通信するリクエスト先のURL
  • dataType
    • 通信するデータフォーマット
  • async
    • 非同期で通信を行うか
  • data
    • サーバへ送信するリクエストデータ

12~14行目
Ajaxでサーバと通信した後に実行されます。サーバと通信したレスポンス結果を受け取ったあとの処理をプログラミングします。

.done(function (data, textStatus, jqXHR) {
    console.log('レスポンス', data);
})

15~17行目
Ajaxでサーバと通信しようとしたが失敗した場合に実行されます。サーバと通信に失敗した例外処理をプログラミングします。

.fail(function (jqXHR, textStatus, errorThrown) {
    console.log('リクエストに失敗');
});
Ajaxの解説記事
  • Ajaxだと何が出来るの?
  • 仕組みがよくわからない
  • 非同期通信と同期通信の違いがわからない

など悩んでいる人は、Ajaxについて詳しく解説した記事をご覧ください。

まとめ【プログラミング基礎を理解するコツを解説】

プログラミング未経験から始めるJavaScript入門講座としてプログラミングの基礎知識を解説しました。

おすすめな簡単なプログラムサンプル

今回紹介した基礎知識を一通り理解出来たら、簡単なプログラムに挑戦してみてください!

簡単なサンプルに挑戦すると、自然と基礎知識が身に付くのでおススメです!

最後まで読んでもらいありがとうございます。

UT
UTの日常
UTの日常

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

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

Posted by UT