インストール各種

Windows10へのインストール

PHP

20210105

ダウンロード・インストール

  1. php.netのdownlodasページへ
  2. Current Stable PHPのWindows downloadsリンク
  3. VC15 x64 Non Thread SafeのZipファイルをダウンロード
    • 7.4.13
  4. 任意のフォルダーにzipファイルの内容をコピー

設定

  1. コントロールパネル…システム詳細で環境変数PATHにPHPへのパスを追加
  2. php.ini
    1. php.ini-developmentファイルかphp.ini-productionをコピーしてファイル名をphp.iniに変更
    2. extension_dir = "ext"(相対パス or 絶対パス)
    3. 必要な;extensionsのコメントを外す(あるいは確認する)
      • extension=mbstring
    4. ;date.timezoneのコメントを外して日本のタイムゾーンを指定する
      • date.timezone = Asia/Tokyo

PHPサーバーの起動

コンソールで以下を入力

サーバーの収量はCTRL-C

MySQL

202101015

ダウンロード・インストール

  1. MySQLのダウンロードページへ
  2. MySQL Installer for Windowsへ移動
  3. Windows (x86, 32-bit), MSI Installerをダウンロード
    • 8.0.22/405.2Mファイル版
  4. Developper Defaultを選択
  5. 途中、Visual C++ Redistributable for Visual Studio 2019が必要になるのでインストール(一部manualのものは無視)

 初期設定

  1. Type and Networkingダイアログ
    1. Development machineを選択
    2. TCP/IP、PORT:3306のままNext
  2. Accounts and Rolesダイアログ
    1. rootのパスワードを設定してNext
  3. Windows Serviceダイアログ
    1. Configure MySQL as a Window Serviceはチェック
    2. Start the MySQL Server at System Startupのチェックをはずす
    3. 「手動」にはなるがWindows起動後のport listeningでMySQLサーバーも動き出してしまう
    4. Standard System Accountを選択したままでNext
  4. 以降Next/Finish
  5. Connect to Serverダイアログ
    1. ユーザー名rootで設定したパスワードでcheck
    2. 問題なければ以降Nexzt/Finish

PHP設定

  1. php.iniのextension=mysqliのコメントを外す

起動確認

  1. MySQLのCommandl Line Clientを実行
  2. rootパスワードを入力
  3. 終了はexit

phpmyadmin

20200106

ダウンロード・インストール

  1. phpmyadmin.netのサイトへ
  2. 最新版のDownloadをクリックしてファイルをダウンロード
  3. サーバーのドキュメントルートにmyphpadminディレクトリーをつくり、zipファイルの内容をコピー

起動

  1. サーバー起動/実行中確認
  2. ブラウ/\ザーにURL入力してphpmyadminを起動
    • http://localhost:8000/phpmyadmin/ など
    • 最後のバックスラッシュ/は必須らしい
  3. MySQLのユーザー名とパスワードを入力

 

MySQL – チートシート

追加

レコードの追加

フィールドを指定して追加する

INSERT INTO table(col1, col2, ...) VALUES (val1, val2, ...);

※フィールド、データが1つの場合も()が必要。

フィールドの追加

ALTER TABLE table ADD col type init;

ALTER TABLE table ADD col type NOT NULL DEFAULT default;

削除

レコードの削除

条件を指定して削除する

DELETE FROM table WHERE condition;

conditionの条件に合う行をtableから削除する。WHERE句を指定しない場合はtableから全レコードが削除されてしまうので注意。

全レコードを削除する

DELETE FROM table;

フィールドの削除

ALTER TABLE table DROP FROM col;

ユーザーの追加

CREATE USER 'user'@'host' IDENTIFIED BY 'password';

検索・抽出

SELECT文を使う。SELECT文では()は不要。

列を選択して全レコードを抽出

全ての列を選択して全レコードを抽出する

SELECT * FROM table;

列を指定して全レコードを抽出する

SELECT col1, col2, ... FROM table;

条件によるレコード抽出

数値条件

SELECT col1, col2, ... FROM table WHERE col <op> num;

演算子<op>の種類

= 等しい
<> 等しくない
<, > より小さい、より大きい
<=, >= 以上、以下
A BETWEEN B AND C AはB以上C以下
A IN (val1, val2, ...) Aはリストの要素val1, val2, …の何れか
S LIKE 'string' 文字列Sが’string’に合致

文字列条件

SELECT col1, col2, ... FROM table WHERE col LIKE str;

ワイルドカードの種類

% 0文字以上の文字列
_ 任意の1文字(半角・全角を問わない)

※後方一致、部分一致は処理速度が遅い。

論理演算子

! a, NOT a aの否定
a AND b, a && b aかつb
a OR b, a || b aまたはb
a XOR b aとbの排他論理和

データの変更

条件に合うレコードの指定したフィールドを変更

UPDATE table SET col = new_value WHERE condition;

WHERE句をセットしないと全レコードのデータが変更されてしまうので、基本的にWHERE句でレコードを絞り込む。

ソート~並べ替え

SELECT col1, col2, ...
FROM table ORDER BY col ASC/DESC;

colのデータで昇順/降順に並べ替えた結果を返す。

結合

内部結合

JOIN~2つのテーブルの内部結合

SELECT table.col, ...
FROM table1
JOIN table2 ON table1.col1 = table2.col2;

  • table1のcol1とtable2のcol2が等しいレコードのみが両テーブルから抽出されて結合される。

JOIN~3つのテーブルの結合

SELECT table.col, ...
FROM table1
JOIN table2 ON table1.col1 = table2.col2
JOIN table3 ON table2.col2 = table3.col3;

  • tabe1とtable2を内部結合
  • その結合結果とtable3を内部結合

外部結合

LEFT JOIN

SELECT table.col, ...
FROM table1
LEFT JOIN table2 ON table1.col1 = table2.col2;

  • table1のすべてのレコードと、table2のレコードのうちcol2がtable1のcol1に等しいレコードが抽出され結合される
  • table1にはあるがtable2にはないレコードのtable2.col2の値はnullになる

RIGHT JOIN

SELECT table.col, ...
FROM table1 RIGHT JOIN table2 ON table1.col1 = table2.col2;

  • table2のすべてのレコードと、table1のレコードのうちcol1がtable2のcol2に等しいレコードが抽出され結合される
  • table2にはあるがtable1にはないレコードのtable1.col1の値はnullになる

演算

COUNT~レコード数のカウント

SELECT COUNT(*) FROM table;
SELECT COUNT(col) FROM table;

*で指定した場合はnullもカウント、フィールドを指定した場合はnullはカウントされない(他のフィールドも書くとそれらは1レコード目の値となる)。

グループ化

SELECT col, function(col), ... FROM table GROUP BY col;

GROUP BYで指定したフィールドの内容によってレコードをグループ化する。

  • フィールド指定の場合はグループ先頭のフィールドが抽出される
  • フィールド関数指定の場合はグループごとに関数が適用される

Tips/Troubleshooting

エイリアス

SELECT ... FROM table AS alias;

FROMJOINでテーブルを指定する際にエイリアスを定義し、それより前のSELECTでもエイリアスを使うことができる。以下は2つのテーブルの内部結合の例。

また、フィールドにエイリアスを定義できる。フィールド演算結果にエイリアスを定義すればフィールド名として扱われる。

SELECT COL AS alias FROM ...

エイリアスを定義した場合、元の名前は使えなくなる。

サブクエリー

SELECT alias.col, ... FROM (SELECT ... FROM ...) as alias;

SELECTによるクエリーをサブクエリーとして親のSELECTの検索対象とする場合は、サブクエリーにエイリアスが必要。このときサブクエリーのSELECTの要素にエイリアスを定義して親のクエリーで参照可能。

空白を含むフィールド名

フィールド名に空白が含まれる場合はバッククォートで囲む。

SELCT `COL 1`, `COL 2`, ... FROM ...

 

HTML5 – select~リスト選択

概要

select要素は、セレクトボックス、リストボックス、ドロップダウンリストなどと呼ばれ、複数項目の中からユーザーが1つあるいは複数の項目を選択し、スクリプトがそれを利用する。

たとえば上のselect要素は、HTMLでは以下のように書いている。select要素はoption要素を項目分だけ子要素に持つ。option要素のvalue属性は、スクリプトから参照されたときに得られる値。

属性

multiple

select要素にmultiple属性を指定すると、複数要素を選択できるようになる。多くのブラウザーでは形状がリストボックスになり、CTRLキーやSHIFTキーを押しながら2つ以上の要素を選択可能となる。

selected

option要素にselected属性を付けると、その選択肢が選択状態になる。multiple属性を指定しない場合に複数のoption要素にselectedを指定した場合、最後に近い方の要素が選択される。

multiple属性を指定した場合は、selectedを指定したすべてのoption要素が選択される。

実装例

 

JS/ES – 列挙型(enum)

JavaScriptにはビルトインのenum型はないが、連想配列で似たような表現ができる。

こうすると2値のフラグ以外の状態表現なども可能になり、switch文も見やすくなる。

 

JS/ES – interval

概要

WindowOrWorkerGlobalScopesetInterval()メソッドは一定間隔で関数を実行し、clearInterval()メソッドはこれを停止する。

書式

timer_id = setInterval(function, interval);

clearInterval(timer_id);

function

一定時間間隔で実行させる関数を指定する。
interval
functionを実行させる時間間隔をミリ秒単位で与える。

setInterval()は、戻り値として実行中のタイマーのidを整数で返す。clearInterval()の引数にこのタイマーidを指定して、実行中のタイマーを停止させる。

実行例

以下の例ではページに1つのp要素と2つのボタンを配置する。

startボタンを押すとカウントが始まり、1秒ごとに増加するカウンターの値がp要素に表示される。

stopボタンを押すとカウントアップが停止される。

 

 

JS/ES – イベント登録のタイミング

概要

オブジェクトにイベントリスナーを登録する場合、対象オブジェクトの生成とリスナー登録の前後関係に留意しなければならない。

失敗例

まず失敗例。以下のコードはボタンをクリックしても動作しない。

 

なぜなら、head要素でbodyが読み込まれる前にid=”button”の要素を読み込もうとするが、その段階でまだ対象となるbutton要素は読み込まれていないからだ。

その後bodyでbutton要素が配置されるが、そのときにはリスナーを登録しようとして失敗しているので、結局button要素にはリスナーは登録されていない。

事実検証画面で確認すると、”Uncaught TypeError: Cannot read property ‘addEventListener’ of null”となっていて、リスナーを登録しようとしている要素がnullだとなっている。

改善例1~後置

以下は、button要素が配置された後にスクリプトを実行するように、script要素の位置を後ろに異動したもの。この場合はエラーにはならず、ボタンを押せば無事ダイアログが表示される。

改善例2~onload

以下の例は、スクリプトをhead要素に置いたままで正常に実行する例。

リスナー登録の部分をwindow.onloadのリスナーとして定義することで、ページの読み込みが完了した後にwindow.onload()が実行され、その内容としてリスナーの登録が行われる。

この方法は、JSのコードを別ファイルとしてheadで読み込むような際にも有効。

改善例2’~windowリスナーの追加

もう一つの改善例は、windows.onload()メソッドをオーバーライドする代わりに、windowloadイベントに対するリスナーを追加するもの。

これは先のwindow.onload()のオーバーライドと同じ効果を持ち、ボタンには適切にリスナーが登録される。

 

JS/ES – ユーザー定義関数

概要

ユーザー定義関数(user-defined function)は、関数名、引数、戻り値を指定して定義し、プログラム中で呼び出す。

関数定義

引数なし・戻り値なし

関数の中で必要な処理だけを行う。

引数あり・戻り値なし

与えられた引数に基づいて実行。

引数あり・戻り値あり

与えられた引数に基づいて実行し、その結果が戻り値として返される。

関数定義の巻き上げ

関数定義は実行の後に書いてもよく、実行時に定義のみがプログラム先頭に巻き上げられる。

 

Tips – リストのマーカーを画像に

list-style-imageによる方法

直感的で簡明な方法。ただしマーカーの画像の位置やサイズの調整が細やかにできない難点がある。

HTML

CSS

背景画像による方法

手数が多くなるが、画像の位置やサイズの調整を細やかに調整できる。大まかな手順は以下の通り。

  • ulで
    • list-styleを消す
    • マーカーを含めた適切なインデント位置にするため、paddingを設定する
  • liで
    • backgroundやbackground-imageで画像ファイルを読み込む
    • no-repeat指定
    • positionは左からの距離と上からの距離が標準
    • マーカーとテキストが重ならないようにpaddingを設定

HTML

CSS

 

Tips – 間にだけ仕切り線を引く

概要

たとえば縦に並んだリストの要素間だけに横の境界線を引いたり、横に並んだ要素の左右以外の間にだけ縦の境界線を引きたい場合。

隣接セレクターを使う方法

以下の例は、li要素に対して隣接セレクター(隣接兄弟結合子:adjacent sibling combinator)を利用している。

HTML

CSS

隣接セレクターは、セレクターAとセレクターBを'+'結合子でつなぐ。そうすると、BのうちAの直後に置かれたもののみにスタイルが適用される。

上の例では、先頭のli要素にはその前のli要素がないのでスタイルが適用されない。2番目以降のli要素には直前のli要素があるので上線が引かれる。その結果、最初のli要素の上側と最後のli要素の下側には線が引かれず、li要素間にのみ線が引かれることになる。

なお上の例では、

  • adjacentクラスの中のli要素にのみ対象としている
  • ブロック要素であるliの中にインライン要素のspanを置き、そのspanに対して上線を引いている

疑似クラスを使う方法

疑似クラスを使って以下のようにしても実現できる。

  • 全ての要素に上線を引く
  • 最初の要素だけ境界なしとしてオーバーライド

HTML

CSS

この方法は、一旦全要素に線を引いてから1つ目を消すという2度手間になっている。

なお、上線とfirst-childの代わりに下線とlast-childでも同様のことが実現できる。

クラスを使う方法

ブラウザーによって隣接セレクターや疑似クラスが使えない場合は、最初か最後のli要素にクラスを指定して、疑似クラスと似たような方法で線を消す。

 

 

CSS3 – 疑似クラス

概要

疑似クラス(phseudo classes)は指定したセレクターの要素に対して、各疑似クラスの条件に合致した場合のみスタイルを適用する。

書式

[セレクター]:[疑似クラス名] { ...}

セレクターはタグの要素名やクラス名の組み合わせ。

コロンは1つ。

主な疑似クラス

:hover

指定したセレクター上にマウスカーソルが乗っている間だけスタイルを適用する。

HTML

CSS

:first-child/:last-child

複数の同じ親に属する要素群のうち最初の要素のみスタイルを適用する。

HTML

CSS

:nth-child()

nth-childは引数をとり、同じ親に属する要素群のうち引数の条件に合致するものにスタイルを適用する。

nth-child(i)

i番目の要素にスタイルを適用する。iの開始値は1。

以下の例では2番目のアイテムのみ赤色になる。

HTML

CSS

even/odd

引数にeven/oddを指定すると、要素群のうち偶数番目/基数番目の要素にスタイルが適用される。

以下の例では、2番目、4番目、6番目のアイテムが青くなる。

HTML

CSS

関数形(xn+y)

以下の例では、3n+1の指定に対して、3×0+2=2、3×1 +2=5、3×2+1=7番目の要素に下線が引かれる。

HTML

CSS