ITとdesign エンジニアのブログ by エンジ庭

IT業界のトレンドなどIT分野について学んだ事を書いていきます。プログラミング技術などについて現在Qiitaメインに書いてますので、そちらを参照ください。  https://qiita.com/kota_sho

Font awesome

font awesomeとは

webサイトなどでアイコンフォントを表示できるようにするサービス。様々なフォントがあり、好きなアイコンを自由に選んで使える。有名な企業やサービスのロゴマークなどもある。

使い方:

今回はCDNを使う方法をまとめます。

CDN(content Delivery service)とは、web上で送受信されるコンテンツをインターネット場で効率的に配送するために構築されたネットワークです。自分のサーバーを使わずに仮想サーバーを使わしてもらう、要はアイコンをダウンロードして自分のサーバーにアップロードしなくても使える。

詳細は下記参照

https://www.cdnetworks.co.jp/about/

Font Awesomeの使い方 流れ

1、HTMLにリンクを貼ろう

場所は、head内です。CSS参照するように書くのと同じ要領でont awesome使いますと書いておきましょう。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>html_sample</title>
</head>
<body>

 

2、好きなアイコンを選ぼう

使う準備ができたので、早速使いたいアイコンを探しましょう。

こちらはfont awesomeのサイトで探せます。

下記参照

https://fontawesome.com

f:id:Arts91:20190919214807p:plain

3、好きな場所にアイコンを使おう

最後にHTMLの任意の場所に、コードを書きましょう。

<i class = "fas fa-名前><i>

<i class="fas fa-save"></i>

今回はsaveという名前のアイコンを使いました。

 

以上がfont awesomeの基本的な使い方。

また、font-awesomeは大きさなど細かい部分も調整できるので、また今度紹介します。

JavaScript 基本の文法

目次:

1、基本的な文法

2、文字列と数値

3、変数

4、オブジェクト

5、条件判定のための型と式

6、関数

 

1、基本的な文法

 

・文の終わりにはセミコロン

console.log(’出力’);

 

・変数

変数の定義

var 変数名;

var name;

 

変数に値を代入

変数名 = 代入する値

name = '山田太郎'

 

変数の使い方は2通り

1、変数を定義してから値を入れる

2変数を定義すると同時に値を入れる

var name;
name = '山田太郎'

var name = '山田太郎';

 

値の更新:

var name = '山田太郎';
name = '鈴木陽介';
console.log(name); //鈴木陽介

 

変数の一括定義

var name1, name2;

 

変数にはどんなデータでも入れられる

var str = 'string'; //文字列
var num = 100; //数値 
var arr = ['a', 'b']; //配列
var obj = {a: 'b'}; //オブジェクト
var fun = function() {}; //関数

 

2、文字列と数値

文字列

文字列はシングルクオテーション(' ')またはダブルクオテーション("  ")で囲む。

var name = '山田太郎';

 

文字列の結合

var name = '山田' + '太郎';
console.log(name); //山田太郎
 

 

var lastName = '山本';
var firstName = '一郎';
var fullName = lastName + firstName;
console.log(fullName); //山本一郎

 

数値

クオートは不要。

var x = 10;

 

四則演算

var result = 10 + 20;
console.log(result); //30

 

var x = 10;
var y = 20;
var result = x + y;
console.log(result); //30

 

自分自身に足し算する場合は?

var x = 10;
x = x + 5;
console.log(x); //15

以下のようにもできる

var x = 10;
x++;
console.log(x); //15

X++は、X = X +1と同じ。

反対に引き算は、Xーー

 

数値を文字列で計算してしまうと?

var x = '10';
var y = '20';
var result = x + y;
console.log(result); //1020

 

3、変数

配列では、複数のデータをまとめて扱うことができます。

配列を使わない例:

var fruit1 = 'みかん';
var fruit2 = 'りんご';
var fruit3 = 'ぶどう';

配列を使う例:

var fruit = ['みかん', 'りんご', 'ぶどう'];

 

配列の操作

配列を作ると、時自動的に値にインデックス(番号)が割り当てられます。

インデックスは0番から始まるので、1つめの要素のインデックスは0番になります。

var fruit = ['みかん', 'りんご', 'ぶどう'];
var orange = [0];
var apple = [1];
var grape = [2];
console.log(orange) // みかん
console.log(apple) // りんご
console.log(grape) // ぶどう

配列の要素を数えるときはlength

console.log(fruit.length);

インデックスは0から始まるのでした。

2番目の要素を取りたいときは1を、3番目の要素を取りたいときは2を指定する、つまりインデックスから1を引けばいいですね。

ということは、

最後の要素を取りたいときは・・・

インデックスの数 ー 1をすればいい。

var fruit = ['みかん', 'りんご', 'ぶどう'];
var lastIndex = fruit.length - 1;
var lastElement = fruit[lestIndex];
console.log(lestIndex) //ぶどう

 

4、オブジェクト

配列では、同じようなデータをまとめることができましたが、異なるデータをまとめることができませんでした。オブジェクトでは異なるデータをまとめることができます。

オブジェクトの定義

{プロパティ名1:値1,  プロパティ名2:値2・・・};

 

オブジェクトを使わない例:

var peronName = '山田太郎';
var peronAge = 20;
var personGender = 'male';

 

var person = {
name: '山田太郎',
age: 20,
gender: 'male'
};

下記も同じですが、見やすさを重視して上記のような書き方がオススメです。

var person = {name: '山田太郎', age: 20, gender: 'male'};

 

オブジェクトの操作

オブジェクト名 . プロパティ名

var person = {
name: '山田太郎',
age: 20,
gender: 'male'};
var name = person.name
console.log(name) //山田太郎

入れ子になっているオブジェクトのプロパティの値も取得できます。

下記は、personオブジェクトのaddressのポストコードを取得

var person = {
name: '山田太郎',
age: 20,
gender: 'male',
address: {
postcode: '100-0001',
pref: '東京都',
city: '千代田区'
}
};
var postcode = person.address.postcode;
console.log(postcode); //100-0001

 

値の更新

var person = {
name: '山田太郎',
age: 20,
gender: 'male'};
person.age = 21
console.log(age) //21

 

プロパティの追加

var person = {
name: '山田太郎',
age: 20,
gender: 'male'};
person.kana = 'やまだたろう'
console.log(person.kana) //やまだたろう

 

5、条件判定のための型と式

論理型(真 OR 偽)

var name = '山田太郎';
console.log(name === '山田太郎'); //true

 

比較演算子

var person = {
name: '山田太郎',
age: 20,
gender: 'male'};
console.log(age >= 20); //true

 

==、!= と ===、!==の違い(!=はNOT)

==、!= は片方が文字列、もう片方が数値でも同じ数字であればtrue

===、!==は型まで一致していないとtrueになりません。

console.log('10' == 10); //ture
console.log('10' === 10); //false
 
console.log('10' != 20); //ture
console.log('10' !== 20); //false

 

条件式

if(条件式){

  処理

}

if(age >= 20){
console.log('年齢は20歳以上です')
}

 

論理演算子

!「NOT」

&&「かつ」

| | 「または」

if(name === '山田太郎' && !url){
console.log('山田さんのurlはありません')
}

 

if(name === '山田太郎' || name === '武田涼'){
console.log('山田太郎さんか武田涼さんです')
}

 

条件分岐(if〜else文)

if(y > 100){
console.log('yは100より大きいです');
} else if(y > 50){
console.log('yは50より大きいです');
} else {
console.log('yは50以下です')
}

 

繰り返し

while文

var i = 0;
while(i < 10){
console.log(i);
i++
}

i++で更新してあげないと無限ループになってしまうので、忘れずに書きましょう。

 

for文

whileと同じ繰り返し文。whileはいろんな繰り返しを柔軟に書けますが、for文は単純な処理を「何回繰り返す」文を簡潔に書けます。

for(初期化式; 条件式; 更新式){

   文;

};

for(var i = 0; i < 10; i++){
console.log(i); //1~9まで順番に出力される
}

 

配列の繰り返し

var fruit = ['みかん', 'りんご', 'ぶどう'];
var value;
for (var i = 0; i < 3; i++) {
value = fruit[i];
console.log(value);
}

 

6、関数

function  関数名(引数、引数・・・){

     文;

}

//関数の定義
function add() {
var a = 10;
var b = 20;
var result = a + b;
console.log(result);
}

//関数の呼び出し
add();// 30

 

オブジェクトのプロパティとして定義する

var person = {
name: '',
age: 20,
say: function(){
console.log('こんにちは');
}
};

person.say();// こんにちは

 

引数

//関数の定義
function add(a, b){
var result = a + b;
console.log(result);
}

//関数の呼び出し
add(1, 1); //2
add(10, 20); //30

 

戻り値

一つ前の「引数」では、足し算した値を出力するだけでしたが、結果を返すことによって「結果を返す」ことによって帰ってきた結果を自由に使うことができます。より汎用的な関数にすることができます。

/戻り値を使った関数
function add(a, b){
var result = a + b;
return result;
}

var result1 = add(1, 1);
console.log(result1); //2
var result2 = add(10, 20);
console.log(result2); //30
var result3 = add(result1, result2);
console.log(result3); //32

 

HTML / CSS 基本

HTML

headタグの内容

主に画面に表示されない情報

・画面タイトル

・記述される文字コード

・リンクタグ

・metaタグ

CSS

JavaScript

 

<meta charset = "UTF-8"/>

文字コードの指定。文章の文字コードを定義。

 

<title>htmlのタイトル</title>

タイトルタグ。ブラウザの上部(タブ)に表記される。

 

<link rel = "stylesheet" href = "./css/style.css"/>

リンクタグ。このhtml以外に記載されたCSSファイルなどを利用する場合に読み込む。

 

bodyタグの内容

画面に表示される内容を記載。

 

id属性

cssやjs、サーバーへの送信などで要素を判別する際に利用。

同じページで重複不可。

 

name属性

cssやjs、サーバーへの送信などで要素を判別する際に利用。

同じページで同一のname利用可(radio, checkbox以外はあまり良くない)。

 

class属性

cssやjsで要素を判別する際に利用。

同じページで重複可。

 

value属性

テキストの場合は初期値として表示され、サーバーへの送信の際にその値が送信される。

 

ブロック要素

見出し、段落、表など文書を構成する基本となる要素で一つのブロック(固まり)として認識される。

子要素を配置することが可能。

要素には高さ、横幅を持つ。

<div>

ある要素群をブロック要素としてグループ化する際に使う。

 

<form>

入力、送信フォームを作成する際に利用。

 

<p>

<p> 〜 </p>で囲まれた部分が一つの段落であることを表す。

 

<table>

テーブル(表)を作成するタグ。

 

<hr>

水平の罫線を表す。

 

など

 

 

インライン要素

主にブロックレベルの要素の内容として用いられる要素で、文章の一部として用いられる。例えば、<p>要素の中の<strong>要素のように、段落の中の一部を強調するような使い方をする。

こ要素を配置することは不可。」

<img>

画像。

src属性(ソース):画像を表示する際にファイルパスを記述。

相対パス絶対パスで指定。

alt属性:画像の代わりになるテキストを記述。

 

<input>

テキスト入力欄や実行ボタンなど、フォームを構成する部品を作成する。

 

<a>

主にページ移動する際に使う。href属性で遷移先を設定し、target属性でどのフレーム / ウィンドウ(タブ)を開くか指定。

 

<span>

インライン要素としてグループ化するときに使う。

 

<textarea>

複数行のテキストを入力させたい場合に利用

 

<select>

セレクトメニューを表現するときに使う。

選択肢はoptionタグを利用。

 

<label>

フォームの構成部品(ラジオボタン、1行テキストボックス、チェックボックスなど)とその項目名(ラベル)を明確に関連づけるための要素。

 

<b>

改行するときに使う。

 

<ul>

順序のないリストを表示。

 

<ol>

順序のあるリストを表示(インデックスがつく)。

 

<li>

リスト

 

など

 

CSS

基本:

セレクタ(何に){プロパティ(何を): 値(どれぐらい);

h2 { color : red; }

 

主なプロパティ

font-size:文字のサイズ

 

color:

background-color:背景色

 

width:横幅

height:高さ

 

margin:要素の外側の余白

pading:要素の内側の余白

 

border:枠線

 

display:表示の形式

 

cursor:マウスカーソルの形式

 

font-weight:文字の太さ

font-family:文字のスタイル

 

text-align:水平方向の位置

vertical-align:垂直方向の位置

 

max-width:最大幅

max-height:最大高さ

min-width:最小幅

min-height:最小高さ

 

overflow:はみ出た部分の表示方法

float:浮動化

clear:回り込み解除

position:配置方法

top:配置位置上から

right-top:配置位置右から

bottom-top:配置位置上から

left-top:配置位置左から

 

 

T-SQL ユーザー定義関数、エラー処理 他

変数

DECLARE @変数名 型名

SET @変数名 = 代入値

または

SELECT @変数名 = 代入値

 

DECLARE 

   @変数名1 型名

   @変数名2 型名

SELECT

   @変数名1 = 代入値

,          @変数名2 = 代入値

 

テーブル変数

・実行時のみメモリ上に存在する仮想テーブル

・通常の変数同様に処理完了時に自動的に廃棄されるため、データの削除処理やテーブル自体の削除処理は不要

・大量のデータを挿入するとその分メモリを消費するが、高速に処理できる

 

DECLARE @変数名  table {

  列名1 型名 オプション

,      列名2 型名 オプション

}

 

主キーの設定

DECLARE @変数名  table {

  列名1 型名 オプション

,      列名2 型名 オプション

,      PRIMARY  KEY (

,      主キー

  )

 

INSERT  INTO  @変数名  VALUES ( 値1,  値2,  値3)

INSERT  INTO  @変数名  VALUES ( 値1,  値2,  値3)

 

UPDATE @変数名

SET カラム名 = 代入値

FROM @変数名

WHERE(条件)

 

一時テーブル

・変数ではなく本物のテーブルが一時的に作られる

・セッションが有効な間は削除されない(エディタを閉じるまで有効)

・処理は低速だが大量のデータを一時的に扱う場合は効果的

 

CREATE TABLE #テーブル名 {

列名1 型名 オプション

,      列名2 型名 オプション

}

 

エラー処理

・TRYの部分に実行したい処理を書く

→ もしその中でエラーがあったらCATCHに移動

CATCHにはエラーが起きた場合の処理を書く

 

BEGIN TRY

  処理

END TRY

BEGIN CATCH

 エラー処理

END CATCH

 

TRANSACTION ✖️ TRY CATCH の組み合わせ

BEGIN  TRY

    BEGIN TRANSACTION

  処理

    COMMIT TRANSACTION

END TRY

BEGIN  CATCH

 エラー処理

END  CATCH

 

ユーザー定義関数 

CREATE  FUNCTION  関数名

  @引数1 データ型

,      @引数2 データ型

RETURNS 戻り値 データ型

AS

BEGIN

  処理

  RETURN 戻り値

END

GO

 

以下、お店の商品ごとに割引するという処理

下記のようなテーブルがあったとして

idと金額を入れたら割引後の値段を出してくれるfnc_calc_discountという関数を作ります。

例:id1番は10%引きです。

Id

Discount

1

0.1

2

0.2

3

0.3

 

テーブル作成などの処理は省略します。

 

CREATE FUNCTION [dbo].[fnc_calc_discount](
@p_id int
, @p_price money
)
RETURNS money
AS
BEGIN
DECLARE
@w_money money
, @w_discount_rate money

SELECT
@w_discount_rate = campaign_discount.discount
FROM campaign_discount
WHERE(campaign_discount = ISNULL(@p_id, ''))

SELECT @w_money = ISNULL(@p_price, 0) * (1 - ISNULL(@w_discount_rate, 0))

RETURN @money

--実行
SELECT dbo.fnc_discount_rate(1, 500) → 450
SELECT dbo.fnc_discount_rate(2, 500) → 400
SELECT dbo.fnc_discount_rate(3, 500) → 350

T-SQL ストアドプロシージャー編

ストアドプロシージャー

ストアドプロシージャーとは

データベースに対する連続した複数の処理を1つのプログラムにまとめ、データとともに保存できるようにしたもの。

 

例えば、毎回SELECT文を書くのは手間なので、「こういう処理をしたい時のプログラム」としてあらかじめ作っておくことができる。

 

例:

「金額に現行の消費税を掛けて・・・」というクエリを毎回書くのは手間

→「消費税を計算する処理」を作っておき保存。

 

イメージで言えば、様々な処理手順を有した箱がある

→キーワードを入れればそれを加工して完成させてくれる。

 

消費税計算の例では、「日付」「金額」を入れれば税込金額が帰ってきます。

'2019/09/01',  1000  → 1080

'2019/10/01,   1000  →    1100

そうした「税率計算してくれる箱」「学生の情報を登録してくれる箱」「店舗の新情報を追加してくれる箱」とかをあらかじめ作っておけば、

金額いくら! 日付いつ!、 名前は〜 番号は〜、 商品名は〜 単価は〜

と引数だけ箱に入れてやればあとは自動(あらかじめ設定した処理)で加工して完成してくれます。

 

雛形:

IF  EXISTS ( SELECT * FROM sys.objects  WHERE  object_id  =  OBJECT_ID

(N'[dbo].[ストアド名] )  AND  TYPE  in  (タイプ名)

 

BEGIN

    DROP   PROCEDURE  [dbo].[ストアド名]

END

GO

 

CREATE PROCEDURE   [dbo].[ストアド名]

    @引数 データ型 = 初期値

AS

BEGIN

 処理

END

GO

 

 

TRANSACTIONやエラー処理はSELECTでは使わなくても大丈夫そうです。

UPDATEやDELETEなど途中で問題が起きたら困る処理には必要です。

 

IF EXISTS(SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[student_registration]') AND type in N'TF')
BEGIN
DROP PROCEDURE [dbo].[student_registration]
END
GO

CREATE PROCEDURE [dbo].[student_registration](
@p_id int = NULL
, @p_name varchar(50) = ''
)
AS
BEGIN
BEGIN TRY
BEGIN TRANSACTION
DECLARE @error_set table (
id int NULL
, message varchar(50) NULL
)

IF ISNULL(p@_id, 0) < 1
BEGIN
INSERT INTO @error_set(
id
, message
)
SELECT
1
, '学生番号が不正です'
END
ELSE
BEGIN
IF EXISTS(
SELECT students.country_id
FROM students
WHERE (country_id = @p_id)
)
BEGIN
INSERT INTO @error_set(
id
, message
)
SELECT
2
, '学生番号(' + CAST(@p_id AS varchar(8)) + ')は登録済みです'
END
END

IF ISNULL(@p_name, '') = ''
BEGIN
INSERT INTO error_set(
id
, message
)
SELECT
3
, '生徒名は必須入力です'
END
 
IF EXISTS(
SELECT error_set.id
FROM @error_set AS error_set
)
BEGIN
GOTO EXIT_SPC
END

--更新
INSERT INTO students(
id
, name
)
SELECT
@p_id AS id
, @ISNULL(@p_name, '') AS name
 
EXIT_SPC:
IF NOT EXISTS(
SELECT error_set.id
FROM @error_set AS error_set
)
BEGIN
COMMIT TRANSACTION
END
ELSE
BEGIN
ROLLBACK TRANSACTION
END
END TRY

BEGIN CATCH
INSERT INTO @error_set(
id
, message
)
SELECT
ERROR_NUMBER()
, '[Error] :' + CHAR(13) + CHAR(10) +
'Procedure: ' + ISNULL(ERROR_PROCEDURE(), '???') + CHAR(13) + CHAR(10) +
'Line: ' + ISNULL(CAST(ERROR_MESSAGE()), 'An unexpected error occured')
ROLLBACK TRANSACTION
END CATCH

--エラー内容返却
SELECT
error_set.id AS id
, error_set AS error_set
FROM @eeror_set AS error.SET
ORDER BY error_set.id ASC
END
GO

 

 

リーダブルコード

リーダブルコード

 

プログラマのバイブル「リーダブルコード」についてまとめていきます。

 

コードは他の人(未来の自分)が最短時間で理解できるように書かなければならない。

 

行数は必ずしも短ければいいわけではなく、複雑な1行より分割されて整理された2行の方がいい。理解しやすいかがポイント。

 

表面上の改善

1、名前に情報を詰め込む

1-1 明確な単語を選ぶ

get   → どこからget ?

size  → 何のsize ?

stop  → 取り消し可能?完全消去

いずれも意味が曖昧

代替案:

例:start → launch,   create,   begin,   open

 

1-2 汎用的な名前を避ける

例:

retval(戻り値) → sum_squares

こちらの方が具体的で分かりやすい。またバグも発見しやすい。

ただ、一時的な保管だけのためであれば、retvalでも十分。

 

1-3 名前に情報を追加する

・変数+単位(例:start_ms)

・危険や注意を喚起する情報など

 

1-4 名前の長さを決める

名前は短い方が良いが、変数の使い方によって適切な長さは変わる。

・スコープが小さい → 短い名前でもOK(全ての情報が見えているので)

・省略形はプロジェクト内など短な人にしか分からないものは避けるべき。新しいチームメイトが加わった際に、見て分からないため。

・不要な単語は捨てる → ConvertToString(  ) → ToString(  ) これでもできることは一緒だから

 

1-5 名前のフォーマットで情報を伝える

アンダースコアやダッシュ、大文字を使おう

 

2、誤解されない名前

例:filter(  )

filter( "year" <= "2011")

→ 選択するのか、除外するのか分からない

→ select(  ),  exclude(  )を使おう

  

例:length

max_length

→ バイト数?文字数?単語数?

→ max_charsとかにしよう

 

例:limit

→ 以下か未満か分からない

→ 限界値を明確にするにはmax_,  min_ を使おう

 

範囲の指定:firstとlast

first = 2,  last = 4 → 2~4

包含/排他的範囲:beginとend

begin = 2,  end = 4 → 2~3

 

・ブール値

read_password = true → これから読む? OR すでに読んでいる?

→ need_passwordなどにする

ブール値の変数名は頭にis, has, can, shouldなどを使って分かりやすくしよう。

 

3、書くべきでないコメント、書くべきコメント

書くべきでない:

・新しい情報を提供するわけでもなく、ただコードの意味を書いているだけ。

・曖昧な言葉を使っている

 

書くべき:

自分の考えを記録するもの

・〜だと〜%速かった、〜だと〜なので難しい、〜よりも〜の方がコストは高いようだ

 など → 無意味なテストや無駄な確認処理などをしなくて済んだり、バグだと思われなくて済む。

・コードの欠陥にコメントをつける(〜を修正中 など)

・定数の値に対する背景

・全体像を要約するコメントや実例を書くと他人が見ても分かりやすい

 

ループとロジックの単純化

1、制御フローを読みやすくする

1-1条件式の並び順

左:調査対象の式(変化する) 右:比較対象の式(あまり変化しない)

if (length >= 10 )   ◯

if (10 <= length )   △

 

1-2 if elseブロックの並び順

肯定系、単純、目立つものを先に書くべし

if ( a == b ) {

} else {

}

if ( a != b ) {

} else {

}

 

1-3 三項演算子、do/whileループ、gotoなどを使うと読みにくくなることも。なるべく使わないようにする

 

2、巨大な式を分割する

式を簡単に分割するには、式を表す変数を使えば良い。式を変数に代入しておくと何かと便利。また、ド・モルガンの法則を使ってロジックを操作しよう。

 

3、変数と読みやすさ

変数を適当に使うと?

1、変数が多いと変数を追跡するのが難しくなる

  → コードが読みやすくならない変数を削除

2、変数のスコープが大きいとスコープを把握するのが難しくなる

  → 変数のスコープを縮める=グローバル変数を避ける

3、変数が頻繁に変更されると現在の値を把握するのが難しくなる

  → 一度だけ書き込む変数を使う

 

コードの再構築

1、無関係の下位問題を抽出する

エンジニアリングとは、大きな問題を小さな問題に分割してそれぞれの解決策を組み立てること。

例:

高レベルな目標「与えられた地点から最も近い店舗を見つける」

下位問題「2つの地点(緯度経度)の球面距離を算出する」

→この処理だけで自己完結しているので、新しい関数として抽出する。

思考プロセス:

1、高レベルの目標は何か

2、各行を見て、高レベルの目標に直接的に効果があるのかOR無関係の下位問題を解決しているのか

3、それらが相当量あれば、それらを抽出して別の関数にする

 

・汎用コードをたくさん作っておけば、複数のプロジェクトで再利用できる

 

2、1度に1つのことを

・コードは1つずつタスクを行うようにしなければならない。

コードが行なっているタスクを全て列挙する

→ タスクをできるだけ異なる関数に分割する。少なくとも異なる領域に分割する。