以前から、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を使ったアコーディオン表示のサンプル まず、以下のサンプルを見てください。青いボタンをクリックすると、アコーディオンエリアが開閉します。 これは余計な処理を省いた最もプリミティ...

Googleで検索した際、検索結果がどんどん下に読み込まれていきますよね？この新しい情報が随時読み込みされて、どんどんスクロール量が増えていく動きは『無限スクロール』と呼ばれているそうです。 今回はこの無限スクロールを解説していきます。 大量のコンテンツの見せ方には『ページャー』と『無限スクロール』がある ページャーというのは、1ページに情報が決められた数のみ表示され、それ以上の情報は2ページ目、3ページ目とページめくりしていくことで表示されます。 対して、無限スクロールでは...

即時関数というものがあります。おそらく、この記事を読んでいる方は『即時関数』というものがあることを知って、どういう場面で使うのか、どういう書き方をするのかが知りたくて調べて来たんじゃないでしょうか？ 即時関数とは 即時関数は、関数を定義して、すぐにその場で関数を実行する構文です。 javascriptでは以下のように記述します。 // 引数の無い即時関数 (function() { // 関数の処理をここに記述 })(); // 引数がある時の即時関数 (function([...

私は新しいプログラミング言語を学ぶとき、最初に5冊程度本を買います。しかし、結局本だけでプログラミングが出来るようになったことはありません。 結局、ネットで検索するんですよね。このブログもそういう人向けに書いています。しかし、どうして結局ネットで調べるのに、わざわざ本を買うのか。 プログラミングには処理としては同じことなのに、書き方がたくさんあります。略して書いたり、書き方が違うと記述順の制約が付いたりするのですが、やってることは同じなんです。それでも書き方が違うんです。特に...

変数名や関数名を付ける時、結構迷うことありますよね。「作っている時は良いけど、後から見た時、理解できるだろうか。」「他人が見た時、わかりやすいだろうか。」って考えると、少し考え込んでしまいます。 プログラミングには命名規則という物があり、無視してプログラムを作ることも出来るんですが、他人が見た時の可読性を意識すると、命名規則に従うのが吉です。『可読性』はシステムの寿命にも直結するので、軽視はできない問題です。 命名規則には、変数名や関数名にどんな言葉を使うかというルールもあり...