Webアプリケーションの開発フロー
作成したいWebアプリケーションが決まった。
具体的には、以下2点を軸にして考え「写真共有サービス」を作成したいと思う。
- 技術力を効率的に高めて作成できるもの
- 実際に誰かの役に立つもの(需要がある、何らかの問題を解消できる)
補足として、
長女の幼稚園では、写真販売などは無く園での様子は毎日の連絡帳のみで共有される。
先生はiphoneで写真を撮ってくれるが、その写真を見たことはない。
行事があった時などに保護者が撮影した写真はLINEの保護者グループのアルバムで共有されている。
補足事項も踏まえ、園と保護者の写真共有サービスを作成したいと思った。
具体的な開発フローを把握し、ゴールを明確にしておく。
Javascript_V switch文
switch文を使った条件分岐
switch文は条件分岐のひとつで、式の評価結果に基づいて処理を分け、異なる処理を実行する構文。
複数条件がある場合は、if文よりswitch文を使うほうが、コードがシンプルになりやすいといったメリットがある。
基本構文
switch (式){ case 条件1: 式が条件1と一致する場合に実行する処理; break; case 条件2: 式が条件2と一致する場合に実行する処理; break; case 条件3: 式が条件3と一致する場合に実行する処理; break; default: 式がいずれのcase文とも一致しない場合に実行する処理; }
(例)
const n = 2; switch (n) { case 1: console.log("大吉です"); break; // nの値が2のcase case 2: console.log("吉です"); break; // nの値が3のcase case 3: console.log("小吉です"); break; }
↓
吉です
default
switch文のどのcaseにも当てはまらない場合、default処理が実行する。
(例)
const n = 4; switch (n) { case 1: console.log("大吉です"); break; case 2: console.log("吉です"); break; case 3: console.log("小吉です"); break; // どのcaseにも合致しなかったときの処理 default: console.log("凶です"); break; }
↓
凶です
Javascript_lV
複数の条件式
かつ
「かつ」は「&&」で表す。
「条件1 && 条件2」は「条件1かつ条件2」という意味で、複数の条件がすべてtrueならtrueになる。
//「10より大きいかつ30より小さい」は、「10 < x < 30」と書くことは出来ない。このようなときは「&&」を使う。 xが20の時 x>10 && x<30…true xが5の時 x>10 && x<30…false
(例)
「定数ageの値が20以上かつ30未満」という条件のif文を作成する。
また、その中で文字列「私は20代です」を出力する。
const age = 24; if (age >= 20 && age < 30) { console.log("私は20代です"); }
↓
私は20代です
または
「または」は「||」で表す。
「条件1 || 条件2」は「条件1または条件2」という意味で、複数の条件のうち1つでもtrueならtrueになる。
//「10より大きいかつ30より小さい」は、「10 < x < 30」と書くことは出来ない。このようなときは「&&」を使う。 xが20の時 x>10 && x<30…true xが5の時 x>10 && x<30…false
Javascript_lll if文
条件分岐
ある条件が成り立つときだけある処理を行うこと。
if文を用いると「もし○○ならば●●を行う」という条件分岐が可能になる。
if文の書き方
if
の後ろに条件式を書き、それが「成り立つ」場合の処理を{ }の中に書く。
if (条件式) { 条件式が成り立った場合処理を実行 }
(例)
const number=12; if(number>10){ console.log(“numberは10より大きいです”) }
↓条件が成り立ち処理が実行される
numberは10より大きいです
真偽値
条件式は、
- 成り立つと「true」
- 成り立たなければ「false」
という真偽値に置き換わる。
比較演算子
条件式に使った「>」は比較演算子と呼ばれる大小比較の記号のこと。
<大小を比べる>
- a < b … aはbより小さい
- a <= b … aの方が小さい または等しい
- a > b … aはbより大きい
- a >= b … aの方が大きい または等しい
条件が成り立たない場合の処理
else
if文に「else」を組み合わせると「もし〇〇なら●●を行う、そうでなければ■■を行う」という処理ができるようになる。if文の条件がfalseの場合、elseの処理が実行される。
if(条件式){ 条件が「true」の時の処理 }else{ 条件が「false」の時の処理 }
(例)
const number = 7; if(number > 10){ console.log(“numberは10より大きいです”) }else{ console.log(“numberは10以下です”) }
else if
ifとelseの間に「else if (条件)」を追加することで、if文に条件分岐を追加することができる。
if(条件式1){ 条件式1が「true」の時の処理 }else if(条件式2){ 条件式1が「false」、条件式2が「true」の時の処理 }else{ どちらの条件式も「false」の時の処理 }
(例)
const number=7; if(number>10){ console.log(“numberは10より大きです”) }else if(number>5){ console.log(“numberは5より大きです”) }else{ console.log(“numberは5以下です”) }
↓
numberは5より大きいです
Javascript_l console.log/変数/定数
console.log
JavaScriptの標準的な実装に組み込まれている機能の一つで、実行環境に用意された文字による入出力画面(コンソール)に指定された文字列を出力(表示)するもの。
基本的な書き方
//「Hello World」と出力される
console.log(“Hello World”);
console.log(5 + 2);
↓ 足し算の結果である7が出力される
7
console.log(“5 + 2”);
↓ 文字列と解釈されそのまま出力される
5 + 2
掛け算「*」、割り算「/」
console.log(5 * 2);
↓
10
console.log(6 / 3);
↓
2
余りの計算「%」
console.log(9 % 2);
↓ 9割る2は、4余り1
1
変数
変数とは、さまざまな文字列や数値を入れておく箱とイメージするとわかりやすい。
その箱に便宜上の名前(変数名)をつけ、中身のデータの代わりに変数名を書き入れ使い回すことで、同様の処理が簡単におこなえるようになる。
- 同じ値を繰り返し使える
- 変更に対応しやすい
- 値の意味がわかりやすい
定義
変数は「let 変数名 = 値」として定義する。
プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味。
「let」は「これから変数を定義します」という宣言で、その後ろに変数名を書き、値を代入する。
//let...変数の宣言 //name...変数名 //John...代入する価 let name = “John”;
使い方
「"John"」という値が代入された変数nameを出力すると、「"John"」という値が出力される。
変数を使うと変数の部分は代入した値に置き換わる。
let name = “John”;
console.log(name);
↓
John
命名ルール
変数名は自由に決めることができるが、できるだけ分かりやすい名前をつけるようにする。
また、ES6では変数の名前にいくつかのルールがある。(数字開始はエラーがでる。日本語やローマ字も望ましくない。)
- number…◎英単語を用いる
- oddNumber…◎2語以上の場合は大文字で区切る
更新
変数は一度代入した値を変更することができる。
一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされる。
定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書く。
let name = “John”;
console.log(name);
name=“kate”;
console.log(name);
↓
John
kate
変数自身を更新
(例)すでに定義している変数numberの値に3を足したいというときは...
numberに3を足して、再びnumberに代入することで実現できる。
「=」の右側のnumberは値に置き換わり、計算された結果が左のnumberに代入される。
let number=2; console.log(number); //numberに3を足す number=number+3; //再びnumberに代入する console.log(number);
「number = number + 10」の省略した書き方
定数
定数とは、一度指定すると変更する事ができない値のこと。なので変数のように変数の値を上書きする事ができない。
<メリット>
値が変わらないためエラーを防ぐ事ができる
<デメリット>
上書きができないという点は自由度が減る
定義
定数は「const 定数名 = 値;」として定義する。
//const…定数の宣言 //name=定数名 //John…代入する値 const name=“John”;
HTML/CSS_lll レスポンシブデザイン
Media Queries(メディアクエリ)
ブラウザの画面サイズに応じてCSSのスタイルを設定できるMedia Queries(メディアクエリ)という手法を用いて、様々なデバイスや画面サイズに合わせてコンテンツのレイアウトを調整する。
書き方
@media (条件) { .... }
:指定された条件が当てはまるときにのみ{ }内のCSSが適用されるhead
タグ内にviewport
を設定する
条件
- max-width:○○px:○○pxまで
- min-width:●●px :●●pxから
ブレイクポイント
デザインが切り替わる画面幅のポイントをブレイクポイントと呼ぶ。
max-width: ◯◯px
(またはmin-width: ◯◯px
)のようにメディアクエリの条件を指定するとき、「◯◯px」の部分。
<端末別画面サイズ>
<一般的なブレイクポイント>
<head> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> </head>
/* 480px以下の場合h1はgreenになる */ @media (max-width:480px) { h1{ color:green; } }