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使いますと書いておきましょう。
2、好きなアイコンを選ぼう
使う準備ができたので、早速使いたいアイコンを探しましょう。
こちらはfont awesomeのサイトで探せます。
下記参照
3、好きな場所にアイコンを使おう
最後にHTMLの任意の場所に、コードを書きましょう。
<i class = "fas fa-名前><i>
今回はsaveという名前のアイコンを使いました。
以上がfont awesomeの基本的な使い方。
また、font-awesomeは大きさなど細かい部分も調整できるので、また今度紹介します。
JavaScript 基本の文法
目次:
1、基本的な文法
2、文字列と数値
3、変数
4、オブジェクト
5、条件判定のための型と式
6、関数
1、基本的な文法
・文の終わりにはセミコロン
・変数
変数の定義
var 変数名;
変数に値を代入
変数名 = 代入する値
変数の使い方は2通り
1、変数を定義してから値を入れる
2変数を定義すると同時に値を入れる
1
2
値の更新:
変数の一括定義
変数にはどんなデータでも入れられる
2、文字列と数値
文字列
文字列はシングルクオテーション(' ')またはダブルクオテーション(" ")で囲む。
文字列の結合
数値
クオートは不要。
四則演算
自分自身に足し算する場合は?
↓
以下のようにもできる
X++は、X = X +1と同じ。
反対に引き算は、Xーー
数値を文字列で計算してしまうと?
3、変数
配列では、複数のデータをまとめて扱うことができます。
配列を使わない例:
配列を使う例:
配列の操作
配列を作ると、時自動的に値にインデックス(番号)が割り当てられます。
インデックスは0番から始まるので、1つめの要素のインデックスは0番になります。
配列の要素を数えるときはlength
インデックスは0から始まるのでした。
2番目の要素を取りたいときは1を、3番目の要素を取りたいときは2を指定する、つまりインデックスから1を引けばいいですね。
ということは、
最後の要素を取りたいときは・・・
インデックスの数 ー 1をすればいい。
4、オブジェクト
配列では、同じようなデータをまとめることができましたが、異なるデータをまとめることができませんでした。オブジェクトでは異なるデータをまとめることができます。
オブジェクトの定義
{プロパティ名1:値1, プロパティ名2:値2・・・};
オブジェクトを使わない例:
下記も同じですが、見やすさを重視して上記のような書き方がオススメです。
オブジェクトの操作
オブジェクト名 . プロパティ名
入れ子になっているオブジェクトのプロパティの値も取得できます。
下記は、personオブジェクトのaddressのポストコードを取得
値の更新
プロパティの追加
5、条件判定のための型と式
論理型(真 OR 偽)
比較演算子
==、!= と ===、!==の違い(!=はNOT)
==、!= は片方が文字列、もう片方が数値でも同じ数字であればtrue
===、!==は型まで一致していないとtrueになりません。
条件式
if(条件式){
処理
}
論理演算子
!「NOT」
&&「かつ」
| | 「または」
条件分岐(if〜else文)
繰り返し
while文
i++で更新してあげないと無限ループになってしまうので、忘れずに書きましょう。
for文
whileと同じ繰り返し文。whileはいろんな繰り返しを柔軟に書けますが、for文は単純な処理を「何回繰り返す」文を簡潔に書けます。
for(初期化式; 条件式; 更新式){
文;
};
配列の繰り返し
6、関数
function 関数名(引数、引数・・・){
文;
}
オブジェクトのプロパティとして定義する
引数
戻り値
一つ前の「引数」では、足し算した値を出力するだけでしたが、結果を返すことによって「結果を返す」ことによって帰ってきた結果を自由に使うことができます。より汎用的な関数にすることができます。
HTML / CSS 基本
HTML
headタグの内容
主に画面に表示されない情報
・画面タイトル
・記述される文字コード
・リンクタグ
・metaタグ
・CSS
<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 |
テーブル作成などの処理は省略します。
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など途中で問題が起きたら困る処理には必要です。
リーダブルコード
リーダブルコード
プログラマのバイブル「リーダブルコード」についてまとめていきます。
コードは他の人(未来の自分)が最短時間で理解できるように書かなければならない。
行数は必ずしも短ければいいわけではなく、複雑な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つずつタスクを行うようにしなければならない。
コードが行なっているタスクを全て列挙する
→ タスクをできるだけ異なる関数に分割する。少なくとも異なる領域に分割する。
IT用語まとめ 随時更新
IT用語まとめ
都度、学習用ノートにメモしていたものを一旦まとめます。
プログラミング、ネットワーク、インフラなどITに関する言葉が含まれています。
未分類のため順不同です。
また整理して、わかりやすくまとめます。
あるコンピュータープログラム(ソフトウェア)の機能や管理するデータなどを、外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約。
数式を構成する要素のうち、演算の対象となる値や定数、変数などのこと。
KVS
データの保存、管理手法の一つで、任意の保存したいデータ(値:Value)に対し、対応する一意の認識(Key)を設定し、これらをペアで保存する形式。
Webサイトの提供者が、Webブラウザを通じて訪問者のコンピューターに一時的にデータを書き込んで保存させる仕組み。
エンドツーエンド(E to E)
通信を行う二者、あるいは二者間を結ぶ経路。高度な通信制御や複雑な機能を末端のシステムが担い、経路状のシステムは単純な中継、転送のみを行う。
ポート番号
インターネットで標準的に用いられるプロトコル(通信規約)であるTCP/IPにおいて、同じコンピューター内で動作する複数のソフトウェアのどれが通信するかを指定するための番号。
プロジェクトの各工程をプロジェクト開発から終了まで「前の工程が終わらないと次の工程が始まらない」という依存関係にあるような経路。その長さがプロジェクトの期間を表す。
機器やソフトウェア、システムなどを、他と接続せず単独で使うこと。
ファイアウオール
コンピュータやネットワークと外部ネットワークの境界に設置され、内外の通信を中継・監視し、外部の攻撃から内部を保護するためのソフトウェアや機器、システムなど。
ハッシュ化
元のデータから一定の計算手順に従ってハッシュ値と呼ばれる規則性のない固定長の値を求めて、その値によって元のデータを置き換えること。
シームレス
サービスやシステム、ソフトウェアなどが、複数の要素や複数の異なる提供主体の組み合わせで構成されている時、利用者側から見てそれぞれの違いを認識・意識せずに一体的に利用できる状態。
通信事業者の公衆回線を経由して構築された仮想的な組織内ネットワーク、また、そのようなネットワークを構築できる通信サービス。
ある製品やサービスなどについて、その開発・販売元以外で、それに関連する、あるいは対応する製品を開発・販売する事業者。
同じ内容を同時に二箇所に反映すること。複数の記憶装置に同じデータを記録したり、複数の表示機能に同じ内容を同時に映し出す。
プロキシ
企業などの内部ネットワークとインターネットの境界にあり、内部のコンピューターの代理(Proxy)として」インターネット上のコンピューターへ接続を行うコンピューター。また、そのような機能を持つサーバーソフトウェア。
主に室内や建物内でコンピューターや電子機器をケーブルでつないで、通信する有線LAN(構内ネットワーク)の標準の一つで、もっとも普及している規格。
アドオン
ソフトウェアに追加される拡張機能のこと
クラスター
記憶装置の分野でHDなどのディスク状の記憶媒体をOSが管理する最小の単位。
ダッシュボード
複数の情報源からデータを集め、概要をまとめて一覧表示する機能・画面・ソフトウェア。
ダイアログ
コンピューターの操作画面で、利用者に何らかの入力を促すために表示させる領域。
ウィジット
コンピューターの操作画面を構成する何らかの機能を持った表示・操作要素。
ガジェット
ウィジットを組み合わせて作られる単機能の小さなアプリケーション。
コールバック
ある関数などを呼び出す際に、別の関数などを途中で実行するよう指定する手法。
キャスト
型変換のうち、開発者がコードを記述して明示的に行うもの。
ダンプ
記憶装置に記録された内容をまとめて表示、印刷、記録することやその内容。
情報を一定の規則に従ってデータに置き換えて記録すること。また、ある形式のデータを一定の規則に基づいて別の形式のデータに変換。
フォールバック
システムが正常に機能しなくなったら、機能制限したり、別方式に切り替えて限定的に使用を継続させる。
同じプログラムコードで様々なデータ型のデータを処理できるようにするためのもの。
識別子
フォルダ名、アカウント名などなど、特定の一つを識別するための名前、符号、数字など。
初回起動時やメニュー設定で国、地域、言語を設定できること。
オフセット
何かの位置を示す際に、基準となる位置からの差(距離、ズレ、相対位置)を表す値。
送受信されるデータの伝送単位(パケットなど)のうち、宛先などの制御情報を除いた、相手に送り届けようとしている正味のデータ本体のこと。
利用者が入力した文字データを受け取る際に、プログラムにとって特別な意味を持つ可能性のある文字や文字列を検知し、一定の規則に従って別の表記に置き換える。
シーケンス
順番に並んだ一続きのデータや手順。
スナップショット
ある時点における対象の全体像を丸ごと写し取ったもの。データベースのコピーなど。