【コピペで簡単！】速習JavaScript講座

JavaScriptの解説サイトを調べていたところ、「そもそもJavaScriptとは？」の様な前置きが長く初心者に向いていないなと感じるケースが多かったため、本記事ではJavaScriptの環境構築と基本的な書き方を一通り解説します。

手順に従ってコピペするだけで簡単にJavaScriptがどういうものか動作を試せますよ。

こんな人におすすめです。

葵(あおい)

JavaScript未経験で動作を試したい人。
1時間〜2時間で一通りJavaScriptを書ける様になりたい人
エンジニア未経験転職を目指していてJavaScriptの初歩を学習したい人

Contents

1 環境構築を行う
2 JavaScriptの記法一覧
3 現代のプログラミング

スポンサードリンク

環境構築を行う

STEP1.1
VSCodeのダウンロード

まずはコードを書くためのエディタをダウンロードします。

こちらのサイトからVisualStudioCode(以下、VSCode)をダウンロードしてください。

アクセストップページに自分のPCのものが表示されていない場合は、ページを下までスクロールすると各OS版のものがあるので、そこからダウンロードしてください！
STEP1.2
VSCodeの展開

ダウンロードができたら、ファイルをダブルクリックしてアプリを展開してください。

アプリが展開できたらアイコンをダブルクリックして起動しましょう。
STEP1.3
フォルダを開く

エディタが開いたら左サイドバーのフォルダのマークをおし、「Open Folder」をおします。

この段階でまだフォルダを作っていないと思うので、フォルダを作成しましょう。

場所はどこでも大丈夫ですが、Macの場合はFinderから、Windowsの場合はCドライブあたりで好きな場所にフォルダを作成します。

筆者はtestという名前でフォルダを作成しました。
STEP1.4
ファイルの作成

左サイドバーを右クリックしてNew Fileを選びます。

index.htmlとmain.jsの２つのファイルを作成しましょう。

出来上がると以下の様になります。
STEP1.5
コードの記述と保存

それぞれのファイルに以下の様に記述します。

index.html

<html> <head></head> <body> <script src="main.js"></script> </body> </html>

1
2
3
4
5
6

<html>
    <head></head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

main.js

console.log('hello world')

1

console.log('hello world')

※コードを書き込んだら保存をしましょう。Macの場合はCommand＋Sでもできます。

保存はPCの上のバーのファイル→保存ができます。

下記の様になっていればOKです。
STEP1.6
Terminalを開いて実行する

※以下で説明するターミナルが難しくてわからない人はフォルダを開いてindex.htmlをダブルクリック後次のステップに進んでください。ここではコマンドで実行する方法を紹介します。

上のバーのTerminalという箇所からNew Terminalをおします。

以下の様にターミナルが開いたらOKです。

open index.htmlと記入し、Enterをおします。
STEP1.7
実行結果の確認をする

ブラウザに真っ白なページが開いたら、右クリックして一番下にある検証を選びます。

Consoleのタブに切り替えて、hello worldと表示されていたらOKです。

表示されない場合はファイルの変更を保存できているか確認しましょう。
STEP1.6
最後に

これがJavaScriptの実行方法です。

JavaScriptはWebページが開くときに裏側で動いているコードです。

main.jsに記述したプログラムをブラウザ上で動かすことができます。

※JavaScriptでWebページで動作するものをフロントサイドのJavaScriptといいます。このほかにもサーバー上で動くJavaScript(Node.js等)があります。

気になる人は以下もチェックしてみてください！

Node.jsのインストールとExpress.jsのセットアップ
Node.jsとExpress.jsはパターンがあるので、サイトによって取り上げられ方が異なりますよね。どういうパターンがあるかをみながらインストールをしたい人も多いのではないでしょうか？また、フ ...

JavaScriptの記法一覧

関数

最初のセットアップではconsole.log("hello world")というコードを実行しましたが、この様にJavaScriptにはあらかじめ定義された機能があり、それらを組み込み関数と呼びます。

原理的には数学の関数のy=f(x)と似ていて、console.logという関数に"hello world"という引数を与えた時に、console上に引数の値を表示するというものになっています。

関数に与える値を引数と呼びます。

ほかにも整数にする関数のparseInt等色々なものがあります。

こちらのサイトが参考になりますが難しいのと、都度調べれば良いので今は覚えなくても大丈夫です。

変数と演算

JavaScriptでは変数の定義と四則演算が行えます。

掛け算には*(アスタリスク)、割り算には/(スラッシュ)を使用します。

let a = 10;
let b = 20;
let c;
c = a + b;
console.log(c);
c = a - b;
console.log(c);
c = a * b;
console.log(c);
c = b / a;
console.log(c);

let a = 10;

let b = 20;

let c;

c = a + b;

console.log(c);

c = a - b;

console.log(c);

c = a * b;

console.log(c);

c = b / a;

console.log(c);

上記のコードをmain.jsに貼り付けて実行すると以下の様になります。

文字列

変数には文字列も入れることができます。

let str = 'this is app-tatsujin'
console.log(str);

1 2	let str = 'this is app-tatsujin' console.log(str);

実行結果は以下の通りです。

分岐と繰り返し

JavaScriptではif文を用いて条件分岐を書くことができます。

let a = 10
if(a >= 5) {
    console.log('a is over 5')
} else {
   console.log('a is not over 5')
}

let a = 10

if(a >= 5) {

console.log('a is over 5')

} else {

console.log('a is not over 5')

}

実行結果は以下の通り。

※Switch Case文という分岐の書き方もありますが、使用頻度が低いので今回は省略します。

また、繰り返しの処理はfor文とwhile文2種類の記述方法があります。

//for文
console.log('for loop')
for (let i = 0; i < 5; i++) {
    console.log(i)
    console.log(`${i} time done`)
}

//while文
console.log('while loop')
let j = 0;
while(j<3){
    console.log(j)
    console.log(`${j} time done`)
    j++;
}

//for文

console.log('for loop')

for (let i = 0; i < 5; i++) {

console.log(i)

console.log(`${i} time done`)

}

//while文

console.log('while loop')

let j = 0;

while(j<3){

console.log(j)

console.log(`${j} time done`)

j++;

}

配列

JavaScriptのデータは文字列や数字含め7種類のデータタイプがあります。

文字列
数値
真偽値(true,false)
undefined
null
配列
オブジェクト

今回は配列について解説します。

配列は複数のデータを一まとめにしたデータ型です。

配列はデータセットを大括弧で囲い、データごとをカンマで区切ります。

let a = [1,2,4, 'test']
console.log(a)

1 2	let a = [1,2,4, 'test'] console.log(a)

実行結果は以下の様になります。

トグルを開くと具体的なデータを確認することができます。

オブジェクト

オブジェクトも複数のデータを一まとめにしたデータ型です。

配列との違いは各データに対してラベルを貼ることができる点です。

オブジェクトはデータセットを中括弧で囲い、各ラベルは""(ダブルクオーテーション)で囲います。

区切りは配列と同様にカンマを用います。

オブジェクトの各データをプロパティと呼び、プロパティへのアクセスは.を使ってアクセスします。これをドット記法と呼びます。

ドット記法以外にもブラケット記法という書き方がありますが、あまり使われないので省略します。

let kimura = {"fullname":"takuya kimura","age":18,"team":"white"}
let wada = {"fullname":"akiko wada","age":18,"team":"red"}
console.log(kimura)
console.log(kimura.fullname)

let kimura = {"fullname":"takuya kimura","age":18,"team":"white"}

let wada = {"fullname":"akiko wada","age":18,"team":"red"}

console.log(kimura)

console.log(kimura.fullname)

実行結果は以下の様になります。

自前定義関数とアロー関数

functionという宣言子を使うことで、独自の関数を定義することができます。

また、functionや中括弧、return等を取り除いても関数の機能性は変わらず、矢印だけの見た目をとってアロー関数と呼ばれる記法に派生することがあります。

コードは短い方が綺麗とされるからか、一般的にはアロー演算で関数を記述することが主流となっています。

function my_func(a,b){
    return a + b
}
console.log(my_func(1,5));

//functionをとって矢印マークにしても同じ。
(a,b) => {
    return a + b;
}

//中括弧をとって、returnを外しても同じ。
(a,b) => a + b

function my_func(a,b){

return a + b

}

console.log(my_func(1,5));

//functionをとって矢印マークにしても同じ。

(a,b) => {

return a + b;

}

//中括弧をとって、returnを外しても同じ。

(a,b) => a + b

実行結果は以下の様になります。

現代のプログラミング

実は現代ではプログラミングの記法を覚える必要はなくなっています。

GitHub Copilotというサービスを使うと自動でAIがコードを生成してくれる仕組みがあるためです。

詳細については以下をご覧ください。

: 【初心者】GitHub Copilotとは？始め方を解説！
プログラマの生産性を上げてくれるサービスのGitHub Copilotについてどんなものか知りたくないですか？ GitHub Copilotを使うとプログラミングでちょっとした処理を思い出せずにググっ ...

スポンサードリンク