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

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

たーやま

4/4(日)〜 4/10(土)に学習したことをまとめます。

目次

4/4(日)のアウトプット

HTML で PHP を出力

明日の仕事についての情報を調べたり、ローカルについて調べたりしていました。

その中でわかったことは、HTML で PHP を出力するときは「.htaccess」をいじる必要があるということ。

AddType application/x-httpd-php .php .html

コードの一番上にでも記述すると、HTML でも PHP が動作するようになります。

たーやま

あと画像の表示とデータベースの連結ができたら…

モデレートの設定

コーディングに関連して、ブログでの内部リンクにおけるモデレートがうざい時の設定です。

functions.php」に、以下のコードを追記しましょう。

function no_self_ping( &$links ) {
    $home = get_option( 'home' );
    foreach ( $links as $l => $link )
        if ( 0 === strpos( $link, $home ) )
            unset($links[$l]);
}
add_action( 'pre_ping', 'no_self_ping' );

// functions.php
たーやま

万が一のためにバックアップ取っておいてくださいね。

ただ、ミスっても責任は取れません。

なので、コードを触ったことがない人は注意してください。

下手しログインできなくなるので…(笑)

逆にコードを触っている人は問題ないかと思います。

もしバックアップ取ってなかったら、FTP経由で自分が記載したコードを削除し、上書きをしたら直ります。

4/5(月)のアウトプット

4/1(木)のアウトプットで、ローカルの作成で一部解決しなかった問題がようやく解決しました。

早速まとめていきます。

1)データベースのところは合っていた

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', '1)で作成したデータベース名');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'root');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'root');

/** MySQL のホスト名 */
define('DB_HOST', 'localhost');

/** データベースのテーブルを作成する際のデータベースの文字セット */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define('DB_COLLATE', '');

// MAMPの場合は上記のユーザー名、パスワード、ホスト名であってるはず。
// wp-config.php

こちらについては合っていました。しかし、ある凡ミスをしていたのです。

2)表示させる URL が間違えていた

トップページでは「http://localhost:8888/XXXXX」という風にURLが表示されていました。

しかし、今回見たいページでは「http://localhost/XXXXX/◯◯」となっていました。

:8888」が抜けていたのです。

たーやま

なんという凡ミス…w

これで表示自体は完了。

ちなみに前回の以下の部分…

// ローカル開発環境のURL
define('WP_HOME', 'http://localhost/XXXXX');
define('WP_SITEURL', 'http://localhost/XXXXX');

// XXXXX は、フォルダの名前
// wp-config.php

こちらについては、「http://localhost/XXXXX」を「http://localhost:8888/XXXXX/◯◯」に変更しました。

// ローカル開発環境のURL
define('WP_HOME', 'http://localhost:8888/XXXXX/◯◯');
define('WP_SITEURL', 'http://localhost:8888/XXXXX/◯◯');

// XXXXX は、フォルダの名前
// 〇〇 は、トップ以外のページ(blog 欄やnews 欄など)
// wp-config.php

これで表示できるようにはなりましたが、画像などがうまく表示できていません。

3)画像などのスタイルを適応させる

header もしくは functions.php できかせている CSS のパスを合わせます。

たーやま

今回のサイトは、header に CSS を適応していました。

<link rel="stylesheet" type="text/css" href="<?php echo home_url() ?>/common.css">
<link rel="stylesheet" type="text/css" href="<?php echo home_url() ?>/style.css">

// header.php

このとき、ディレクトリが合っているかを確認しましょう。

たーやま

本番の環境と違う階層になってるかもしれんからね。

4)Notice: Undefined variable: の消し方

さて、CSS をうまく効かせたされたところで、画像のような文字がでてきました。

これを画面上に表示させないようにします。

functions.php」に、以下のコードを追加していました。

ini_set('display_errors', 0);

// functions.php

場所は<?php」のすぐ下です。

これで「Notice: Undefined variable: 」が消えました。

最後に「.htaccess」をいじって完成です。

5).htaccess でリンクのクリックを有効に

今回いじっている部分は、下層ページ。

下層ページから投稿記事に遷移するために、「.htaccess」を触ります。

元々の .htaccess は以下の感じでした。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /〇〇/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /〇〇/index.php [L]
</IfModule>

RewriteBase」と「RewriteRule」を触ります。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /XXXXX/〇〇/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /XXXXX/〇〇/index.php [L]
</IfModule>

これで 4/1(木)からの悩みを解決できました。

ものの20分近くでやり遂げていた上司がめっちゃカッコ良かったです。

たーやま

極めるってすげぇな…。

と思った日でした。

4/6(火)のアウトプット

LP のコーディング練習で書いたコードと、その他のアウトプットをまとめます。

たーやま

そのうち Github にもあげよ。

では参りましょう。

長方形の1辺に斜線を入れる

長方形 + 擬似要素で作成しました。

<div class="header_line">
 <div class="header_line_bg">
 <div class="header_line_bg_txt">ほげほげほげ</div>
 </div>
</div>
.header {

    &_line {
        display: flex;
        align-items: center;
        height: 32px;
        line-height: 32px;

        &_bg {
            position: relative;
            background: #ff0000;
            max-width: 300px;
            width: 100%;

            &::before {
                position: absolute;
                right: 0;
                border-style: solid;
                border-width: 0 0 32px 16px;
                border-color: transparent transparent #000 transparent;
                content: '';
             }
        }
   }
}

これでおおよそ画像のような実装ができます。

擬似要素で三角形を作り、背景色と同じ色にして長方形と重ねる感じです。

あと、CSS で三角形を作成できるサイトもご紹介しましょう。

めんどくさかったらこれで三角形はイチコロです。

三重線の作成と斜線を入れる

二重線は「border: double;」を使えば簡単に作成できます。

ほな三重線はどうすんの?

って感じですが、今回も擬似要素が大活躍しました。

<div class="header_line">
 <div class="header_line_border">
  <div class="header_line_border_three"></div>
 </div>
</div>
.header {
 &_line {
  &_border {
            position: relative;
            margin-left: auto;
            width: 100%;
            max-width: 300px;

            &::before {
                position: absolute;
                top: -1px;
                border-style: solid;
                border-width: 15px 27px 0 0;
                border-color: #000 transparent transparent transparent;
                z-index: 2;
                content: '';
            }

            &_three {
                position: relative;
                border-bottom: 1px solid #ff0000;

                &::before {
                    position: absolute;
                    width: 100%;
                    max-width: 300px;
                    height: 5px;
                    border-bottom: 1px solid #ff0000;
                    content: '';
                }

                &::after {
                    position: absolute;
                    width: 100%;
                    max-width: 300px;
                    height: 10px;
                    border-bottom: 1px solid #ff0000;
                    content: '';
                }
           }
       }
   }
}

まず、「header_line_border」と擬似要素「before」で、長方形 + 斜線パターンを作成します。

そして空タグの「header_line_border_three」で border-bottom を作成。

このタグに擬似要素「before」と「after」を使って三重線を完成させました。

 transform プロパティを詳しく

transform といくつかの関数を使えば、位置の移動、大きさの変化、回転などができます。

たーやま

スクールでは詳しく聞かんかも。わいは初めややこしく感じました。

移動をさせる translate 関数

translate 関数:第一引数はX軸、第二引数はY軸を指定します。マイナス「 – 」や「 % 」なども使えます。

transform: translate(50px, 50px);

使い方はこんな感じです。

たーやま

translateX とか、translateY って使い方もできるで。

rotate 関数で回転させる

rotate 関数:引数には「 deg 」という単位を使います。「 degree(程度、度) 」の略で「 deg 」です。

transform-origin プロパティを使うと、支点を決めることができます。

transform: rotate(50deg);
transform-origin: top right;

この場合は、「元々ある物体の左上を支点にして30度回転させる」という意味になります。

平行四辺形なら skew 関数にお任せ

skew 関数:引数には「 deg 」を使います。translate 関数と同じように、X軸とY軸を指定できます。

transform: skew(-35deg, -35deg);

こんな感じで使います。

 scale 関数は拡大・縮小をする

scale 関数:translate 関数や skew 関数と同じように、X軸とY軸を指定できます。

単位は何も指定せず、0以上の実数で指定します。

transform: scale(0.5, 2);

こうすると、元々の大きさからX軸は0.5倍、Y軸は2倍の大きさで表示されます。

transform の複数指定とその他の情報

半角スペースを入れることで複数指定できます。

transform: translateX(50%) scaleY(1.5);

また、アニメーションプロパティを使う場合は、top や left よりも transform プロパティを使う方がいいです。

アニメーションをするのに最適化されているため、top や left よりもパフォーマンスがよくなります。

たーやま

絶対やれって訳ではないで。全部 transform で指定できる訳でもないし…。

4/7(水)のアウトプット

position や z-index の学習をしましたが、既知の情報が多かったのでまとめていません。

たーやま

position: sticky; overflow: hidden; 入ってたら効かんことくらいやわ。

というわけで、明日に何かまとめるものがあればまとめます。

4/8(木)のアウトプット

仕事前に当ブログに起きていた問題と、仕事後に学習した JavaScript についてまとめました。

常時SSL してんのにリダイレクトされへんやんけ問題

当ブログ『ミヤコーダー』で起こりました。

他のポートフォリオやサイトでは、「http://〜〜」と変更してもリダイレクトされます。

しかし『ミヤコーダー』だけは何回やってもできません…。

たーやま

何したらええんやっけこれ…

あまりいじらない部分なので、つい忘れていました。

結論をいうと、作成したサイトの .htaccess の一番上に以下のコードを記入して解決しました。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
たーやま

サブドメインでもいけました。
念のため元のファイルのバックアップはしてください。

参考サイトはこちらです。

Udemy で講座を購入!

新年度スタートセールをやっていたので、新しい講座を買いました。

今回購入したのはこちらの講座です。

たーやま

この人マジでオススメ。解説めっちゃ詳しいねん。

わたしの場合ですが、セール中に何個も何個も講座は買いません。

だって買って満足するやん?笑

だから1つか2つを買って、全部終わるまでは買わないことにしています。

たーやま

後からやる =『やらん』やからな。
自分もせんし、やってるやつを見たことがない。

仕事もあるので、1ヶ月目標くらいで完走できたらいいかな。

とはいえ早速学習したので、アウトプットしていきます。

たーやま

不安なとこしかメモしてへんからご了承を。

Objectの値

Object の取りうる値はこの3つ。

・名前:値
・名前:関数
・名前:オブジェクト

let obj = {
 exam1: 'hello',
 exam2: function() {
 },
 exam3: {
 d: 'Bye'
 }
}

プロパティーへのアクセス方法

ドット記法( obj.name )とブラケット記法( obj[‘name’] )がある。

JavaScript と ECMAScript

1990年代:Netscape Navigator Internet Explore の 2強でライバル同士。

そんな中で Netscape Navigator は、JavaScript を開発しました。

Microsoft も使いたかったけど、ライセンスの関係で使用できない状況。なので、 JScript なるものを編み出します。

けど当時は、JavaScript と JScript では互換性がありませんでした。

そこで登場したのが ECMAScript です。JavaScript のコアの部分を仕様策定しました。

ブラウザ間での互換性ができて、開発者は「うぇ〜いw」状態になりました。

たーやま

JavaScript の中に ECMAScript があるイメージやね。

環境によって機能が異なる JavaScript

JavaScript は環境によって持っている機能が変わっていきます。

例えばこんな感じ。

・ブラウザ環境:ECMAScript + Web APIs(DOM APIとか)
・Node.js環境:ECMAScript + CommonJS

たーやま

こんなん知らんわ状態やでな(笑)

ECMAScript とバージョンについて

JavaScript って、ES5 とか ES6 とかってありますよね。

あれ実は、ECMAScript のバージョンを表しています。

ES5 から ES6 へのアップデートが大規模だったため、よく耳にするのが ES5 と ES6 というわけです。

たーやま

ES6 以降は、1年ごとにアップデートされてるみたい。

1年ごとに変わっていってるのは、ES6 のタイミングで仕様策定のプロセスが変わったためです。

現在 ECMAScript の仕様は、Living Standard という方法で決まっています。

ブラウザと JavaScript

ブラウザの機能:
User Interface, Rendering Engine, Net Working, Browser Engine, Data Strage, UI backend, JavaScript Engine などさまざま。

JavaScript Engine:
Google Chrome の場合は、V8 っていう JavaScript Engine を使って処理しています。


その他の Engine として、Safari は 「JavaScriptCore」、Firebox は「SpiderMonkey」などがあります。
ちなみに、Node.jsV8 です。


JavaScript Engine 上で、ECMAScript と ブラウザ上で Web APIs が提供されているって感じです。

Web APIs:
DOM API, Fetch API, WebRTC, XHR API, Geolocation API などなど…。

4/9(金)のアウトプット

昨日に引き続き、Udemy で習ったことを中心にアウトプットします。

その前に…検証ツールの切り離し

Mac の場合、Google Chrome で「 ⌘ + option + i 」を使ったら検証ツールが使えます。

が、この検証ツールと画面を切り離すことができるのは知ってましたか?

たーやま

わいは知らんかった(笑)

検証ツールを開く > ギアマークの隣の縦の点3つのところを選択 > Dock side の左端を選択

これで検証ツールと画面を切り離すことができました。

たーやま

開発ツールを広々させたい場合に使えます。

JavaScript が実行されるまで

コードは JavaScript 上で実行されます。

しかし、コードの実行前に準備されているものもあります。それらは、グローバルオブジェクトthis の2つです。

グローバルオブジェクトは、Web API などの Window オブジェクトのこと。

this はコンテキストによって、取得できる値が変わります。

実行コンテキスト

コード、グローバルオブジェクト、this を含めたものをいいます。

実行コンテキストには、グローバルコンテキスト関数コンテキストeval コンテキストの3つあります。

グローバルコンテキストと関数コンテキストはよく出るっぽいです。

グローバルコンテキストで使えるのは、宣言した変数や関数、グローバルオブジェクト、this の3つ。

グローバルコンテキスト内で宣言された関数を実行する」という状況はこんな感じです。

let d = 3;
function r() {
}

console.log(d);
r();
たーやま

JavaScript ではよく見るやつやな。

関数コンテキストは、宣言した変数や関数、argument、super、this、外部関数の5つを使えます。

以下のJavaScript があったとしたら、function r の中にあるのが関数コンテキストです。

let d = 3;
function r() {
 console.log(this, argument, d);
}

コールスタック

実行中のコードがたどってきたコンテキストの積み重ねのことです。

実行されている関数や、関数の中でどの関数が呼び出されているかを追跡することができます。

function mi() {
 console.log("実行_3");
}

function ya() {
 console.log("実行_2");
 mi();
}

function ko() {
 console.log("実行_1");
 ya();
}

ko();

上記の処理があった場合、以下のコールスタックの生成と消滅が起こります。

コールスタックの生成:
グローバルコンテキスト > ko > ya > mi

この順番で生成と実行がおこり、現在実行中の関数になります。

関数の実行が終了すると、後のコンテキスト(mi)から順に消滅していきます。

コンテキストの消滅:
mi > ya > ko > グローバルコンテキスト

これがコールスタックの流れです。

たーやま

検証ツールでも確認できるで。
Sources > js > Breakpoints選択 > Call Stack でいけるわ。

ホイスティング

定義した変数や関数を、コードが実行する前にメモリに配置しておく挙動のこと。

宣言の巻き上げ」ともいいます。

関数の場合、一般的には

function hello() {
 console.log("Hello World!");
}

hello();

という感じで書きますが…

hello();

function hello() {
 console.log("Hello World!");
}

と書いても問題なく実行します。

ホイスティングによって、コードが実行する前に定義した関数をメモリに配置されているためです。

変数の場合もみていきましょう。

console.log(three);

var three = 3;

この場合は「undefined」が出力されます。

というのも、ホイスティングでは変数 var three; でメモリを確保し、「undefined」を設定しているからです。

なので、設定された「undefined」が呼び出されます。

var three;

three = 3;

console.log(three);

こうすると3が呼び出されます。

たーやま

まぁこんな書き方する必要もないと思うけどな。

ちなみに、let と const はどうなるかというと…

// letの場合

console.log(three);
let three = 3;

// const の場合

console.log(three);
const three = 3;

エラーが発生します。

「three」というメモリ自体は確保しているのですが、let や const の場合「undefined」は設定されていないからです。

4/10(土)のアウトプット

Udemy を中心に、学習したことをまとめます。

たーやま

この辺めっちゃむずかったで…。
いろんな記事読み漁ったわ。笑

スコープ

実行中のコード(変数や関数)から、値と式が参照できる範囲のことをいいます。

スコープには、以下の5つが存在します。

・グローバルスコープ
・スクリプトスコープ
・関数スコープ
・ブロックスコープ
・モジュールスコープ

グローバルスコープ、スクリプトスコープ

letconstスクリプトスコープに表示され、verfunctionグローバルスコープに表示されます。

let e = 0;
const f = 3
var g = 5;
function h() { }
debugger;
たーやま

debugger; は、実行を一時停止するやつやで。

グローバルスコープ内にあるオブジェクト( = グローバルオブジェクト )を表示させたい時は

var g = 5;
console.log(g);

という風に表示させるのが一般的ですが…

var g = 5;
console.log(window.g);

としても表示できます。

たーやま

普通は省略して書くことが多いみたい。

なので、window オブジェクト自体がグローバルスコープになっていることがわかります。

また、宣言によってグローバルスコープかスクリプトスコープかが変わることも抑えておきましょう。

関数スコープとブロックスコープ

関数内にあるスコープのことを関数スコープといいます。

たーやま

ミヤコーダーレベルでそのまんまやな。

function hello() {
    let txt = 'hello World!';
    console.log(txt);
}

hello();

この場合はうまく実行されますが、「console.log(txt);」を関数外に出してしまうと、エラーが起きます。

変数 txt が、関数内でしか呼び出せないからです。

関数内で宣言した場合は、スコープの範囲に注意する必要があります。

ではブロックスコープをみていきましょう。

「 { } 」内に囲まれた関数のことをブロックスコープといいます。

ここに function がつくと関数スコープですが、つかない場合はブロックスコープです。

{
 let four = 4;
 console.log(four);
}

let か const の場合は、ブロックスコープはうまく挙動します。

しかし ver や function を使うと、意図しない挙動になります。

ブロックを無視してしまうためです。

たーやま

ブロックスコープは、if 文とか for 文とかで使われるで。

レキシカルスコープ

静的スコープともいい、関数を定義した時点でスコープが決まります。

let txt = 'hello World!';
function hello() {
    console.log(txt); // ここの静的スコープは txt = 'hello World!'
}

function bye() {
    let txt = 'goodbye!'; // ここで txt を再定義する
    hello(); // あれ?これってどうなるん?
}

hello(); // 「hello World!」になる
bye(); // hello World! か goodbye! か…?

「bye();」では「goodbye!」が出力されそうですが、「hello World!」が出力されます。

関数 hello が定義された時点で txt のスコープが決定され、値はそのままだからです。

なので関数 bye の中で txt が再定義されても、最初に定義していた txt が出力されます。

たーやま

こいつは謎すぎて理解すんの時間かかったぜ…(笑)

スコープチェーン

スコープが複数階層で連なっている状態のことをいいます。

let txt = 'hello World!';
function hello() {
    let letter = 'goodbye!';
    function bye() {
        let font = 'goodnight';
        console.log(letter);
    }
    bye();
}
hello();

関数 bye をみると、他の関数のスコープも含んでいます。これがスコープチェーンです。

例えば、変数を全て txt にして出力してみるとどうなるか…。

let txt = 'hello World!'; // (1)
function hello() {
    let txt = 'goodbye!'; // (2)
    function bye() {
        let txt = 'goodnight'; // (3)
        console.log(txt);
    }
    bye();
}
hello();

実際にやってみるとわかりますが、「goodnight!」が出力されます。

(3)をコメントアウトした場合は「goodbye!」を、(2) もコメントアウトした場合は「hello World!」を出力します。

このようにスコープチェーンでは、一番内側の値から取得していきます。

クロージャー

レキシカルスコープの変数を関数が使用している状態のことです。

let num = 0;

function count () {
    num++;
    console.log(num);
}

count(); // 1
count(); // 2
count(); // 3

「 console.log(num); 」は、変数 num の値を保持しています。この状態がクロージャーです。

たーやま

訳わからなさすぎてめっちゃ調べました(笑)

しかしこのままでは、関数 count の値を通さずに変数 num の値を自由に変更できます。

let num = 0;

function count () {
    num++;
    console.log(num);
}

count(); // 1
count(); // 2
count(); // 3

num = 2; // 変数 num を2に変更した

count(); // 3 → 値がダブってしまう

そんなときは、関数の内部に変数を定義すると良いです。

外部からアクセスができなくなるため、値がコロコロと変わることはありません。

function count() {

    let num = 0;

    function child() {
        num++;
        console.log(num);
    }
    return child;
}

const child = count();

child();
child();
child();

count が実行される時に num の宣言が行われ、関数 child の宣言が行われ、関数 child が返ってきます。

関数の外で num の値を変えようとしても、スコープ外なので変えられません。

4/4(日)〜 4/10(土)で感じたこと

過去の案件で使われていたデザインのコーディングと、JavaScript の学習がメインの週でした。

LP のコーディングはある程度慣れてはいます。それでも初めての実装があってワクワクしました。

たーやま

引き出しが増える感覚が嬉しいです。

しかし LP はまだ終わってないので、しばらくアウトプットにお付き合いください。

また JavaScript については、奥の深さを垣間見ています。

今までコードをみても今一つ理解ができなかった意味がわかりそうです。

だって普通にむずいもん(笑)

でもここを見事習得できたら、フレームワークの理解も深まるとのことです。

来週も努力・精進を惜しまずに進んでいきます。

たーやま

焦らんでいい。
石橋は叩きまくる方が、格段にうまくいくの知ってるから(笑)

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

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

この記事を書いた人

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

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

目次
閉じる