Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@yukibe

【JavaScript】１日で基本を学ぶ〜前編

Last updated at Posted at 2018-05-26

サクサク動くアプリを作りたい

今までLaravelを使用したアプリを作成してきたが、ユーザー側から見て動作が重たく感じる・・・と言うのも、ページ遷移の都度、該当ページの読み込みを行なってきたからだ。

それを解消したいと思い、フロントエンドで使用されるプログラミング言語JavaScriptを学ぶことにした。目標はJavaScriptのフレームワークであるVue.jsを使用することだ。自分自身のこれまでの経験から、最初からフレームワークに手を出すのは良くないと思い、まずはJavaScriptそのものを学ぼうと決めたのだ。

しかし、データベースにインフラと他に学ぶべきことが多く、１つの項目に時間をかけている余裕はない。自分のレベルについてはプログラミング初心者はおそらく卒業していると思うので、JavaScript自体は基本書でサクッと学ぶことにした。できれば１日で。

今回使用した本はこちら。プログラミング初心者がまず最初に読む本としても勧められる良本だ。
岩田宇史「いちばんやさしいJavaScriptの教本」（インプレス）

作業環境

結局今の自分の状態は何なのだろうか・・・？脱初心者？基本的な動作環境は整えているので、それを掲載しておく。

  • ブラウザはChrome。
  • エディターはVisual Studio Code。
  • PHP、Laravel、Ruby on RailsのCRUDアプリ作成ができる。
  • フロントエンドを本格的に学んだ経験はない。

JavaScriptとは

サクッと説明する。個人的には、敷居の低さからも全くの初心者に１番勧められる言語だと思っている。

  • 非同期通信ができる。（各ページをその都度読み込む必要がない！これが使いたい。）
  • 複雑な環境構築は不要。
  • HTMLやCSSの書き替えができる。
  • 四則演算などの一般的な処理ができる。

HTMLとは

HTMLとCSSについても理解が不可欠なため、こちらも簡単に説明する。

  • Webサイトの見た目を構成する。
  • タグや属性で構成される要素を組み合わせて文書構造を表す。
  • 空要素には終了タグがない。このタグを単独タグと言う。
  • 特にclass属性とid属性は、下記のCSSを適用させるために必須である。
  • class属性は同一ページにおける重複が許されるが、id属性は不可。

CSSとは

  • HTMLを装飾する。
  • HTMLにおける場所を示すセレクタと、装飾内容を示すプロパティで構成される。
  • セレクタにおけるclass属性はドット（例：.hello）で表す。
  • 同じくid属性はシャープ（例：#hello）で表す。
  • 同じくタグも指定できる。この場合、特別な記号は必要ない。

JavaScriptとCSSを適用する

JavaScriptの適用

HTMLの<script>タグ内に記述する。方法は２つあるが、後者の方がオススメ。

  • <script>タグ内に処理そのものを記述する。
  • <script>タグのsrc属性にJavaScriptファイルの場所を指定する。

CSSの適用

HTMLの<head>タグのrel属性とhref属性に必要事項を指定し、CSSファイルを呼び出す。

  • rel属性に"stylesheet"を指定する。
  • href属性にCSSファイルの場所を指定する。

こちらも<style>タブやstyle属性を利用した書き方があるらしいが・・・あまり見たことがない。

JavaScriptの動作を確認する

Chromeでoption+command+I（Macの場合）と入力すると、デベロッパーツールが開く。そこのConsoleタブを選択し以下のコマンドを試していくと、ダイアログボックスの表示や戻り値が簡単に確認できる。

また、HTMLをブラウザ上にドラッグ＆ドロップし、JavaScriptファイルを編集して動作確認する方法も使用できる。この方法は上記で紹介した基本書で紹介されていた。長めのコードを記述する場合はエディターを使用すると思うので、こちらの方が良いだろう。

コードを記述した後は、行末にセミコロン（;）の入力をお忘れなく！

基本事項

このあたりはコンソールで簡単に動作確認した。

ダイアログボックス

> alert('ただの警告だよ！');
< undefined

> confirm('実行してOK?');
< true

> prompt('何か入力して！');
< "test"

変数の定義

変数はvarで定義する。変数の定義と代入を同時に行うことも可能だ。

> var test;
< undefined

> test = "aaaaa";
< "aaaaa"

> test;
< "aaaaa"

> var test = "bbbbb";
< undefined

> test;
< "bbbbb"

文字列の結合

数字と文字をつなぐと、結果として全て文字列となる。もちろん変数同士の結合も可能だ。

> "ようこそ" + "JSの世界へ！";
< "ようこそJSの世界へ！"

> "ccccc" + 12345;
< "ccccc12345"

> test + 12345;
< "bbbbb12345"

改行（特殊文字）

\nで改行できる。

> "ようこそ\nJSの世界へ！";
< "ようこそ
JSの世界へ！"

配列

配列もvarで定義できる。lengthプロパティで要素数の取得も可能だ。

> var country = ["日本", "アメリカ", "中国"];
< undefined

> country[0];
< "日本"

> country[1];
< "アメリカ"

> country[2];
< "中国"

> country.length;
< 3

制御文

他のプログラム言語と比べても、さほど大きな差はない。JavaScriptと言わず、改めて基本事項を確認できた。

if文

ここではダイアログボックスの入力値を利用している。しかし、ダイアログボックスの入力値は全て文字列となってしまうため、parseFloat関数を使用して入力値を数値に変換している。

app.js
var money = prompt("現在の所持金はどのくらい？");
money = parseFloat(money);

if (money >= 10000) {
  alert("次の給料日までしのげるぞ！");
} else if (money < 10000 && money >= 5000) {
  alert("節約しよう！");
} else if (money < 5000 && money >= 3000) {
  alert("ちょっとやばい？");
} else {
  alert("毎日もやし・・・");
}

switch文

app.js
var heart = prompt("今の気分は？\n\n1:最高\n2:普通\n3:最悪");
heart = parseFloat(heart);

switch (heart) {
  case 1:
    alert("よかったね！");
    break;
  case 2:
    alert("こんなもんだよね！");
    break;
  case 3:
    alert("早く寝て忘れましょ！");
    break;
  default:
    alert("1から3までの数字を入力してね！");
}

for文

app.js
for (var i = 1; i <=10; i++) {
  console.log(i + "回目の繰り返しです！");
}

while文

無限ループに陥らないように、必ず終了条件を記述すること。

app.js
var number = 1;
while (number <= 10) {
  if (number % 2 == 0) {
    console.log(number + "は偶数です");
  } else {
    console.log(number + "は奇数です");
  }
  number ++;
}

条件が偽でも最低1回は処理を行いたい場合

上記のwhile文では、条件が偽の場合は一度も処理が実行されない。最低1回は処理を行わせたいならば、do...while文で処理を先に記述すること。

app.js
var number = 1;
do {
  console.log(number);
} while (number > 10);

break文

この場合、numberが2になった時点でwhile文の処理は終了する。

app.js
var number = 1;
while (number <= 10) {
  if (number % 2 == 0) {
    break;
  } else {
    console.log(number + "は奇数です");
  }
  number ++;
}

continue文

上記のbreak文とnumber ++;の位置が異なることに注目してほしい。ここを間違えると無限ループの罠にハマる。

app.js
var number = 0;
while (number <= 10) {
  number ++;
  if (number % 2 == 0) {
    continue;
  } else {
    console.log(number + "は奇数です");
  }
}

関数

月収を入力し、そこから年収を計算するプログラムを書いてみた。各関数をcalIncome関数でくくり、1回の呼び出しで処理を終了させている。

最初、alert関数をtotalIncome関数に組み込んでしまったため、年収の表示がされなかった。ローカル変数の有効範囲と関数のくくり方には気をつけたい。

app.js
calIncome(); 

function calIncome () {
  var monthly_income = prompt("現在の月収はいくら？");
  monthly_income = parseFloat(monthly_income);

  function annualIncome () {
    var annual_income = monthly_income * 12;
    return annual_income;
  }

  function bonus () {
    var bonus = monthly_income * 1.5 * 2;
    return bonus;
  }

  function totalIncome () {
    var total_income = annualIncome() + bonus();
    return total_income;
  }

  alert("あなたの年収は"+ totalIncome() + "円です！");
}

参考情報

はじめに紹介したが、この本はオススメ！
岩田宇史「いちばんやさしいJavaScriptの教本」（インプレス）

こちらもわかりやすい。
JavaScript/はじめに-Wikibooks

公式サイトも見やすかった。
JavaScript|MDN

ホントに1日で終わるのだろうか・・・という不安を抱きつつ、今回はここまで。

9
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?