このブログのコンセプトって○○なん、知ってた? 何それ気になる〜

【コーディング週間日報】7/18(日)〜 7/24(土)の学習

たーやま

7/18(日)〜 7/24(土)に行ったことを記載しました。

目次

7/20(火)のアウトプット

JSON

JSONからオブジェクトを生成したり、オブジェクトからJSONを変換したりできます。

const obj = {a: 0, b: 1, c: 2};
const json = JSON.stringify(obj);

console.log(json); // {“a”: 0, “b”: 1, “c”: 2};

JSON.stringify を使って、オブジェクトからJSONに変換しました。第二引数に関数や配列をとることもできます。

const obj = {a: 0, b: 1, c: 2};
const json = JSON.stringify(obj, ["a", "b"]);

console.log(json); // {“a”: 0, “b”: 1};

先ほどは a 〜 c 全ての値を取得できましたが、配列で指定することによって a, b の値だけを取得するようにしました。

オブジェクトから JSON への変換についてはこんな感じです。

今度は、JSON からオブジェクトへ変換してみましょう。

const obj = {a: 0, b: 1, c: 2};
const json = JSON.stringify(obj);

const par = JSON.parse(json);
console.log(par); // {a: 0, b: 1, c: 2};

JSON から オブジェクトへ変換したい時は、JSON.parse を使います。

オブジェクトはサーバー側へ渡すことはできないので、JSON に変換して渡すケースがあります。

そのような時に使えるので、覚えておいて損はありません。

Storage

ブラウザにデータを保存するためのオブジェクト。

厳密にいうと、Storage から生成された localStorage オブジェクトを使ってデータを保存します。

localStorage.setItem('key', 'value');

これでブラウザにデータが保存されました。

今度は値を取得してみます。

localStorage.setItem('key', '1');
const result = localStorage.getItem('key');
console.log(result); // 1

localStorage.getItem を使うことで、1 が出力されました。

Vue とは…?

JavaScript のフレームワークの一種です。フレームワークというのは、「骨組み、枠組み」のこと。

フレームワークを使用すると、ある程度簡単に高機能な実装ができるようになります。

たーやま

React とか Angular とかもフレームワークやでな。

Vue は、UI を構築するためのフレームワークです。JavaScript を用いて使えますが、ソースコードは TypeScript を用いています。

TypeScript について

Microsoft によって開発されたオープンソースのプログラミング言語のことです。

JavaScript を拡張している言語で、React や Vue, Angular などは TypeScript で記述されています。

ある程度大規模なアプリケーション開発のときに、JavaScript の代わりに用いられることが多いです。

たーやま

Sass みたいなもんか。

TypeScript の特徴としては、次の3つが挙げられます。

・JavaScript にない演算子を使える
・JavaScript に変換してから実行
・型を定義できる

これ以外は基本的に JavaScript と同じです。なので、JavaScript がある程度わかっていたら TypeScript も理解しやすいはず。

WooCommerce への理解

レスポンシブ対応

HTMLの変更は難しいので、何かあったら僕に言ってくださいね〜

つよつよ上司は、優しい文面でわたしに伝えました。そして今日、HTML を変更したくなったので上司に報告。

しかし上司はかなり多忙です。なので、すぐに連絡が来ることもあればそうでないこともあります。

連絡が来ない時は、別タスクをするか待ち時間になることがほとんど。

今回は待ちの状態になったので、少しでも PHP や WooCommerce への理解を深めようとググってみました。

ログインページのフォーム

フォーム作成用の配列があり、ここでフォームにある内容を変更できることを知りました。

<?php
$register_form_arr = array(
	array( 'layout' => 'first', 'label' => '姓', 'ex' => '', 'name' => 'billing_last_name', 'req' => true, 'type' => 'text', 'err' => '' ),
	array( 'layout' => 'last', 'label' => '名', 'ex' => '', 'name' => 'billing_first_name', 'req' => true, 'type' => 'text', 'err' => '' ),
	array( 'layout' => 'first', 'label' => '姓(ヨミガナ)', 'ex' => '', 'name' => 'billing_yomigana_last_name', 'req' => true, 'type' => 'text', 'err' => '' ),
	array( 'layout' => 'last', 'label' => '名(ヨミガナ)', 'ex' => '', 'name' => 'billing_yomigana_first_name', 'req' => true, 'type' => 'text', 'err' => '' ),
	array( 'layout' => 'first', 'label' => '郵便番号', 'ex' => '(例:123-4567)', 'name' => 'billing_postcode', 'req' => true, 'type' => 'text', 'err' => '' ),
	array( 'layout' => 'last', 'label' => '都道府県', 'ex' => '', 'name' => 'billing_state', 'req' => true, 'type' => 'select', 'err' => '未選択' ),
	array( 'layout' => 'wide', 'label' => '市区町村', 'ex' => '', 'name' => 'billing_city', 'req' => true, 'type' => 'text', 'err' => '' ),
	array( 'layout' => 'wide', 'label' => '住所詳細', 'ex' => '', 'name' => 'billing_address_1', 'req' => true, 'type' => 'text', 'err' => '' ),
	array( 'layout' => 'wide', 'label' => '', 'ex' => '', 'name' => 'billing_address_2', 'req' => false, 'type' => 'text', 'err' => '' ),
	array( 'layout' => 'first', 'label' => '電話番号', 'ex' => '', 'name' => 'billing_phone', 'req' => true, 'type' => 'text', 'err' => '' )
);
?>
たーやま

会社のものと同じではないです。漏洩するのはマズいですからね(笑)

また、次のコードでフォームを追加していることもわかります。

<?php
add_action( 'woocommerce_register_form_start', 'cs_wc_extra_register_fields' );

function cs_wc_extra_register_fields() {

	global $register_form_arr;
	$country_code = 'JP';
	$states = WC()->countries->get_states( $country_code );
	?>

	<input type="hidden" name="billing_country" id="billing_country" value="JP"  class="country_to_state" />

	<?php foreach( $register_form_arr as $item ): ?>

	<p class="form-row form-row-<?php echo $item['layout'] ?> <?php if( $item['req'] ) echo 'validate-required' ?>">
		<?php if( $item['label'] ): ?>
		<label for="reg_<?php echo $item['name'] ?>"><?php echo $item['label'].$item['ex'] ?> <?php if( $item['req'] ) echo '<span class="required">*</span>' ?></label>
		<?php endif; ?>

		<?php if( $item['type'] == 'text' ): ?>

		<input type="text" class="input-text" name="<?php echo $item['name'] ?>" id="reg_<?php echo $item['name'] ?>" value="<?php if ( ! empty( $_POST[ $item['name'] ] ) ) esc_attr_e( $_POST[ $item['name'] ] ); ?>" />

	<?php elseif( $item['type'] == 'select' ): ?>

		<select name="<?php echo $item['name'] ?>" id="reg_<?php echo $item['name'] ?>" class="state_select " data-placeholder="">
			<option value="">選択してください…</option>
		<?php
			foreach ( $states as $state_code => $state_name ) {
				echo '<option value="' . esc_attr( $state_code ) . '" ' . selected( ( $_POST['billing_state'] == $state_code ), true, false ) . '>' . esc_html( '     ' . $state_name ) . '</option>';
			}
		?>
		</select>
	<?php endif; ?>
	</p>
	<?php
	endforeach;

}
?>

そして、

dd_action( 'woocommerce_register_form_start', 'cs_wc_extra_register_fields' ); 

に着目。

関数リファレンスを見ると、こんな感じのことが書かれていました。

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

$hook:フックの名前。
$function_to_add:フックしたい関数名。
$priority:優先順位。初期値は10。
$accepted_args:フックした関数が受け入れられる引数の数。初期値は1。

つまり、woocommerce_register_form_start がフックの名前で、cs_wc_extra_register_fields はフックしたい関数名であることがわかります。

すぐ下の function cs_wc_extra_register_fields() {} によって cs_wc_extra_register_fields は定義されています。

なので、この関数が呼び出されていることがわかりました。

たーやま

超ざっくりみたら、『フォームはこんな感じで出力してね』って書いてるかと思います(間違ってたらすみません)。

パスワードを忘れた時

woocommerce/templates/myaccount/form-lost-password.php 内を参照すると、こんな感じの記述があります。

<?php do_action( 'woocommerce_before_lost_password_form' ); ?>

ということで関数リファレンスで調べてみました。

<?php do_action( $tag, $arg ); ?>

$tag:実行したいアクションフックの名前。初期値なし。
$arg:フックに付けられた関数へ送る引数のリスト。初期値は空の文字列。

この場合だと、woocommerce_before_lost_password_form というフックの名前が実行されていることがわかりました。

そしてもう一つ気になった箇所が。

 <p>
  <?php echo apply_filters( 'woocommerce_lost_password_message', esc_html__( 'Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.', 'woocommerce' ) ); ?>
 </p>
<?php // @codingStandardsIgnoreLine ?>

<p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
 <label for="user_login">
  <?php esc_html_e( 'Username or email', 'woocommerce' ); ?>
 </label>
 <input class="woocommerce-Input woocommerce-Input--text input-text" type="text" name="user_login" id="user_login" autocomplete="username" />
</p>

読み解くと、woocommerce_lost_password_message がフィルターフック名。

「esc_html__(…) )」内が woocommerce_lost_password_message が変更できる値だということが理解できました。

パスワード忘れた時は、まずユーザー名かアドレス入れて欲しいってメッセージを表示させ、label 欄にユーザー名かアドレスが入力できるようにしています。

ちなみに、

apply_filters( 'woocommerce_lost_password_message', esc_html__( 'Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.', 'woocommerce' ) );

について調べたこともまとめておきます。

<?php apply_filters( $tag, $value, $var ... ); ?> 

apply_filters は、フィルターフックに追加した関数を呼び出す時に使います。

$tag:フィルターフック名。初期値はなし。
$value:$tag で登録されたフィルター関数が変更できる値。初期値はなし。
$var:フィルター関数へ渡す追加の関数。複数指定OK。ただし値は返さない。初期値はなし。

まとめ

上司に HTML の編集をお願いしている間に WooCommerce や PHP について分解して調べました。

始めは象形文字のように何を書いているのかがわかりませんでしたが、落ち着いてよく見直すことで、僅かながら理解できました。

自走せずにいつまでもおんぶに抱っこというわけにはいきません。ただ、まだまだ役立たずな場面が多いことも事実。

少しでも役に立てる場面が増えるように、時間がある時はググりまくって調べます。

最後に、今回参考にした記事は以下の通りです。

(▼ WooCommerce 関係の記事 ▼)

(▼ フックについての理解 ▼)

(▼ 関数リファレンス ▼)

7/22(木)のアウトプット

Vue をビルドするための環境構築

Vue のソースコードをビルドするためには、以下3つが必要です。

・Git
・Node.js
・Yarn

それぞれをインストールしていきましょう。

Git のインストール

から Git をインストールしていきます。

たーやま

インストールについては、下記の記事がわかりやすい印象を受けました。

インストーラーを使う方法Homebrew でのインストール方法が載っています。

Node.js のインストール

Node.js の公式サイトです。ダウンロードするときは、推奨版をダウンロードしましょう。

たーやま

最新版は機能が不安定なためです。

Yarn のインストール

INSTALL YARN」を選択し、インストールをしてください。

Homebrew 経由でインストールできるので、Git で紹介した記事を使うと楽でした。

最後に、ターミナルを開いて Git と Node.js と Yarn の挙動を確認して終わりです。

VS Code でターミナルを開き(Ctrl + Shift + @)、「git」、「npm -v」、「yarn -v」と記述します。

git コマンド一覧、Node.js と Yarn はバージョンが出てきたら問題ありません。

git clone で Vue をダウンロードする

上記の GitHub からコピペをして、ターミナルから git clone を使って貼り付けます。

「git clone (コピペしたURL)」と入力すると、インストールされます。

Vue のビルド

ターミナルで「yarn install」と記述します。

もし階層があっていない場合は、「cd vue-next」と記述してから「yarn install」を記述してください。

インストールが終わったら、「yarn run build」と記述すると、node の scripts/build.js が実行されます。

しばらくして、「Done」の文字が表示されていたらビルド完了です。

Reactivity

ある変数の変更を行うと、その変更の影響を受けて自動的に値が変更されるものです。

let obj = { a: 0 }
obj.a = 1;
console.log(obj.a); // 1

この場合は意図的に a の値を変更して出力しているため、1が出力されています。

Reactivity の場合は、変更したタイミングで自動的に呼びだすことができます。

import { effect, reactive } from './reactivity.esm-browser.js'
let obj = reactive({ a: 0 });
effect(() => {
    console.log(obj.a);
});
obj.a = 1;

// 実行結果は0, 1

vue-next 内にある reactivity.esm-browser.js  で定義されている effect, reactive を読み込みました。

そして reactive の関数を実行するときにオブジェクトを渡すようにします。

値を変更することで、effect に登録した関数が自動的に実行されるようになります。

7/24(土)のアウトプット

Udemy の講座も勉強しましたが、それよりも今後についてをまとめることにしました。

めっちゃ良さげなサイトを発見!

JavaScript の学習をある程度進めていたのですが…

たーやま

聞いて書いて終わりじゃなくて、自分でパーツだけでも実装していきたいなぁ…。

と思うようになりました。

そこで、今まで jQuery で実装してきたものを JavaScript で実装してみようと思い始めました。

たーやま

まぁ jQuery も JavaScript やけどな。笑

ググって調べているところに、なにやら良さげなサイトを発見。

それがこちらです。

タダでこれだけ練習できるのはアツい。しかも案件ではないので、自分のやりたいように実装できます。

ハードな講座を終わらせられそうな今、自分でどこまで通用するのかを試してみます。

たーやま

練習前にいくつかやりたいことあるので、そのあと行っていきます。

ハンバーガーメニューの実装

いつも jQuery で行っていたハンバーガーメニューの実装ですが、実装練習をかねてJavaScript で行うことにしました。

たーやま

途中で眠くて切り上げたので、終わったらコード載せますね〜

さまざまな記事を調べていますが、成果が出ているように思います。単にコピペで終わっていたものが、理解できるほどになりました。

細々とでも、途中でサボってしまっていても、続けていてよかったです。

ここで、日記を逐一見てくださっている変態で物好きの方で、努力が実らずに落ち込んでいる方がいたら送ります。

努力は人に見せるもんじゃないねん。
見せる努力なんて承認欲求でしかないんや。
人は見んでいい。自分だけを見たらええねん。
お前が努力の天才ってことを、俺は知ってるで。

10年以上仲良くしてくれている親友が、落ち込んでいたわたしに送ってくれた言葉です。

Web制作を本気で辞めようとしていましたが、この言葉に救われました。

たーやま

運転中でしたが、ちょっと泣きました。笑

たかだか JavaScript がほんの少しわかる程度になったくらいで大袈裟ですが、誰かを励ませられたら嬉しいです。

今週のまとめ

Udemy で学習している JavaScript の講座は、来週には1周目を終わらせられるところまできました。

ただ、1周して理解できるような知識でもないので、2周目は理解ができなかったところを中心に進めていこうと思います。

それと並行して TypeScript か Vue.js もやってみたいです。Angular や React, Vue のおおもとは TypeScript と聞きましたので。

でも、Git や PHP ももっと詰めていきたいところ。欲が深まりますね。

たーやま

まぁそんな焦らんと、少しづつやっていこう。

来週も引き続き精進していきます。最後までご覧いただき、ありがとうございました!

また遊びにきてくれることを、心よりお待ちしております。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

大阪出身26歳。宮古島の制作会社に勤めています。
コーディングとデザインにシバかれてます。

生き物や自然が好きやけど、特にクワガタムシが好き。
他、チャリとか釣りとか筋トレとかも好き。

目次
閉じる