kyoagunのブログ

技術系、PdMについてを書いていこうと思います。

stateとpropsの違い、stateをどこに配置するかの決め方

reactのコンポーネントは基本的にオブジェクトという考え方です。
※コンポーネント名は常に大文字で始めること。


stateとpropsの違いは、

stateは完全にコンポーネントによって管理されたプライベートなものです。
propsは、コンポーネントに渡す引数です。

コンポーネントのライフサイクル:

・マウント (mounting)
・アンマウント (unmounting)

マウント (mounting)とは
DOM として描画されるときです。

アンマウント (unmounting)とは、
DOM が削除されるときです。

アロー関数とは、

通常関数との違いは、


stateの特徴:

①state の更新は非同期に行われる可能性がある
stateを直接変更しないこと、stateを直編集できるのは、コンストラクタ内に限定する。
②state の更新はマージされる
③データは下方向に伝わる(トップダウン/単一方向とも呼ばれる)

setStateを使う際に、prevStateとは


■stateを決める
1.親からpropsを通じて与えられたデータでしょうか?もしそうなら、
 それはstateではありません。
 
2.時間経過で変化しないままでいるデータでしょうか?もしそうなら、
 それはstateではありません。
 
3.コンポーネント内に他のpropsやstateを使って算出可能なデータでしょうか?もしそうなら、
 それはstateではありません。
 
■stateをどのコンポーネントに配置するかを決める手順
1.その state を使って表示を行う、すべてのコンポーネントを確認する

2.共通の親コンポーネントを見つける(その階層構造の中で、ある state を必要としているすべてのコンポーネントの上位にある単一のコンポーネントのことです)

3.共通の親コンポーネントか、その階層構造でさらに上位の別のコンポーネントが state を持っているべきである

4.もし state を持つにふさわしいコンポーネントを見つけられなかった場合は、state を保持するためだけの新しいコンポーネントを作り、階層構造の中ですでに見つけておいた共通の親コンポーネントの上に配置する

いろいろな記号の読み方

よく使う記号ですが、日本語の読み方が、よくわからなくなって、調べることがありました。

そのため、こちらにまとめていこうと思います。

記号読み方
カンマ
セミコロン
ビックリマーク
はてな

2021年12月8日時点作成

今後も更新していく予定です。

ベーシック(Basic)認証

サイトの開発でよくある、特定のユーザー限定ページを公開したいという
要望があります。その際に、よく使うのは、ベーシック認証です。

ということで、今日はベーシック認証の作成方について紹介したいです。

ベーシック認証を実施する際に、二つのファイルを作成する必要があります。

その1).htaccess

.htaccessファイルは、ベーシック認証でアクセス制限をかけますよ。
/home/foo/bar/.htpasswdで定義されたユーザーしかアクセスできないですよと
いう内容を記述します。

<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>
Options -Indexes
AuthUserFile /home/www/html/foo/bar/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user 
order deny,allow

その2).htpasswd

.htpasswdファイルでは、下記の形式で記述します。

ユーザーID:パスワード(暗号化されたパスワード)

ユーザーID:パスワード(暗号化されたパスワード)
例)user1:H5eYZFgAyh.E2

ベーシック認証については、こちらのツールを使ったほうが簡単に設定ファイルを
生成できます。

http://www.htaccesseditor.com/#a_basic

https://sampledomain.com/foo/barにアクセスると、
ユーザーIDとパスワードが聞かれますので、ユーザーIDと
暗号化されていないパスワードを入力すればアクセスできます。

以上です。

Eccube4.0系で会員情報と注文情報をクリアする方法

Eccube4.0系で会員情報と注文情報をクリアする方法について紹介します。
開発環境で、開発して本番にアップする際に、テスト用の会員情報と注文情報を
クリアしたいということがよくあります。そういう場合に、本記事を参照にできたらうれしいです。

■会員情報のクリア

delete from dtb_cart_item;
delete from dtb_cart;
delete from dtb_customer
ALTER TABLE dtb_customer AUTO_INCREMENT = 1;

■注文情報のクリア

delete from dtb_order_item;
delete from dtb_mail_history;
delete from dtb_shipping;
delete from dtb_order;
ALTER TABLE dtb_order AUTO_INCREMENT = 1;

以上です。

htaccessで特定のファイルをブラウザからアクセスできないようにする

htaccessで特定のファイルをブラウザからのアクセスを制限する方法について
紹介します。

htaccessがほんとに便利で使いやすいですね。
下記のように書けば、「.htaccess」、「.htpasswd」と「.txt」が
ブラウザからのアクセスを遮断できてしまいます。

<Files ~ "\.(htaccess|htpasswd|txt)$">
  deny from all 
</Files>

以上です。

htaccessを利用して固定のIPアドレスからのアクセスを許可する

実務で、ある投稿機能があり、投稿されたファイルがサーバー上に
保存される。社内からのみアップされたファイルを見れるようにしたいという要望が
あった。そのため、htaccessを利用した実装を紹介したい。

htaccssの中身

<Files *.pdf>
order deny,allow
deny from all
allow from 10.90.1.72 
</Files>

※「10.90.1.72」:許可したいIP。「10.90.1」からのIPを許可したい場合は、「10.90.1.72」を「「10.90.1.」に変更する。

htaccssファイルをブラウザから見れるように下記のようにする

<FilesMatch "^\.(htaccess)$">
order allow,deny
deny from all
</FilesMatch>

以上です。

PHPでPostgreSQLのトランザクション処理を実装する方法

よく使う実装方法になりますので、今回はPHPPostgreSQLトランザクション処理を紹介します。

ソースコード

$host = 'localhost';
$dbName = 'db_name';
$user = 'user';
$pass = 'password';

$connectInfo = "host={$host} dbname={$dbName} user={$user} password={$pass}";
$connection = pg_connect($connectInfo);

if ($connection === false) {
    return '接続失敗エラー';
}

pg_query("BEGIN"); //トランザクション開始

$sql = 'select * from table';

$selectResult = pg_query($connection, $sql);

if ($selectResult === false) {
    pg_query("ROLLBACK");
}

$result = pg_fetch_all($selectResult);

// 結果を出力
print_r($result);

pg_query("COMMIT");
pg_close($connection);

トランザクションの開始方法

pg_query("BEGIN");

※これがないと、自動コミットになってしまう。特にテーブルに対する変更(INSERT、UPDATE、DELECT)が要注意だ。

ロールバック方法

pg_query("ROLLBACK");

※「pg_query("BEGIN");」がないと、これが効かない。

コミット

pg_query("COMMIT");

トランザクション処理が完了したという意味である。

トランザクション処理が完了したら、コネクションのお始末をしたほうがいいでしょう

pg_close($connection);

以上です。