[B! JavaScript] yahihiのブックマーク

令和のHTML / CSS / JavaScriptの書き方50選

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は﹁2024年のWeb制作ではこのようにコードを書いてほしい！﹂という内容をまとめました。質より量で、まずは﹁こんな書き方があるんだ﹂をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

yahihi 2024/05/15

リンク

フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた

元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。そんなところを見つけたときは優しく教えてくださると助かります。各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。この記事が誰かの助けになれば幸いです。調査・分類した言葉(技術)たち Hono Bun Deno Biome ViteWebpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。それを整理すると以下になるようです。 JavaScript Runtime Deno Bun

yahihi 2024/05/02

javascript

リンク

「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita

はじめにまず↓の記事を見てない方はぜひ見てください！自分にとってはこの記事には﹁えっ、ナニコレ！﹂なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove

yahihi 2024/02/28

javascript

リンク

【Three.js】DOMを3D表示できるCSS3DRendererを触ってみた! | 東京・新宿のWEB制作会社・ホームページ制作会社 | 有限会社Bit Beans

Warning: Trying to access array offset on value of type null in /home/bitbeanscom/bitbeans.com/public_html/bb_corporate/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16 Warning: Trying to access array offset on value of type null in /home/bitbeanscom/bitbeans.com/public_html/bb_corporate/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17 Warning: Tryin

yahihi 2023/10/03

リンク

JavaScriptでconsole.logを使用してませんか？

はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業をより効率的に、かつ迅速に進めることができます。 console.log ブラウザの開発者ツールやNode.jsのコンソール上に、渡された引数を表示します

yahihi 2023/09/10

javascript

リンク

Deno入門 ~インストールからデプロイまで~

What is Deno?Deno は、V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、JavaScript及びTypeScriptのランタイム環境 Node.jsの作者によって作られているとのこと。 Node.jsの反省点を活かして改善を入れているらしいです。また、単一実行ファイルとしてビルドできるため、Denoの環境が無くても実行ができるのが特徴。個人的には最初からTypeScriptをサポートしている点がNode.jsより強いと思いました。 Installation macOS/Linuxを基準として記載します。 curl -fsSL https://deno.land/x/install/install.sh | sh # 以下を自身のシェルの設定に入れる ex.) .zshrc or .bashrc export DENO_INSTALL="$H

yahihi 2023/02/19

javascript

リンク

console.log()だけのデバッグはやめよう

はじめにフロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります．しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです．この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです． assert console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります．第一引数がfalseとなった場合，第二引数をコンソールに出力します．サンプル // assert const wishToSuccess = () => { return Math.random() < 0.5 } console.assert(wishToSuccess(), "失敗しました") 出力 log 一般的にログを出力するconso

yahihi 2023/01/30

javascript

リンク

Google Mapよりすごい！と噂の位置情報サービスを使ってみた - Qiita

こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。仕事で位置情報サービスを軽く調べる機会があって、せっかくなので調べた内容を記事にしたいと思います。位置情報︵地図︶サービスといえば、Google Mapを思い浮かべる人も多いのではないでしょうか。私もGoogle Mapのヘビーユーザー＆ファンで、カーナビの代わりとして使ったり、街で見つけた史跡の写真等を2000件以上投稿したりしています。 B2Cのサービスの中ではGoogle Mapが圧倒的な存在感を放っていますが、B2B向けのサービスとなると様相が異なるようです。今回は、ある調査でB2B向けサービスの中ではGoogle Mapより高い評価がついていた﹁HERE﹂というサービスについて書きます。 Google Mapよりすごいと言われる所以はなにか Omdiaのレポートによると、B2B市場の位置情報サ

yahihi 2022/12/25

リンク

進化するDeno in 2022 - npm互換性、パフォーマンス、開発者体験の向上など

本記事は、TechFeed Experts Night#8 〜 JavaScriptランタイム戦争最前線のセッション書き起こし記事になります。イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。本セッションの登壇者セッション動画よろしくお願いします。Denoの最近の動向について話していきます。さっそくですが、2022年6月にDenoは資金調達をしました。2100万ドル(約29億3600万円)という、この界隈ではかなり大きめな調達だったのでざわざわしたりしました。

yahihi 2022/12/06

javascript

リンク

Web系プログラミング独学者の時間を無駄にしない参考まとめ　2022年

ネットには色々な情報がありすぎ、良いものも悪いものも新しいのも古いものもごったになっていて、初心者には見分けがつきません。結局これが参考になった。よかったと思ったものを項目ごと並べていきます。無駄に時間を使わなくてよいようにコツみたいなのもわかる範囲でかきます。周りに詳しい人がいないけど、独学で勉強されるかたの参考になれば幸いです。誰かの役にたてば苦労は無駄ではなかった。ぐぐって記事を探すとき「+2022」を入れ今年以降の記事を検索する結構無駄な時間が省けます。理由：フロントエンド技術は半年前の情報があてにならない。目次 1. エディタとPC 2. Portfolioサイト 2. HTMLとCSS 3. JavaScript 4. React 5. PHP 6. Python 7. Git 8. サーバとDB 9. フロントエンドとバックエンド技術 10. デザイン関係 1

yahihi 2022/11/14

リンク

TypeScriptでRPGツクールMVのプラグインを作る

yahihi 2022/11/02

javascript

リンク

Vercel、Webpack後継を目指す、Rustベースの「Turbopack」をリリース | gihyo.jp

Vercel、Webpack後継を目指す、Rustベースの﹁Turbopack﹂をリリース JavaScriptフレームワークNext.jsの開発などで知られるホスティングサービス企業Vercelは2022年10月25日、Rustベースで高速に動作する新たなモジュールバンドラ﹁Turbopack﹂をリリースした。これはNext.jsでのアプリ開発を高速化するため、JavaScriptモジュールバンドラWebpackを置き換えるもの。 Webpackの700倍の速さを実現同社によると、大規模なアプリケーションではTurbopackはWebpackの700倍高速に更新が表示されるとのこと。これは同社のビルドツールTurborepoなどで培われた各種キャッシュ最適化の技術を用いて実現されている。 TurbopackをNext.js13開発サーバーで使用することで、超高速なホットリロード︵HM

yahihi 2022/10/27

早いは正義

リンク

これだけは押さえておきたい ES2022の便利機能

Qiita Night 〜フロントエンド〜で発表した資料です

yahihi 2022/10/21

javascript

リンク

JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画

JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画 7月に発表されるやいなや急速に注目を集めているJavaScriptランタイム「Bun」の開発者であるJarred Sumner氏が、Bunの開発とサービス提供などを目的とする企業「Oven」社の設立を発表しました。 Introducing Oven: the company behind Bun. Oven has raised $7m led by @buckymoore at Kleiner Perkins with participation from @rauchg @ycombinator and morehttps://t.co/HG2TUCQWbL — Oven (Bun) is hiring engineers (@oven_sh) August 24, 20

yahihi 2022/08/29

リンク

Node.jsを過去の物にする最速の肉まん - Qiita

その名はBun デデン BunはNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版) ちなみにロゴが本当に肉まんなのかはわかりません。︵赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ...) この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。割となんでもできる Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。 TypescriptからJavascriptへのトランスパイル jsxからJavascriptへのトランスパイルnpmのようなパッケージのインストール&管理 webpackのようなプロジェクトのバンドル化もちろんランタイムなのでNode.jsのようにサーバーでJavascriptを実行することも可能です。これらに加えてBunには様々な機

yahihi 2022/07/09

すごいなー

リンク

正式仕様リリース！ JavaScriptの最新仕様ES2022で追加された「全」新機能

JavaScriptの仕様はECMAScriptで、ECMAScript 2015︵ES2015︶、ECMAScript 2016︵ES2016︶...というように毎年進化を続けています。これまでの仕様はES2021でした。本日6月22日、ES2022は正式仕様として承認され、ES2022が最新仕様となりました。 22.06.2022 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ︵Google Chrome・Firefox・Safari・Microsoft Edge︶でES2022の全機能が使えます。本記事では、ES2022すべての新機能を紹介します。﹁何が使えるようになったのか？﹂﹁どうしてそれが必要だったのか？﹂が、できるだけわかりやすいように解説しました

yahihi 2022/06/23

javascript

リンク

IEが終了したので、webpackやbabelは不要？ - Qiita

IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。そもそもなぜフロントエンドを﹁ビルド﹂していたのかそもそもなぜwebpackやbabelを使ってJavaScriptをバンドル︵1ファイルにまとめる︶していたのか 1. HTTP/1.1とモジュールシステムの相性の悪さブラウザにはES Moduleというモジュールシステムが導入されています。これはimport文で他のファイルを読み込むことができるシステムです。 HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。 2. ブラウザのES Module対応率の低さ ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Mod

yahihi 2022/06/19

javascript

リンク

『マンガでわかるJavaScriptのPromise』がKindleで無料公開

﹃マンガでわかるJavaScriptのPromise﹄は、JavaScriptで通信などの処理を書く際に必須の仕様であるPromiseを、マンガで基礎から学ぶことができる。﹃マンガでわかるJavaScriptのPromise﹄は、マンガ部分は76ページ、コードのまとめやコラム部分は51ページ、全体で167ページの構成で、コールバックを多用するJavaScriptの特徴や、Promise登場の背景、Promiseの仕組みや書き方、async/await、Promiseの静的メソッドまでを解説する。目次は以下の通り。第1話﹁JavaScriptのPromise﹂第2話﹁同期処理と非同期処理﹂第3話﹁コールバック関数﹂第4話﹁コールバック関数のネスト﹂第5話﹁Promiseの概念﹂第6話﹁Promiseを使ったコード﹂第7話﹁Promiseを使ったコード2﹂第8話﹁reso

yahihi 2022/04/15

javascript

リンク

textareaをカスタマイズできるReact用のライブラリを作成しました

HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、キャレットの位置にメニューを表示したり、テキストにカーソルを乗せた時にTooltipを出したり、アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す

yahihi 2022/02/18

リンク

はてなブックマーク

タグ

関連タグで絞り込む (117)

JavaScriptに関するyahihiのブックマーク (250)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第4週）

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス