私はWindows上で、Nuxt.js+Vue.jsで開発しています。環境構築についてはこちらの記事を参照してください。 "sass"をインストールする 開発サーバーを起動している場合はCtrl+Cで停止させてください。そして、以下のコマンドで"sass"をインストールしてください。 $ npm install -D sass コマンドの実行が終わったら、package.jsonを確認して、sassパッケージがインストールされていることを確認してください。 "dep...

最初、Next.js＋Reactで環境構築しようと思ったんですが、Vercel以外のホスティングでデプロイするのが結構手間っていう話を聞いたので、今回はNuxt.js＋Vue.jsで環境作ってみようかなって思います。 Node.jsをインストール Nuxt.jsはNode.jsのフレームワークなので、先にNode.jsをインストールしましょう。Windowsの場合は、Node.jsのホームページからインストーラーをダウンロードできます。 インストールウィザードに従ってNode...

「数字がランダムにシャッフルされながら表示するやつ」本当はちゃんとした名前があるんだろうけど、なんて言うのかな？わかんないでも、作ってみたので、紹介します。 とりあえず、サンプルを見て欲しい。「あー！それね！」ってなるから 今回はこれの作り方を説明します。 ボタンクリックで指定桁数のランダムな数字を取得する まず、ボタンクリックで指定した桁数のランダムな数字を取得できるようにします。 以下がボタンクリックと数字を表示するスクリプトです。 // ボタンクリックイベント $(&#...

マニアックなブログへようこそ。今回ご紹介するのは、WP REST APIを使って記事一覧を取得する際、取得記事をカスタムフィールドで絞り込む方法です。WP REST APIの使い方はこちらを参考にしてください。 カスタム投稿タイプとカスタムフィールドを定義 まず、どういうカスタムフィールドを定義するか先に決めておきましょう。今回は「投稿」ではなく、カスタム投稿タイプ「商品情報」を定義してみます。functions.phpに以下の内容を記述します。 /* カスタム投稿タイプの定...

以前から、FormをSubmitする時、PHPで入力値をチェックして、ダメだったら何もせずメッセージを表示するのって「無駄な通信だな」「先にJavascriptで入力値をチェックできたら良いのに」って思っていました。 でも、入力チェックの良い設計が思いつかなかったんです。今回、それなりの形になったので、ご紹介します。 フォームの入力チェック（バリデーション） 今回のサンプルで想定しているformは以下の通り <form class="v-form" ...

サイトの高速化に力を入れているWEB担当者の方ならご存じと思いますが、サイトの高速化にはパターンがあります。 サイトを高速化する王道3パターン サイト高速化の教科書的パターンが、以下の3パターンです。 サーバーとの通信回数を減らす サーバーからのダウンロードデータを減らす サーバーからの読み込みタイミングをずらす サーバーとの通信回数を減らす これはファイル数が多いと、それだけ何度もサーバーにリクエストを送り、サーバーもそれに応えるように何度もファイルを送ります。この『何度も...

「動くホームページが作りたい」「CSSの動きだけでは物足りなくなってきた」という人、jQueryを初めて触ってみる人向けに書いてます。 jQueryを学ぼうとすると、膨大なルールや関数の数に圧倒されませんか？それもそのはず、HTMLやCSSなどのマークアップランゲージと違って、jQueryはjavascriptのライブラリで、その本質はプログラミング言語なんです。 整理されていないプログラミング言語の情報をバラバラと調べてると、あきらかに情報過多です。何から学べばいいかわから...

私はホームページ制作ではもっぱらSCSSを使っています。このブログでも、もちろんSCSSを使っています。私はホームページ制作ではPreprosの有料ライセンス版を使っているのですが、ReactやNext.jsのフロントエンドの作業でも、やっぱりSCSSを使いたくなります。 React/Next.jsでSASS/SCSSを使うには ReactやNext.jsでSASS/SCSSを使うにはコマンドでパッケージをインストールするだけでOKです。 $ npm install --de...

PaaSを利用したいのだけど、Herokuの無料プランが無くなってしまったため、Vercelを使ってみることにしました。元々、Heroku（Heroku Postgres）＋Flask（Python）+React（Javascript）でサンプルアプリを作って、会社でプロジェクト化するか検討する材料に使おうかと思っていたんです。ただ、Herokuには無料プランが無くなってしまったので、それをVercel＋Next.js（Javascript）＋React（Javascript...

WEBデザインのスタンダードがモバイルファーストになってしばらく経ちましたが、アコーディオン表示は長いコンテンツを短くまとめたり、特定の人にしか関係性ないようなコンテンツを普段しまっておく手段として、非常に高い需要があります。 今回はそんなアコーディオン表示の作り方をご紹介します。 Javascriptを使ったアコーディオン表示のサンプル まず、以下のサンプルを見てください。青いボタンをクリックすると、アコーディオンエリアが開閉します。 これは余計な処理を省いた最もプリミティ...