令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
オブジェクト · JavaScript Primer #jsprimer
オブジェクト オブジェクトはプロパティの集合です。プロパティとは名前（キー）と値（バリュー）が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。 今までも登場してきた、配列や関数などもオブジェクトの一種です。 JavaScriptには、あらゆるオブジェクトの元となるObjectというビルトインオブジェクトがあります。 ビルトインオブジェクトは、実行環境にあらかじめ定義されているオブジェクトのことです。 ObjectというビルトインオブジェクトはECMAScriptの仕様で定義されているため、あらゆるJavaScriptの実行環境で利用できます。 この章では、オブジェクトの作成や扱い方、Objectというビルトインオブジェクト
【jQuery】動的に追加した要素へのclickイベントが発火しない時の対処法
質問を受けて調べたので備忘録としてまとめ。 ｊQuery のクリックイベントが発火しない時の対処法についてです。 今回参考にさせていただいた記事はこちらから。 jQueryのclickイベントが動作しない？Ajaxなどで遅延読み込みした要素へのイベント登録方法を確認しよう。 | WEMO https://wemo.tech/386 タイトルにもある通り、今回は Ajax などを使って動的に追加した要素に対してクリックイベントを発火させたい場合です。 動的に要素を追加した場合、JavaScript を読み込んだ時点ではまだその対象の要素が読み込まれていないため、下記の方法ではクリックイベントを発火させることができません。 $(function(){ $('要素').click(function(){ // 実行したい処理を記述 }); }); そのため、下記のように document を対象
Jestで始める！ ユニットテスト | 第1回 環境の準備とテストの実行
Jestで始める！ ユニットテスト 第1回 環境の準備とテストの実行 JavaScriptのユニットテストのためのツール、Jestの特徴や基本的な使い方を解説します。「そろそろテストを書く習慣を付けたい」、そう思う人のための始めの一歩です。 Jestとは Jestは、Facebook社がOSSとして開発を進めている、JavaScriptのユニットテストのためのツールです。 Jest · 🃏 Delightful JavaScript Testing 日本語のドキュメント Jestは日本語のドキュメントもあります。日本語で基本的な部分を知るのに役立ちますが、情報が追いついていない場合もありますので、最新情報は英語ドキュメントを参照するようにしてください。 公式ページで「Zero configuration testing platform」と謳っているように、あれこれ設定をすることなく、他
Prisma | Simplify working and interacting with databases
Prisma provides the best experience for your team to work and interact with databases. Even complex things like connection pooling, caching, real-time database subscriptions are a breeze with our products. Build your application, fortify to make everything run smoothly, and grow with your users and requirements.
importとrequireの違い。【importの際の中括弧についても】 - Qiita
laravelとvue.jsでアプリを開発していて、基礎的なimportとrequireの違いについて気になったので、調べてみました。 この記事はその時のメモです。 前提：モジュールの読み込み方法はいくつかある。 「こちら」 の記事によれば下記の通り。 モジュールを読み込むための方法、仕様は 何種類かあり、 それぞれ書き方が違い、動く環境も違います。 そのモジュール読み込みの仕様の主要なものとして、 ESM (ECMAScript Modules)と CJS (CommonJS Modules)があります。 ※ほかにもいくつかあるが、主要なのはこの２つ 今回のテーマであるimportを使うのがESM方式で、 requireを使うのがCJS方式となります。 重要なのは、 ・importを使うのがESM方式 ・requireを使うのがCJS方式 って部分かな。 ちなみに、import(ESM)
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
Nightmareさんとこをざっくり訳 - クロコめも２。
英語わかんねっす。 Nightmare Nightmareはハイレベルな自動ページ表示ライブラリーです。 達成したいことは、ネストが深く分かり難いコールバック地獄なしに下のことを実現する シンプルに書ける 同期処理っぽく書ける これは、APIを持っていないサイトのE2Eテスト用に設計されています。 Electronベースでできてます。PhantomJSに似てますが、もっと早くてモダンです。 Daydream Daydreamは@stevenmiller888さんによって作られた、Nightmareを使う際のお助けツール chromeのエクステンションで、ブラウザ操作でNightmare用スクリプトを生成するものです。 Examples yahooをサーチしてみよう var Nightmare = require('nightmare'); var vo = require('vo'); v
Chart.js · Chart.js 日本語ドキュメント
[目次]、[設定]、[共有]は上部ボタンで↑ Chart.js インストール GitHub のリリースからChart.jsの最新バージョンをダウンロードするか、Chart.js CDN を使用します。詳しいインストール手順は、インストールページに記載されています。 グラフを作成する Chart.js を使い始めるのは簡単です。ページに、スクリプトと、チャートをレンダリングするための<canvas>ノードを一つ置くだけです。 この例では、一つのデータセットを持つ棒グラフを作成し、ページ内でレンダリング(描画)します。 Chart.js の使用方法は使用方法のページでも見ることができます。 <canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById("myC
Googleカレンダーライクなスケジューラーを作成する手段をまとめる - Qiita
0. 前書き スケジュール管理をするアプリケーションを作成するときに、よく真似したいと話題に上がるのがGoogleカレンダーのようなスケジューラーアプリケーションです。下記のような特徴を持っていると思いますよね。 ビュー（月、週、日）の切り替えができる スケジュールの作成や移動がマウス操作でできる ゼロから機能を作成するのも大変ですので、こういったことが実現できるライブラリーを探してみたいと思います。実現手段はWebアプリケーションとします。 1. 見つけたライブラリー 無償・有償問わず探した結果、下記のライブラリーが使えそうです。 前述の2つの要望にも答えてくれています。 FullCalener Kendo UI の Scheduler DHTMLX の Scheduler 各製品ホームページに記載のサンプルのスクリーンショットを添えて解説します。 1-1. FullCalender j
最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
自分用の co-foreach を作った話 - 3846masa's memo
最近nodejs触り始めた，楽しい． co-foreachもうあるけど，自分好みじゃないんで自分用のやつ作った話． coの中で，forEachしてその中でyieldしたいとする． 'use strict'; var co = require('co'); var request = require('co-request'); // サイトのタイトルを取ってくる co(function*(){ var urlList = [ 'http://example.com', 'http://google.com', ]; urlList.forEach(function*(url) { var res = yield request.get(url); var match = res.body.match(/<title>([\s\S]*?)<\/title>/); if (match) con
Nightmareを使ったブラウザ自動テスト実装のコツ3つ – おかかウェブ
必要に応じて –save, –save-devなどのオプションを指定してください。 実装例 GitHubにもExampleが載っていますので、まずはそちらをお試しください。 基本形 GitHubのExampleでは使われていませんが、ブラウザ操作というのは非同期で行われるものなので、基本的にPromiseを使いながら実装していくとよいです。 例えば、GitHubのExampleをPromiseでラップすると次のようになります。 このとき、Promiseを返す関数の外でNightmareインスタンスを作成するのがコツです。 const Nightmare = require('nightmare'); const nightmare = Nightmare({ show: true }); const example = n => { return new Promise((resolve,
C3.js | D3-based reusable chart library
Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Controllable C3 provides a variety of APIs and callbacks to access th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.js file upload example with Ajax and JavaScript
Build a GraphQL app in Node.js with TypeScript and graphql-request - LogRocket Blog
Loading...
webpackでモジュール間で共通変数を持ちたい - Qiita
https://www.moongift.jp/tag/%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC
Simple Line Chart - NVD3