Programming on POPWEB

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

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

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

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

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

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

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

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

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

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

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

ターミナルコマンドでVS Codeを開く方法

Thu, 17 Sep 2020 00:00:00 +0000

コマンドからVS Codeを開くにはcodeコマンドを使えば良い。

カレントディレクトリをVS Codeで開きたい場合

$ code .

ファイルやフォルダを開きたい場合

TypeScriptの型まとめ

Thu, 11 Jun 2020 00:00:00 +0000

TypeScriptの方の書き方をまとめていく。

boolean型

const value: boolean;

number型

const num: number;

string型

const greet: string;

オブジェクト型

const cat: {
  name: string;
  age: number;
} = {
  name: "tama",
  age: 2,
};

配列型

const colors: string[] = ["red", "blue"];

配列にstring型やnumber型が混在する場合はanyなどが使える。

Vue.jsエラー。gyp: No Xcode or CLT version detected!

Wed, 10 Jun 2020 00:00:00 +0000

vue create <プロジェクト名>コマンドを入力すると以下のようなエラーがでた。

gyp: No Xcode or CLT version detected!

XcodeあるいはCLTのバージョンがおかしいらしい。

Vue.jsの開発環境Vue CLIのインストールと初期設定

Mon, 08 Jun 2020 00:00:00 +0000

いつもはVue.jsのフレームワークであるNuxt.jsで開発を行なっているが、Vue CLIでの開発環境の構築をしてみる。

事前にNode.jsをインストールしておく。

TypeScriptのインストールとJavaScriptへのコンパイル方法

Sun, 07 Jun 2020 00:00:00 +0000

タイトル通りTypeScriptのインストールとJavaScriptのコンパイル方法をやっていく。

TyepScriptのインストール

Node.jsは事前にインストールされているものとする。

【Nuxt.js コンポーネント間の循環参照】Unknown custom elementとなる原因と解決方法

Wed, 03 Jun 2020 00:00:00 +0000

Nuxt.jsで開発中に以下のエラーが出てハマった。

[Vue warn]: Unknown custom element: <コンポーネント名> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

エラーメッセージにあるように、nameオプションで指定してもダメだった。

【コンソールエラーの原因】front.js:8 Uncaught ReferenceError: browser is not defined at HTMLDocument.

Fri, 29 May 2020 00:00:00 +0000

Google Chromeのデバッグコンソールに以下のようなエラーが出た。

front.js:8 Uncaught ReferenceError: browser is not defined at HTMLDocument.<anonymous> (front.js:8)

色々調べた結果、今回の場合はGoogle Chromeの拡張機能が原因だった。

JavaScript（ES2015）アロー関数の省略の書き方とthisの束縛について

Sat, 09 May 2020 00:00:00 +0000

ES2015（ES6）から追加されたアロー関数だが、省略した書き方が色々あるのでまとめてみる。

アロー関数の基本形

アロー関数は基本的には、無名関数（匿名関数）の省略記法で、その名の通り=>を使って関数リテラルを定義する。

【初心者向け】Nuxt.jsでのVuexのクラシックモードとモジュールモードについて

Thu, 07 May 2020 00:00:00 +0000

Nuxt.jsで状態管理を行うライブラリであるVuexのクラシックモードとモジュールモードについて説明。

まず、新規Nuxtプロジェクトを作成

以下、コマンドでテスト用にNuxtプロジェクトを作成しておく。

【WordPressサイトヘルス解決】オプションのモジュールzipがインストールされていないか、無効化されています。

Fri, 17 Apr 2020 00:00:00 +0000

WordPressサイトヘルスチェックの「1つ以上の推奨モジュールが存在しません」の中で、**「オプションのモジュール zip がインストールされていないか、無効化されています。」**と出たのでzipモジュールを入れることにした。

【WordPressサイトヘルス解決】オプションのモジュールimagickがインストールされていないか、無効化されています。

Thu, 16 Apr 2020 00:00:00 +0000

WordPressサイトヘルスチェックの「1つ以上の推奨モジュールが存在しません」の中で、**「オプションのモジュール imagick がインストールされていないか、無効化されています。」**と出たのでimagickモジュールを入れることにした。

カスタムコンポーネントでのv-modelの動作について。中身の:valueと@inputを理解する

Sun, 12 Apr 2020 00:00:00 +0000

v-modelは双方向データバインディングを行うディレクティブであるが、カスタムコンポーネントでv-modelを使う場合、少しややこしい。

v-modelの中身の動作について

まず、v-modelには、別の書き方がある。

WordPress親テーマのincサブディレクトリ以下のファイルを子テーマで上書きしたい場合

Sat, 11 Apr 2020 00:00:00 +0000

当ブログではWordPressのテーマは「Twenty Seventeen」を使っている。

さらに、子テーマを配置してカスタマイズ変更を行っている。

Gitリモートリポジトリをすべてのブランチごと別のリモートリポジトリへの移行方法

Fri, 10 Apr 2020 00:00:00 +0000

既存のGitリモートリポジトリを別のGitリモートリポジトリ移行する方法を説明する。

移行する時、すべてのブランチやコミット履歴も一緒に移行する。

WordPress Twenty Seventeenの最終更新日を表示させる

Thu, 09 Apr 2020 00:00:00 +0000

WordPressの公式テーマである「Twenty Seventeen」は初期状態でブログ記事の最新更新日が表示されていない。

最終更新日を表示には？

最終更新日を表示させるには、CSSを編集するだけ。

WordPressエラー解決「現在メンテナンス中のため、しばらくの間ご利用いただけません。」

Wed, 08 Apr 2020 00:00:00 +0000

WordPressのプラグインを更新中に、ブラウザ更新ボタンを押してしまい、

WordPressのサイトが**「現在メンテナンス中のため、しばらくの間ご利用いただけません。」**としか表示されなくなってしまった。

【Vue】v-forにはkey属性が必須の理由とバグが起きる例

Tue, 07 Apr 2020 00:00:00 +0000

v-forディレクティブにはkey属性が必須

v-forディレクティブを使う場合、v-bindディレクティブへ一意（ユニーク）のkey属性を設定すること必須である。

key属性がない場合はどう言ったバグが起こるのか簡単に説明する。

【Vue】computedとmethodsの違いについて

Mon, 06 Apr 2020 00:00:00 +0000

computedがmethodsとは異なる点

computedがmethodsとは異なる点は、computedの方は依存関係に基づいてキャッシュされるという性質を持っているということ。

VueやNuxtの開発でcommitする前にESLintでチェックするやり方

Sun, 05 Apr 2020 00:00:00 +0000

Gitでコミットする際にESLintを走らせて、エラーの場合はコミットさせないようにする。

手順

手順的には以下のよう。

コミットされる前の操作である「pre-commit」をhuskyで制御する。
lint-stagedでGitのステージングエリアにあるファイルを対象にESLintのコマンドを実行する。
Gitコミット時に、ESLintでチェックしてエラーが出ればコミットされない。

必要なモジュール

必要なnpmモジュールをインストールする。

Vue.jsのリアクティブシステムとは

Sat, 04 Apr 2020 00:00:00 +0000

VueのリアクティブシステムとはJavaScriptオブジェクトとの状態を監視し変更されたら検知するシステム。

Vueのコンポーネント内で状態を保持している値が変更された場合、リアルタイムでHTML側へその変更が検知されHTMLが更新される。

Nuxt.js（SSRモード）をDocker Composeでdeployする

Fri, 03 Apr 2020 00:00:00 +0000

Nuxtプロジェクト（SSRモード）をDocker Composeを使って起動させる方法を説明する。

今回は、Nuxtプロジェクト直下にDockerfileとdocker-compose.ymlを置く。

昇順と降順の覚え方とasc,descの意味について

Wed, 01 Apr 2020 00:00:00 +0000

SQLやプログラミングで並び替えするときなど、昇順、降順をいった言葉よく出てくる。

でも、どっちがどっちだったけ？ということはよくあるので、その覚え方を説明する。

WordPress「返答が正しいJSON レスポンスではありません。」の原因はNginxのパーマリンクが変更不可のため

Sun, 29 Mar 2020 00:00:00 +0000

さくらのVPSへNginxでWebサーバを構築し、WordPressをインストールして新しい記事を投稿しようとしたら**「返答が正しいJSON レスポンスではありません。」**のエラーが出た。

IT用語におけるトランザクションとは？

Tue, 24 Mar 2020 00:00:00 +0000

IT用語としてトランザクションとは、複数の処理をまとめて処理すること。

この処理のことのことを。トランザクション処理とも呼ぶ。

なぜ複数の処理をひとまとめに考えるかというと、複数の処理であるトランザクションを実行中に1つでも処理に失敗した場合、それまでに行ってきた処理をすべて無かったことにするためである。

Laravelで1ページ内に複数のpaginateを分けてページング方法

Mon, 16 Mar 2020 00:00:00 +0000

Laravelでpaginateを1つのページで複数設置すると、ページングするに際にすべてが同時にページングされてしまう。

以下のようにすると、paginateの第3引数に設定したパラメータでそれぞれでリクエストがなされる。

スキーマってデータベース（DB）のことじゃないの？その違いについて。

Sun, 08 Mar 2020 00:00:00 +0000

スキーマは、テーブルといったオブジェクトをグループ化したもの。

MySQLの場合、データベースを作成した後、その中に複数のテーブルを格納するのでスキーマはデータベースということになる。

クロスサイトリクエストフォージェリ（CSRF）とは？攻撃手法と対策

Tue, 25 Feb 2020 00:00:00 +0000

Webアプリケーション側の脆弱性を利用した攻撃方法。この攻撃はWebアプリケーションとは他のサイトからの不正リクエストを処理してしまう。

攻撃手法の例

クロスサイトリクエストフォージェリ（CSRF）は、まず攻撃者は事前に攻撃用スクリプトが組み込まれた攻撃用サイトを用意する。

クロスサイトスクリプティング（XSS）とは？攻撃手法と対策（PHP例）

Mon, 24 Feb 2020 00:00:00 +0000

クロスサイトスクリプティング（XSS）は、HTMLの中に悪意のあるJavaScriptのソースコードを埋め込んでスクリプトを実行すること。

この悪意のあるスクリプト実行されることで、Webページの情報の改竄やクッキー情報が盗まれて個人情報流出といったことが起こる。

SQLインジェクションとは？攻撃手法と対策（PHP例）

Sun, 23 Feb 2020 00:00:00 +0000

SQLインジェクションとは、Webアプリケーションに対する攻撃方法のこと。

まず、攻撃者はWebアプリケーションの入力フォームといったインターフェース利用する。

【JS初心者向け】コールバック関数について解説

Thu, 05 Sep 2019 00:00:00 +0000

JavaScriptをやっていて、「async/await」ってなんやって思って、ググったら「Promise」の進化版ってことらしい。

今度は「Promise」をググったら、コールバック関数の概念が必要ってことが分かった。

Call to undefined function ssh2_connect()のエラー。ssh2インストールするまでの手順

Fri, 19 Jul 2019 00:00:00 +0000

Call to undefined function ssh2_connect()

PHPでssh2_connect()を使用したら、上記のエラーがでたのでssh2インストール手順をメモる。

環境としては、VagrantでCentOSを入れて、PHP5.4をインストール。