2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
jQueryは1個の要素と複数個の要素を同じように書かせる - fsubal
#フロントエンド #設計 #JavaScript 「1個の要素と複数個の要素を同じように書かせる」というのが実は jQuery の特徴の一つだと思っている。 document.querySelector() や querySelectorAll が出現して以降 jQuery の必要性はほとんどなくなったと言われる。 実際にこんなサイトもあるし https://youmightnotneedjquery.com/ これは実際その通り 一方、jQuery で書かれたコードを querySelector や querySelectorAll に移行しようとしたら苦しかったという経験をした人は多そう。 上のコードが下のようになる。 code:javascript $('.foo').on('click', e => { // ... }) Array.from(document.querySele
Admin.jsを使って面倒な管理画面をサクッと作ろう | DevelopersIO
こんにちは、CX事業本部Delivery部サーバーサイドチームのmorimorkochanです。 突然ですが「あぁ〜管理画面作るのめんどくせ〜」って思うことはないですか？ 例えばRDBと接続されたRESTfulなAPIサーバーを作っていて、一部の管理者向けに管理画面を作りたいが管理画面にこだわりがない場合などなど。 そんな時に便利なのが、Admin.jsです。Admin.jsは管理画面を簡単に作成できるフレームワークです。オープンソースとして公開されており、クラウドにデプロイされているサービスを利用する場合は月額料金がかかりますが手動でサーバーに組み込んでデプロイする場合は無料です。 Admin.jsを使うと、RDBで管理される各テーブルごとにCRUD画面を簡単に作成することができます。これによってRDBと同じプロパティを何度も定義したり同じようなCRUDコードを何度も記述する必要はありま
Laravelでjavascript、jQueryを使う方法
今回は上記のような疑問を抱えている方に向けて、Laravelでjavascriptやjqueryを使う方法を紹介します。 Laravelでjavascriptを使う方法 実はjavascriptを使う方法は簡単です。 bladeファイルにscriptタグを使って直接書き込んじゃえばいいですからね。 以下のような感じ。 <script> function test() { alert('hello'); } </script> ただし、行数の多いコードを埋め込んだり、他のviewファイルでも使うような処理をいちいち書き込むのはオススメできません。 別ファイルに分割したほうがいいです。 オススメ：laravel mixを使いましょう 特定の処理用のjsファイルに分離しつつ、そのファイルを使うには「laravel mix」を使うといいです。 今回は、laravel mixを使用して先程のjsのコ
初めてのTypeScript
TypeScriptの本格的な入門書。TypeScriptは、世界で最もよく使われ、かつ最も好まれているプログラミング言語の1つです。本書では、JavaScriptの基礎的な知識のあるプログラマーを対象に、「型」や「型システム」の基本から、明快かつ包括的にTypeScriptを解説します。TypeScriptはバグやタイプミスを防ぎ、コードを読みやすくするのに有用なだけでなく、JavaScriptがどのように動くべきかを宣言し、それを維持するのに役立つ優れたシステムです。読者は本書を読むことで、TypeScriptの基礎と最も重要な機能をマスターできるでしょう。 賞賛の声 監訳者まえがき まえがき 第I部 TypeScriptの概念 1章 JavaScriptからTypeScriptへ 1.1 JavaScriptの歴史 1.2 バニラJavaScriptの欠陥 1.2.1 コストのかかる
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA（Single Page Application）でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説
JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。 JavaScript Array Methods: A Comprehensive Guide by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに filter()メソッド: オブジェクトの配列からキーstatusがactiveと等しいオブジェクトの配列を取得する find()メソッド: 配列内から特定のidを持つオブジェクトを検索する findIndex()メソッド: 配列内の特定のキーを持つオブジェクトのインデックスを検索する reduce()メソッド: オブジェクトの配列内にある特定のキーの値を合計する map()メソッド: オブジェクトの配列内に含まれる特定のキーに対応する一意
いまどきな JavaScript に入門しよう！『流麗な JavaScript』を読んで（上） - 虎の穴開発室ブログ
こんにちは。虎の穴ラボの古賀です。 9 月の連休で社内の技術書購入を支援する制度を利用して購入した『流麗（ELOQUENT）な JavaScript 第 3 版 現代のプログラミング入門』を読みました。 流麗なJavaScriptの書影 良い本でしたので、本書の前半部分の概要とその中で良かったところや気になったところをご紹介します。 どんな本か 基本情報 オススメする読者層 著者、訳者について 構成について Chapter1〜3：プログラムの基礎的なところから、制御フロー、関数など Chapter1 Chapter2 Chapter3 Chapter4 Chapter5 Chapter6 Chapter7 Chapter8 Chapter10 Chapter11〜22：未読 良かったところ サンプルコードの実行環境や練習問題がある 初心者がつまづきがちなところについて説明がある 気になった
node.jsでエクセルファイルを編集する方法 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 技術部のアベです。 一般的にエクセルの内容をプログラム的に変化させるにはVBA / マクロを使用すると思いますが、モジュールを活用してjavascriptでエクセルの編集が出来るのは簡単だし便利だなぁと思ったので、今回はnode.jsのpackageのxlsx-populateを使用してエクセルを編集してみました。 この記事ではnode.jsを使用する為、実行環境はnode.js公式からダウンロード・インストールを行ってください。 xlsx-populateを使ってみる 新規エクセルファイルの作成 新規エクセルファイルを作成する 新規エクセルファイルを作成してみましょう。 const XlsxPopulate = require("xlsx-populate
![node.jsでエクセルファイルを編集する方法 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9d2d93c7433b110c113beda0a3369f0c55bd24d0/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2021%2F01%2Fcomputer_document_spreadsheet.png)
JavaScript 正規表現まとめ - Qiita
JavaScriptの正規表現について勉強してるので忘れないうちに、まとめる。 正規表現とは 文字列内で文字の組み合わせを照合するために用いられるパターンです。 @正規表現 MDN web docs 簡単な例（郵便番号ver） > var pattern = /^\d{3}-?\d{4}$/g; > var postcode = '121-4440'; //正しい郵便番号 > var result = postcode.match(pattern); undefined > result ["121-4440"] > var pattern = /^\d{3}-?\d{4}$/g; > var postcode = '121-444'; //正しくない郵便番号 > var result = postcode.match(pattern); undefined > result null
reCatnap: JSでファイルをDL。ついでにSJISに変換（encoding.js）
javascriptでファイルをダウンロードさせる必要があった。しかもShift-JISに変換する必要もあった。 基本 リンクタグにblobをセットさせる感じでいく。 文字コードの変換が不要な場合 ▼HTML部 <a id="download" download="sample.txt">ダウンロード</a> ▼Script部 // DLさせるテキストをBLOBでファイルにする var str = 'こんにちは、今日は良い天気ですね！'; var blob = new Blob([str], {type: 'text/plain'}); // ▼コンソールに出力するときは、コメント解除 //var reader = new FileReader(); //reader.onload = function(){ // console.log(reader.result); //}; //re
Chrome 拡張機能で CSV ファイルを生成してダウンロードする方法
はじめにChrome 拡張機能で CSV ファイルを生成してダウンロードする方法について整理した。 TL;DRほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り new Blob でオブジェクトを生成 createObjectURL で URL に変換 <a href="..." download="hoge.csv"> でダウンロード 目次はじめにTL;DR環境・条件詳細manifest.jsonJS(main.js)まとめ参考文献 環境・条件Google Chrome バージョン: 77.0.3865.120（Official Build） （64 ビット） 詳細リポジトリ: 17number/chrome-extension-file-download-example 拡張機能を有効化後に Google のトップページ(https://www.go
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
JavaScriptイメージモーダル（画像拡大表示）を作ろう | logsuke
完成画像 サムネイル画像をクリックすると、サイト全体を覆うモーダルを表示させて、拡大画像を表示させるようにしていきます 全体のコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>imagemodal</title> </head> <body> <div class="modal-wrapper"> <img src="" alt="" class="modal-image"> </div> <div class="wrapper"> <img src="images/img
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactではじめるChrome拡張開発入門
GitHub - polygonplanet/encoding.js: Convert and detect character encoding in JavaScript
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~