Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
この書き方でも for 文は正常に動作します。 しかしながらこの書き方は 以下の書き間違いが生じることがあります。 for(var i = 0; i < array1.length; i++) { //長い処理 for(var i = 0; i < array2.length; i++) { } } 長い処理の中で i を宣言したことを忘れて 再び i を宣言してしまうことで 外側の for 文のカウントにバグが発生し 期待した動作にならない例になります。 私も他の人が作成した web アプリで このバグを見かけたことがあります。 for の変数を宣言する場合 必ず let で宣言して下さい。 var でなければ正常に動作しないのは 構造的欠陥のハズです。 let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; for(let i = 0; i <
【JS体操】JavaScript で頭の体操をしよう！〜第一問 44文字 解説編〜 - KAYAC engineers' blog
こんにちは！カヤック面白プロデュース事業部のおばらです。 普段は受託案件、特にインタラクティブな WebGL や Canvas2D を駆使する案件のデザイン＆実装を担当しています。 先日出題したJS体操 第一問目、挑戦してくださったみなさまありがとうございました！ 早速ですが最短文字数の回答は 44文字 でした！ export default x=>x-(x%=.2)+.2-(.04-x*x)**.5 みごと44文字を達成した方は、 halwhite さん koyama41 さん sugyan さん tkihira さん たつけん さん の5名！（※ Unicode コードポイント順） おめでとうございます！！ 最短文字数を狙った正統派の回答以外にも、裏技的な面白アプローチがたくさんありました笑 このアプローチは面白い、ぜひ紹介したい！という回答がいくつかあったので、解説記事は2回に分けて
JavaScript でキューを実装して性能を比較してみた。 今回は、以下の条件で実装を行った。 クラスとして実装する 1個のデータのエンキューとデキューを行うメソッドをそれぞれ実装する それ以外のメソッド (要素数、先頭を削除せずに取得など) は実装しない エラー処理 (空のときにデキューを試みるなど) は行わない なお、実装で出てくる # つきのメンバ変数はプライベートプロパティである。 方針・実装 配列のpush・shift 配列の末尾に要素を追加するメソッド push をエンキューとして用い、配列の先頭から要素を取り除いて返すメソッド shift をデキューとして用いる。 エンキューとデキューがともに1回メソッドを呼び出すだけで実現でき、シンプルな実装になる。 class QueueShift { #q = []; enqueue(value) { this.#q.push(val
翻訳について これは Allen Wirfs-Brock, Brendan Eich 著 JavaScript: the first 20 years の翻訳です。英語版は CC BY 4.0 ライセンスで公開されています。 この翻訳は CC BY 4.0 ライセンスの許諾に基づいて公開されます。 PDF/EPUB 版について この翻訳の PDF/EPUB 版を BOOTH で販売しています。
Fashionably flexible responsive web design (full day workshop)
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
# Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp.github.io/conference-2024/ (15 ~ 20 minutes) ## References: - Extension API | Visual Studio Code Extension API https://code.visualstudio.com/api - The Biome Tool Chain https://fosdem.org/2024/schedule/event/fosdem-2024-2563-the-biome-toolchain/ - Mo
ソースコードを共有してみんなに見てもらう機会があるでしょうか。そんな時、せっかく見てもらうなら、美しく読みやすいコードを見てもらいたいと思うものです。今回紹介するJavaScript製のツール「Carbon」を使うと、手軽にソースコードを美しい画像に変換して共有できます。 ソースコードを画像に変換するJSライブラリ「Carbon」 見栄えの良いソースコードを共有しよう 昨今、プログラマーであれば、誰しも自分の書いたソースコードを誰かに見てもらう機会があります。プログラミングに関するコラムを書いたり、作成したライブラリの告知のためにSNSで共有したり、プレゼンテーションでプログラムのコードを解説したりと、みんなに見てもらうという場面が多くあります。 そんな機会に、より美しく見栄えの良いソースコードを見せたいと思うことでしょう。今回紹介するJavaScriptのライブラリ「Carbon」を使う
Introducing ESLint Compatibility Utilities - ESLint - Pluggable JavaScript Linter
The release of ESLint v9.0.0 brought with it the rollout of the new configuration system, but also a series of changes to the rules API. These changes are necessary in order to prepare ESLint for implementing language plugins, which will give ESLint the ability to natively lint languages other than JavaScript. As a result, plugin authors needed to update their rules to work with v9.0.0, and unfort
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン124.0.6367.60がリリースされました。JavaScriptを使用してシャドウDOMを挿入したり、特定の要素の解析が終わるまでレンダリングをブロックしたりする機能が導入されました。 New in Chrome 124 | Blog | Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-124/ Chrome 124 | Release notes | Chrome for Developers https://developer.chrome.com/release-notes/124 ◆JavaScriptからシャドウDOMを使用可能に これまでinnerHTMLを使用して要素内部のHTMLを指定する時、
前回、経過日数を自動計算するJavaScriptの記事を書きました。ランニングを再開してから何日経ったかを知るためのものです。 driveon43.com 設定した開始日が2024年2月27日です。その日に生まれたお子さんや、何かを始めた人向けのツールなので、それ以外の人には全く意味の無いツールです。 パーソナライズさせると他の人には使えないというよい例でした。 もう少し使い勝手のよいものに改変しました。 開始日と終了日を指定する汎用性の高い日付計算ツールを貼り付けておきます。同じ記事に貼り付けるとエラーが起こったので別記事に分けました。 日数計算ツール コード JavaScriptを使用した記事 日数計算ツール 開始日: 終了日: 開始日を含む 日数計算 コード はてなブログの編集画面に下記コードをそのまま貼り付ければ動きます。昨日の記事のコードと同時に貼り付けると干渉し合うようで上手く
超個人的なJavaScriptの便利ツールをご紹介します。 走り始めてから何日だったっけとすぐに振り返れるような日数計算ツールです。私以外の誰が得するのか謎なツールですが、日付とタイトルを変更すればみんなに便利になツールになりそうです。 用途に合わせてでカスタマイズできるように、下記にコードを貼っています。日付とタイトルを変更すれば、そのままのブログに貼り付けることが可能です。 走り出してから今日で何日？ コードの改変方法 コード コードの修正（2024年4月24日） まとめ 走り出してから今日で何日？ ↑ JavaScriptによる自動計算数値です （2024年2月27日からランニング再開） △や□のマークが走った日。 コードの改変方法 コードの下記の部分を変更してください 開始日を変更（月は0が1月を、1が2月を示すそうです。謎仕様です） 開始日を日数に含めないときは-1をけす 表示す
ES ModulesでもCommonJS でもUMDでもない普通のJavaScriptをimportする方法を調べました。ブラウザで動作するスクリプトをテストしたいときにご活用ください 普通のJavaScript
はじめに 仕事で作成しているBlazorのアプリケーションで、Handsontableを使用して一覧表を表示しています。 検証作業を実施している同僚から、2台のPCで同じ画面を表示した際に一覧表を表示する処理を実施すると、後から起動したPC側に一覧表が表示され、本来表示されるPC側には何も表示されないとの報告を受けました。 土日の休日を使って解決策を見つけることが出来たので、備忘録として記事に残しておきます。 問題1 現象 会社では複数PCが使用できますが、自宅ではPC1台です。 そこで、違うブラウザChromeとEdgeで同じ現象が出るか試してみました。Visual Studio上で Chromeを起動しておき、後からEdgeを起動して、一覧表を表示する処理を実施するとEdge側に一覧表が表示されました。 これなら Visual Studio上から デバッグ も可能で調査が進みます。 調
はじめに こちらの記事ではWEB開発における非同期通信について理解しやすいように手を動かして作れるアプリを作りました。 非同期通信について学んでみたい人はぜひ作ってみてください。 対象者 非同期通信とはなにかわからない、または名前だけ知っている、漠然としたイメージだけあるといった方 WEB開発に関する知識はある程度持っている方 非同期通信とは 非同期通信とは通信技術の一つで送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式です。 イメージが湧きにくいと思うので以下の画像を見てください。 この処理ではボタンをクリックした後、画面遷移を行わずにデータベースへアクセスしランダムなポケモン情報を画面に表示しています。 非同期通信では処理は以下のように行われています。 送信ボタンをクリックするとJavaScriptにてhttpリクエストが送信され、サーバーサイド
JavaScriptは、長い歴史を持ちながらも常に進化を続けている。最新動向を踏まえて筆者の個人的な見解を交えつつ、Q＆A形式でJavaScriptにまつわる素朴な疑問に答える。 JavaScriptの構文では、文末のセミコロンは付けても付けなくてもよいことになっています。ここで注意したいのは、セミコロンは“省略可能”ではなく、「セミコロンが見付からない場合は、自動的に挿入される」という点です。この自動挿入に関しては、ECMAScriptで「Automatic Semicolon Insertion」（ASI、自動セミコロン挿入）として、きちんと細かく仕様が決められています。 自動挿入のルールを大まかに言うと、文末で改行されているところにセミコロンがない場合はセミコロンが挿入される、というとても当たり前なものです。例えば、セミコロンのないリスト15は、文末の改行部分でセミコロンが自動挿入さ
Hono + Cloudflare Workers + AWS SDK for JavaScript v3の構成でAmazon Bedrockが利用できるか試してみた | DevelopersIO
Hono + Cloudflare Workers + AWS SDK for JavaScript v3の構成でAmazon Bedrockが利用できるか試してみた どうも！オペレーション部の西村祐二です。 APIを作るときにHono + Cloudflare Workersの構成は開発体験もよく、この構成で検証をおこなっております。 AWSの環境もよく利用しており、AWSのサービスと連携するためにはSDKの利用がほぼ必須になってます。 最近、AIのサービスも利用する機会もあるので、Hono + Cloudflare Workers + AWS SDK for JavaScript v3の構成でAmazon Bedrockが利用できるか試してみました。 その手順などを備忘録のためにまとめておきたいと思います。 環境 Hono: 4.3.4 AWS SDK for JavaScript v
JavaScript is constantly evolving, from its roots as a simple scripting language into a robust, modern tool for building complex applications. To manage larger, complicated code bases, JavaScript developers are constantly looking for ways to improve their workflows, their code quality and productivity. TypeScript is a major innovation towards improving code quality and maintenance by adding types,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方まとめ
【熱望】javascript の for 文で var i を宣言するのはやめて下さい - Qiita
JavaScript でキューを実装して性能を比較してみた - Qiita
JavaScript: 最初の 20 年 (翻訳) - inzkyk.xyz
JavaScriptエンジンから見るランタイム / 2024-04-25
ゼロからはじめるJavaScript(31) 美しいソースコードを共有するJSツール「Carbon」を使ってみよう
「Google Chrome 124」安定版リリース、JavaScriptを使用してシャドウDOMを挿入可能に
汎用性の高い方の日数計算ツール（JavaScript） - 43号線を西へ東へ
自動で日数を数える！あなたの進捗ブログに追加すべきJavaScriptコード - 43号線を西へ東へ
Node.jsで普通のJavaScriptをimportする - Qiita
BlazorでJavaScriptから.NETの動的(インスタンス)メソッドを呼び出す - Qiita
JavaScriptを使った非同期通信について - Qiita
JavaScriptの文末のセミコロン、付けない場合はいったい何が起こるのか
An intro to TSConfig for JavaScript Developers