Webアプリケーションの開発フロー

作成したいWebアプリケーションが決まった。
具体的には、以下2点を軸にして考え「写真共有サービス」を作成したいと思う。

技術力を効率的に高めて作成できるもの
実際に誰かの役に立つもの(需要がある、何らかの問題を解消できる)

補足として、
長女の幼稚園では、写真販売などは無く園での様子は毎日の連絡帳のみで共有される。
先生はiphoneで写真を撮ってくれるが、その写真を見たことはない。
行事があった時などに保護者が撮影した写真はLINEの保護者グループのアルバムで共有されている。

補足事項も踏まえ、園と保護者の写真共有サービスを作成したいと思った。
具体的な開発フローを把握し、ゴールを明確にしておく。

開発フロー

Webサービスを作るための企画書を作成する
企画書を元に要件定義を作成する
要件定義を元に基本設計を作成する
基本設計を元に開発を行う

企画書を作成する

目的
コンセプト
ターゲット
機能などを作成洗い出し

要件定義を作成する

コンセプト
必要な機能
デザイン

基本設計を作成する

ワイヤーフレームはWebページの画面デザインをどのようにするのかを図でイメージできるようにする。
そして画面ごとに複数のワイヤーフレームが出来たら、サイトマップとしてそれらを繋ぎ合わせて全体像を把握する。最後に実際に動くプロトタイプを作る。(Prottを使う予定)

プログラミングしていく

プログラミングして終わりではなく、テストを実行してバグや脆弱性が発生しないかの確認やさまざまなブラウザでの検証していく。

一般的に検証が必要なブラウザ

最後にWebアプリを公開するにはサーバーが必要になる。最近はクラウド化が進んでいるのでAmazonが提供するAWSやGoogleが提供するGCPなどを利用する傾向にある。また、小規模なWebアプリであればHerokuやFirebaseを採用することで低コストな運用も可能になっている。

2022-10-09

Javascript_V switch文

Javascript

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;
}

↓
凶です

2022-10-09

Javascript_lV

Javascript

複数の条件式

かつ

「かつ」は「&&」で表す。
「条件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

2022-09-23

Javascript_lll if文

Javascript

条件分岐

ある条件が成り立つときだけある処理を行うこと。
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の方が大きいまたは等しい

等価演算子

比較演算子には、左と右の値が等しいかを調べるものもある。
「a == b」はaとbが等しければtrue、等しくなければfalse。「a != b」はその逆。

＜等しいかを比べる＞

a == b … aとbが等しい
a != b … aとbが異なる

厳密等価演算子

厳密等価演算子を使うと、文字列「"12"」と数値「12」を異なるデータとして扱うことができる。

＜厳密に等しいかを調べる＞

a === b …aとbが厳密に等しい
a !== b … aとbが厳密に異なる

条件が成り立たない場合の処理

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より大きいです

2022-09-23

Javascript_ll テンプレートリテラル

Javascript

テンプレートリテラル

テンプレートリテラル(テンプレート文字列)とは、文字列の中に変数や定数などを埋め込んだり、改行を入れたりすることができるようにして、文字列の扱いを楽に便利にできる構文のこと。

書き方

文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができる
文字列全体をバッククォーテーション（`）で囲む
複数の変数や定数を埋め込むことも可能

const name=“にんじゃわんこ”;
const age=“14”;
console.log(`${name}は${age}歳です`)

↓
にんじゃわんこは14歳です

2022-09-22

Javascript_l console.log/変数/定数

Javascript

console.log

JavaScriptの標準的な実装に組み込まれている機能の一つで、実行環境に用意された文字による入出力画面（コンソール）に指定された文字列を出力（表示）するもの。

基本的な書き方

//「Hello World」と出力される
console.log(“Hello World”);

↓
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”;

2022-09-21

HTML/CSS_lll レスポンシブデザイン

HTML/CSS

Media Queries(メディアクエリ)

ブラウザの画面サイズに応じてCSSのスタイルを設定できるMedia Queries(メディアクエリ)という手法を用いて、様々なデバイスや画面サイズに合わせてコンテンツのレイアウトを調整する。

書き方

@media (条件) { .... } ：指定された条件が当てはまるときにのみ{ }内のCSSが適用される
headタグ内にviewportを設定する

条件

max-width:○○px：○○pxまで
min-width:●●px ：●●pxから

ブレイクポイント

デザインが切り替わる画面幅のポイントをブレイクポイントと呼ぶ。
max-width: ◯◯px（またはmin-width: ◯◯px）のようにメディアクエリの条件を指定するとき、「◯◯px」の部分。

＜端末別画面サイズ＞

パソコン 1280px以上
タブレット 600px〜1024px
スマートフォン 320px〜540px

＜一般的なブレイクポイント＞

パソコン用 1069px〜
タブレット用 768px〜1068px
スマートフォン〜767px

<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
</head>

/* 480px以下の場合h1はgreenになる */
@media (max-width:480px) {
　　h1{
      color:green;
　　　　}
}