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

2021年3月4日2023年1月21日プログラム基礎JavaScript,ロードマップ

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

プログラミング歴

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

Contents

1. プログラミングの基本知識を理解するコツ
- 1.1. プログラミングの学習ポイント
2. プログラミングの基本知識を理解するポイント
3. まとめ【プログラミング基礎を理解するコツを解説】

プログラミングの基本知識を理解するコツ

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

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

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

自分もプログラミングを始めた頃は、わからないことだらけで頭がパンクしていました(汗)

関連記事：プログラミング独学を無理ゲーと挫折しない方法

プログラミングの学習ポイント

プログラミングを理解するための学習ポイントを６つ紹介します。

１．暗記しない

プログラミングは暗記しても上達しません。たとえば料理やスポーツも本を読んで上達しないのと同じようにプログラミングも本を読んで理解するだけでは上達しません。

２．基礎から学ぶ

基礎知識の変数や条件分岐、繰り返しなどから学びます。挫折しないように基礎は完璧に理解しないでザックリと一通り学ぶのが重要です。

３．理解を深める

学んだ基礎知識を実際にプログラミングをすることで理解を深めることができます。たとえばサンプルプログラムを少し変更してカスタマイズするなどがおススメです。

４．コードを読む

他人のコードを読むことで、プログラミングのスタイルや効率的なコードの書き方などを学ぶことができます。

５．コミュニティに参加する

オンラインのフォーラムや勉強会などに参加して、他のプログラマーとの交流を持ちアドバイスをもらうことができます。

６．楽しもう

プログラミングは楽しむことが大切です！学習を続けるためにはそれを楽しむことが大切です。

プログラミングの基本知識を理解するポイント

プログラミングの基本知識である変数や条件分岐などを理解するポイントを紹介します。

変数→箱をイメージして理解

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

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

サンプル：変数（箱）に数字を入れる

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

var hako = 0;
    hako = 1 + 1;

サンプルの解説

1行目
- hakoという変数名で変数を作成しています。また初期値として数字「0」を入れています。
2行目
- 変数のhakoに「1 + 1」の結果「2」を入れています。

変数の解説記事

いまいち理解できない
変数名の付け方がわからない
変数名にルールってあるの？
変数名でよく使われている"i"とか"tmp"って何？

変数を理解するコツを分かりやすく解説【JavaScript基礎講座】

【プログラミング入門講座】変数は「箱をイメージ」すると理解しやすくなります。また変数名の付け方や ...

https://uteee.com/system/program-basic/2869/

条件分岐→条件分岐は図を使って理解

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

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

サンプル：もし～ならば

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

var country = 'japan';
var language = '';
if (country == 'japan') {
    language = 'japanese';
}

サンプルの解説

1行目
- countryという変数にjapanを代入
2行目
- languageという変数を宣言して初期値の空文字を代入
3行目
- if文で「もしcountryがjapanならば」という条件式を定義
4行目
- ３行目で定義したif文の条件に該当する時だけlanguageへjapaneseを代入する

if文の解説記事

演算子ってなんだか難しそう
条件分岐がよくわからない
else ifとかelseやandやorとか混乱する
if分の！(ビックリマーク)ってどういう意味？

if文を使った条件分岐を理解するコツを分かりやすく解説【JavaScript基礎講座】

【プログラミング入門講座】if文を使った条件分岐は「図で解釈」すると理解しやすくなります。またelse ...

https://uteee.com/system/program-basic/2898/

ループ→繰り返し処理は表をイメージして理解

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

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

for文のループ処理

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

for文の構文

for (初期化式; 条件式; 変化式) {
}

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

for文を使ったサンプル

for (var count = 0; count < 10; count++) {
}

for文の解説記事

ループ処理の書き方がわかない
2重ループがややこしくて難しい

ループの繰り返し処理を理解するコツをわかりやすく解説【JavaScript基礎講座】

【プログラミング入門講座】ループ処理は「図や表で解釈」すると理解しやすくなります。またfor文を使 ...

https://uteee.com/system/program-basic/2901/

配列→タンスをイメージして理解

配列とは、変数などの複数データを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を代入

配列の解説記事

なんか複雑でよくわからない
データ構造が理解できない

配列を理解するコツを分かりやすく解説【JavaScript基礎講座】

【プログラミング入門講座】配列は「タンスをイメージ」すると理解しやすくなります。また2次元配列や ...

https://uteee.com/system/program-basic/3414/

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基礎講座】

【プログラミング入門講座】Ajaxは「フロー図で解釈」すると流れを理解しやすくなります。またAjaxの仕 ...

https://uteee.com/system/program-basic/3314/

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

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

自分もはじめは基礎が理解できず苦しみましたが、続けていれば基礎が繋がり自然とプログラムをスラスラと書けるようになります。

滅気ずにがんばってください！

プログラミング独学を無理ゲーと挫折しそうな人向けに解決する方法について紹介しています。

関連記事：独学でプログラミングの学習に挫折しない方法

挫折しないポイントは仲間を作ってモチベーションを保つことです！

プログラム基礎から次のステップへ進みたい人は、プログラミングの基礎知識だけで解ける練習問題を用意しているので、ぜひ解いてみてください。

問題集：プログラミング基礎を使ったサンプルコードまとめ【JavaScript基礎講座】

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

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

2021年3月4日2023年1月21日プログラム基礎JavaScript,ロードマップ

Posted by ユート

無料でAmazonギフト券がその場で当たるアプリ「ナンプレ＆スピードくじ」

未経験からはじめる最短プログラミング＜JavaScript＞

コメント一覧

まだ、コメントがありません

コメントをどうぞコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。