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

2021年4月7日プログラム基礎JavaScript

プログラミング基礎を使ったサンプルコードまとめ【JavaScript入門】
プログラミング基礎を使ったサンプルコードまとめ【JavaScript入門】

プログラミング基礎を使って実装したJavaScriptをメインにしたサンプルコードをまとめて紹介します。

UT

この記事ではプログラミングの基礎知識だけを使った問題やサンプルコードをたくさん用意しています。(ちょこちょこ更新していきます)

プログラミング歴

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

プログラミング基礎を使った問題

プログラミング基礎は本を読んで理解しようとしても頭に入ってこないです。プログラミングを勉強する上で一番重要なのはプログラムコードを書くことです。

プログラミング基礎は本だけで理解するのは難しいし、頭に入ってこないです

プログラミングの基礎知識で解ける問題をたくさん用意しています。ぜひ実際にプログラミングコードを書いて問題を解いてみてください。

変数を使った問題

プログラミングの基礎である変数を使った問題です。変数は「数値」や「文字列」を自由に出し入れしてプログラム内で使用することができる 箱のようなもの です。

UT

変数を理解するには、プログラミングで実際に使ってみることが重要です。

関連記事：変数を理解するコツを分かりやすく解説【プログラミング初心者の入門講座】

問）変数へ数字の 1 を代入する

JavaScriptで変数を宣言するには var で行います。そして変数に数字を代入は = ですることができます。

let hensu = 1;

問）変数へ数字の 1 を代入して console.log で出力する

let hensu = 1;
console.log(hensu);

問）変数へ代入した数字の 1 へ 数字の 1 を加算する

数字を加算するには + を使います。

let hensu = 1;
hensu = hensu + 1;

もしくは

let hensu = 1;
hensu += 1;

問）変数へ代入した数字の 1 へ数字の 1 を減算する

数字を減算するには – を使います。

let hensu = 1;
hensu = hensu - 1;

もしくは

let hensu = 1;
hensu -= 1;

問）変数へ代入した数字の 10 へ数字 2 を割り算する

数字を割り算するには / を使います。

let hensu = 10;
hensu = hensu / 2;

問）変数へ代入した数字の 10 へ数字 2 を掛け算する

数字を掛け算するには * を使います。

let hensu = 10;
hensu = hensu * 2;

問）変数へ文字列の あいうえお を代入する

文字列はダブルクォーテーションで括ります。そして変数へ文字列を代入するには = で行います。

let hensu = "あいうえお";

問）変数へ代入した文字列 あいうえお に文字列の かきくけこ を連結する

文字列の連結は + を使います。

let hensu = "あいうえお";
hensu = hensu + "かきくけこ";

もしくは

let hensu = "あいうえお";
hensu += "かきくけこ";

配列/オブジェクトを使った問題

プログラミングの基礎である配列を使った問題です。配列は変数を複数入れておくことが出来るプログラム内で使用することができる タンス のようなものです。

UT

配列を理解するには、プログラミングで実際に使ってみることが重要です。

関連記事：配列を理解するコツを分かりやすく解説【プログラミング初心者の入門講座】

問）配列を宣言

配列は [] で宣言することができます。

let hairetu = [];

問）数字の1を代入した変数を2つの要素を持った配列へ代入

配列の要素を指定するには [0] のように行います。

let hensu = 1;
let hairetu = [];
    hairetu[0] = hensu;
    hairetu[1] = hensu;

もしくは

let hensu = 1;
let hairetu = new Array();
    hairetu[0] = hensu;
    hairetu[1] = hensu;

問）配列の要素1へ数字の1を代入してconsole.logで出力する

let hensu = 1;
let hairetu = [];
    hairetu[0] = hensu;
    hairetu[1] = hensu;
console.log(hairetu[1]);

もしくは

let hensu = 1;
let hairetu = new Array();
    hairetu[0] = hensu;
    hairetu[1] = hensu;
console.log(hairetu[1]);

問）上記問題で作成した配列hairetuの要素数をconsole.logで出力する

let hensu = 1;
let hairetu = [];
    hairetu[0] = hensu;
    hairetu[1] = hensu;
let row = hairetu.length;
console.log(row);

問）オブジェクトを宣言

オブジェクトは {} で宣言することができます。

let obujyekuto = {};

問）数字の1を代入した変数を2つのプロパティを持ったオブジェクトへ代入

オブジェクトのプロパティは オブジェクト.プロパティ名 のようにして .(ドット) でつなげて使用します。

let obujyekuto = {};
    obujyekuto.puropati_one = 1;
    obujyekuto.puropati_two = 1;

問）上記問題で作成したオブジェクトobujyekutoの要素数をconsole.logで出力する

let obujyekuto = {};
    obujyekuto.puropati_one = 1;
    obujyekuto.puropati_two = 1;
let row = Object.keys(obujyekuto).length;
console.log(row);

if文で条件分岐を使った問題

プログラミングの基礎であるif文を使った問題です。if文はプログラミングで条件分岐を行うことができます。

UT

if文を理解するには、フロー図などで図解にするとわかりやすくなります。

関連記事：if文を使った条件分岐を理解するコツを分かりやすく解説【プログラミング初心者の入門講座】

問）数字の100を代入した変数を宣言して、if文で変数に100が代入されているか判定

if文の条件は if (条件式) で定義します。ある値と変数に代入された値を判定する際は == を使用します。

let hensu = 100;
if (hensu == 100) {
    console.log("変数に100が代入された");
}

for文でループ処理を使った問題

プログラミングの基礎であるfor文を使った問題です。for文はプログラミングで何度も同じ処理を行うループ処理を行うことができます。

関連記事：ループの繰り返し処理を理解するコツをわかりやすく解説【プログラミング初心者の入門講座】

問）for文で変数をインクリメントして100回ループ

ループは for (最初だけ行う処理; ループを続ける条件式; 1回ループ終る毎に行う処理) で定義します。あとインクリメントは変数の値を1増やすことをいいます。

for (let hensu = 1; hensu <= 100; hensu++) {
    console.log(hensu + 'になりました。')
}

問）for文で変数をデクリメントして100回ループ

デクリメントはインクリメントの逆で変数の値を1減らすことをいいます。

for (let hensu = 100; hensu >= 1; hensu--) {
    console.log(hensu + 'になりました。')
}

for文とif文を使った問題

プログラミングの基礎であるfor文とif文を使った問題です。プログラムではfor文でループ処理を行いつつif文で条件分岐を行うことが多くあります。

問）100回ループするfor文を定義して50回目のループでforを終了させる

for文の終了するには break で行います。

for (let hensu = 1; hensu <= 100; hensu++) {
    if (hensu == 50) {
        console.log(hensu + 'になったのでfor文を終了します。');
        break;
    }
}

配列を使ったループ処理の問題

配列の要素分だけforでループする

let hairetu = [];
    hairetu[0] = 'A';
    hairetu[1] = 'B';
let row = hairetu.length;
for (let i = 0; i < row; i++) {
    console.log(hairetu[i]);
}

オブジェクトを使ったループ処理の問題

オブジェクトをforEachでループする

let obujyekuto = {};
    obujyekuto.puropati_one = 'A';
    obujyekuto.puropati_two = 'B';
Object.keys(obujyekuto).forEach(function (key) {
   console.log(obujyekuto[key]); 
});

日付関数を使った問題

日付関数を使った問題です。プログラムでは日付関数を使うことが多くあります。

問）本日の日付の年月日をconsole.logで表示(日付の形式は「xxxx/x/x」)

JavaScriptで日付を扱うには new Date() でオブジェクトを使って行います。

let today = new Date();
console.log(today.getFullYear() + "/" +  (today.getMonth() + 1) + "/"+ today.getDate());

プログラミング基礎を使ったサンプルコードまとめ

プログラミングの基礎知識を使ったJavaScriptのサンプルコードを紹介します。

基礎は勉強できたから次のステップへ行きたい

プログラミングは基礎学習だけを淡々と進めていても実際にシステムを実装する経験やノウハウは基礎知識だけでは全く身につかないので、勉強は実際にプログラムして進めることをオススメします。

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

カレンダーを出力

基礎知識のfor文とif文を使った練習問題としてよく出題されるカレンダーの出力です。

for文でを使ったループ制御の習得におすすめです。

カレンダーの出力では、

  • ループの制御
  • ループ内で処理の実行

を習得することができます。

ぜひチャレンジしてみてください。

PHP版：PHPでカレンダー出力プログラムを解説

九九表を出力

基礎知識のfor文を使った２重ループの練習問題としてよく出題される九九表の出力です。

２重ループの習得におすすめです。

九九表の出力は、

  • 2重ループの制御
  • ループ内で処理の実行

を習得することができます。

ぜひチャレンジしてみてください。

Webページ制作の基本サンプル

Webページ制作の基本となるサンプルを紹介します。

会員登録フォーム

Webシステムにおいて会員登録フォームの作成は必ずあるといってもいいWebページです。

ユート

このサンプルはHTMLの知識がベースで formタグ や inputタグ などを使っています。

Webページにアニメーションさせるサンプルコードまとめ

次にJavaScript特有のWebページに動きを持たせたアニメーションを使ったサンプルコードを紹介します。

JavaScriptではWebページに動きをつけるためのプログラミングも基礎としてしっかり習得しておく必要があります。

開閉メニュー

開閉メニューをJQueryのtoggleを使って実装したサンプルコードです。

このJQueryのtoggleを使うとたったの1行で実装できます！

(開閉メニューは、アコーディオンメニューと呼ばれたりします。)

画像を横移動する画像スライダー

画像スライダーをJQueryで実装したサンプルコードです。

(画像スライダーは、カルーセルと呼ばれたりします。)

ちなみに画像スライダーは、slick.jsというライブラリを使うと３行程度で実装することもできます。
参考：JavaScriptの画像スライダーで横移動させるプログラム解説【slick.js】

モーダルウィンドウ

モーダルウィンドウを表示するサンプルコードです。

モーダルウィンドウとは

ポップアップのような子ウィンドウで「はい」や「いいえ」などを選択しないと消えない子ウィンドウを表します。

このサンプルコードは、CSSも大事になってくるので少し難易度高めとなっています。

要素をドラッグ＆ドロップのマウス操作で並び替え

JQuery UIのSortableを使ってHTMLの要素をマウス操作のドラッグ＆ドロップで並び替えるサンプルコードです。

Ajaxを使ったサンプルコードまとめ

JavaScriptでよく使われる技術のAjaxを使ったサンプルコードを紹介します。

AjaxはJavaScriptで頻繁に使われます。ぜひ習得しておきましょう。

読んで欲しい記事
関連記事：Ajaxの仕組みについてわかりやすく解説

Ajaxで郵便番号から住所を取得

会員登録フォームでよく使われるAjaxを使った郵便番号から住所を取得するサンプルコードです。

このサンプルでは、郵便番号から住所を取得するAPIをPHPで実装しています。

難しいですが、ぜひチャレンジしてみてください。

AJax解説記事：Ajaxの仕組みについてわかりやすく解説

ゲームのサンプルコードまとめ

Webページで動作する簡単なゲームをJavaScriptで作ったサンプルコードを紹介します。

ここで紹介するゲームのサンプルコードは、プログラミング基礎とアニメーションを使って実装することができます。

スロットゲーム

JQueryを使ってスロットゲームを実装したサンプルコードです。

ルーレットゲーム

JQueryを使ってルーレットゲームを実装したサンプルコードです

おまけのサンプルコードまとめ

JavaScriptのおまけサンプルコードを紹介します。

映画マトリックス風のテキストレイン

映画マトリックスに出てきた文字列が流れるテキストレインをJavaScriptで実装したサンプルコードです。

まとめ：プログラミング基礎を使ったサンプルコード

今回はプログラミング基礎を使ったサンプルコードをまとめて紹介しました。

ここで紹介したサンプルコードの知識はすべて基礎知識だけで実装することが出来る内容です。もしわからないことがあれば振り返り学習をして１つずつ理解してスキルアップを目指しましょう！

基礎ばかり学習するのが嫌な人は、ステップアップした内容へ踏み込んでみるのもアリかもです。

基礎学習を終えた人へ

基礎学習を一通り終えた人は一度小さなシステムを１つ作ってみることをおすすめします。

理由は

  • 達成感を得ることができる
  • 実務で必要なノウハウやスキルが身につく
    • システムエラーの対処スキル
  • 次のステップアップにつながる
    • 次のシステムで改善すべき点がわかる
    • 汎用的なシステムを実装する重要性

など次のステップへ繋がるたくさんの経験を得ることができます！

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

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2021年4月7日プログラム基礎JavaScript

Posted by ユート