Posts on POPWEB

window.top === window.selfは何をしているのか？

Tue, 04 Jan 2022 00:00:00 +0000

プロジェクトで「if (window.top === window.self) {…}」という条件式を初めて見たので、その意味を調べてみました。

この条件式は、開いているページがiframeで読み込んだページを表示しているかどうかを判定するためのものです。

林の中の象のように...

Thu, 02 Dec 2021 00:00:00 +0000

聡明な伴侶を得られるのなら共に歩め

聡明な人と歩めないのなら一人歩め

愚かなものを道連れとするな。

孤独に歩め、悪を為さず

求めるところは少なく、林の中の象のように

【初心者解説】React.memo, useMemo, useCallbackとは？

Tue, 23 Nov 2021 00:00:00 +0000

Ractには、メモ化するhookが用意されている。

そもそもメモ化とは？

メモ化とは関数実行後の結果をキャッシュか何か保存しておくことによって、再度同じ関数を実行するのではなく、保存しておいた結果を返すこと。それによって実行速度を高速化させるためのものである。

【JavaScript】プリミティブ型（基本型）とオブジェクト型（参照型）について

Sat, 16 Oct 2021 00:00:00 +0000

JavaScriptにのデータ型には、プリミティブ型（基本型）とオブジェクト型（参照型）がある

プリミティブ型（基本型）

真偽値（boolean）
数値（number）
文字列（string）
null
undefined
シンボル（symbol）

オブジェクト型（参照型）

プリミティブ型（基本型）以外のデータ型

eslintのルールで特定ファイルのみ適用外にしたい場合の書き方

Fri, 28 May 2021 00:00:00 +0000

.eslintrcのrulesに「defalut export」の記述を禁止するルールを追加したとする。

module.exports = {
...
  rules: {
...
    "import/no-default-export": "error",
...
  }
};

このとき、sotrybookのstories.tsxにはこのルールは適用外にしたい。

【Laravel】中間テーブルのカラムに対して検索をかけたい時【whereHas】

Wed, 17 Mar 2021 00:00:00 +0000

タイトル通りだが、まずはやりたいことの説明

やりたいこと

リレーション先の中間テーブルのカラムの値に対して検索をかけたい。

状況

menus、stores、menu_store（中間テーブル）とうテーブルを作成しており、

【JavaScript入門】reduceについて説明と使い方

Tue, 26 Jan 2021 00:00:00 +0000

reduce()の説明と使い方を説明する。

reduce()は、配列の隣り合う値に対して関数を適用させて、その実行結果を返すメソッド。

コードを書いて動きを確認してみる。

LaravelでスクレイピングしてHerokuで定期実行する方法

Fri, 22 Jan 2021 00:00:00 +0000

まず、LaravelでWebスクレイピングするため、ライブラリである「FriendsOfPHP/Goutte」をインストールする。

LaravelのバージョンはLaravel6.20。

インストール

$ composer require fabpot/goutte

以前のLaravelのバージョンではconfigファイルを設定する必要があるが、Laravel5.5以降はAutoDiscoveryがあるのでそのまま使える。

テキスト下に蛍光色ラインマーカーをCSSで作る（改行対応）

Thu, 31 Dec 2020 00:00:00 +0000

改行されているテキストにも対応できるCSSによるラインマーカーの作成。

以下、コード。

HTML

<p>
  テキストテキストテキストテキストテキスト<br />
  <span class="line-marker">テキストテキストテキストテキストテキスト<br />
    テキストテキスト</span>テキストテキストテキスト<br />
  テキストテキストテキストテキストテキスト
</p>

CSS

.line-marker {
	background: linear-gradient(transparent 70%, #FDDEB3 0%);
	display: inline;
	padding: 0 2px 4px;
}

ngrokでDockerのローカル開発環境を簡単にWEB公開する方法

Fri, 18 Dec 2020 00:00:00 +0000

ローカル開発環境の状況をクライアントへ確認してもらいたい時、もしくは複数端末でブラウザ確認したい時は多々ある。

しかし、ちょっと確認してもらえればいいのに、いちいちテスト環境用のサーバを用意してにアップロードするのは面倒。

【初心者向け解説】PHPのクラス、抽象クラス、インターフェース、トレイトについて

Wed, 02 Dec 2020 00:00:00 +0000

まず、オブジェクト指向とはなにかについて説明。

オブジェクト指向は、ざっくりいうと役割をクラスごとに分けてそれを組み合わせながらプログラミングを行っていくこと。

WindowsのDocker Toolboxでlocalhostでブラウザ確認できるようにする方法

Tue, 01 Dec 2020 00:00:00 +0000

Windows10 Pro（64bit）以外のWindows（Windows10 Homeなど）でDockerを使う場合Docker Toolboxを使うこととなる。

電卓でM+、M-、RM/CMの使い方

Tue, 17 Nov 2020 00:00:00 +0000

簿記を学習する上で電卓を使いこなせるようなったほうがいい。

とは言っても、四則演算（+、-、×、÷）なら誰もできると思う。

電卓のキーの中で使ったことのないキーがいくつからあると思うが、M+、M-、RM/CM（MRC）とったキーはメモリーキーと呼ばれるもので、使い方を覚えるととても便利なキーである。

Nuxt.jsで「TypeError: Cannot set property 'render' of undefined」のコソールエラー対処法

Wed, 28 Oct 2020 00:00:00 +0000

エラー内容

Nuxt.jsで開発中、以下のコンソールエラーが出て画面が表示されなくなった。

TypeError: Cannot set property 'render' of undefined