はじめに 記事の修正や追加等はコメントまたはGitHubの編集リクエストをお待ちしております。 また、この記事の内容は私が個人的に開発しているモジュールのコードを抜き出した物です。 特別な処理がいる理由 JavaScriptは計算の際暗黙的に2進数で計算しています。 例えば0.1を2進数にすると0.000110011001100…となります。
JavaScriptで小数点付きの計算をしよう
はじめに 記事の修正や追加等はコメントまたはGitHubの編集リクエストをお待ちしております。 また、この記事の内容は私が個人的に開発しているモジュールのコードを抜き出した物です。 特別な処理がいる理由 JavaScriptは計算の際暗黙的に2進数で計算しています。 例えば0.1を2進数にすると0.000110011001100…となります。
Phoenix | Phoenix
A lightweight macOS window and app manager scriptable with JavaScript. You can also easily use languages which compile to JavaScript such as TypeScript. Phoenix aims for efficiency and a very small footprint. If you like the idea of scripting your own window or app management toolkit with JavaScript, Phoenix is probably going to give you the things you want. With Phoenix you can bind keyboard shor
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
Luminousが上手く動かない件 - Qiita
ウェブサイトの復旧作業の中で、ギャラリーのページをカスタマイズする作業の中で、jQuery不要なLightboxスクリプトLuminousを知りました。 jQueryを使わないので、小規模のHTMLを手入力で作ったようなウェブサイトのギャラリーページのカスタマイズに最適だと思いました。 でも、下記のコードを設置しても、動かないです。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous-basic.min.css"> <script src="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous.min.js"></script> <script> new LuminousG
【Gatsby】MutationObserverでAdSense未配信時に非表示にする | SCRAWLED TECH BLOG
Join our community of software engineering leaders and aspirational developers. Always stay in-the-know by getting the most important news and exclusive content delivered fresh to your inbox to learn more about at-scale software development.
State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
はじめに こんにちは！ 今回は、自作のライブラリ「Limo」を紹介します！ このライブラリは、テキスト、JSON、JSONC、TOML、YAMLなどのファイル形式を手軽に読み書きできる小さなツールです。 ファイルの読み書きをusing構文を使って簡単に行えるのが特徴です。 以下はREADMEを翻訳したものをベースにしています。 「Limo」って何？ こんな特徴があります！ 簡単なファイル読み書き：わずかなコードでファイルの読み書きを実現 変更の自動書き込み：using 構文を用いてブロックスコープを抜けると、自動的にファイルに変更を書き込む 多様なファイル形式のサポート：JSON、JSONC、TOML、YAMLなど、さまざまなファイル形式に対応 データ検証：カスタムバリデータ関数を用いてデータの妥当性をチェック可能 using構文とは？ using構文は、TypeScript 5.2で導入
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
誰でも簡単に理解できる！JavaScriptでの配列と連想配列の初期化方法をマスターしよう｜DAD UNION – エンジニア同盟
JavaScriptはWeb開発で非常に広く使われているプログラミング言語です。JavaScriptの配列や連想配列の初期化方法を理解することは、データの管理や操作を効果的に行うための基本的なスキルとなります。 この記事では、配列と連想配列の基本的な概念、初期化の方法、具体的な利用場面やメリット・デメリットについて詳しく説明します。 配列、連想配列とは 配列 配列（Array）は、複数の値を一つの変数に格納できるデータ構造です。配列内の各値は「要素」と呼ばれ、インデックス（0から始まる番号）によってアクセスできます。 例： let fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits[0]); // 'Apple' console.log(fruits); // 'Banana' console.log(fruits); //
JavaScriptでオブジェクトの配列(普通の配列でもOK)に対し、あるプロパティの値をキーとして、条件を満たす要素のみを抽出したいときは、array.filter() メソッドを使う。(ソートしたい場合は、ここを参照。) 例えば、以下のような配列があるとする。 // JavaScript gLines = [ { ln_file: "T1301451.json" ln_key: "1301451" ln_name: "[ＪＲ]岩泉線 (茂市～岩泉) " }, { ln_file: "T1301541.json" ln_key: "1301541" ln_name: "[ＪＲ]北上線 (北上～横手) " }, { ln_file: "T1301671.json" ln_key: "1301671" ln_name: "[ＪＲ]磐越東線(ゆうゆうあぶくまライン) (いわき～郡山) " }]
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
想定 例えば以下のような配列があったとして、コレをcreatedAtの値で並び替えたい。 const array = [ {name: '名前1', price: 100, createdAt: '2020-08-11'}, {name: '名前2', price: 200, createdAt: '2020-08-03'}, {name: '名前3', price: 400, createdAt: '2020-08-24'}, {name: '名前4', price: 130, createdAt: '2020-08-31'}, {name: '名前5', price: 200, createdAt: '2020-08-19'}, {name: '名前6', price: 800, createdAt: '2020-08-22'}, ];
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
プログラミング言語ごとのコミュニティの最大規模はJavaScriptの約2520万人、続いてPythonが1820万人、Javaが1770万人など。SlashDataの調査
プログラミング言語ごとのコミュニティの最大規模はJavaScriptの約2520万人、続いてPythonが1820万人、Javaが1770万人など。SlashDataの調査 ソフトウェアデベロッパーを中心とした調査会社のSlashDataは6月15日、2024年第1四半期時点のプログラミング言語ごとのコミュニティの大きさについてのレポートを発表しました。 これは同社が行った世界135カ国から1万人以上の回答者を集めたアンケート結果などを基に同社が推測しレポートとして発表する予定の内容の一部を公開したものです。 下記は同社が発表したプログラミング言語別のコミュニティを大きさ順に示した図の一部を切り取ったものです。 これによると、最大のコミュニティを持つプログラミング言語はJavaScriptで2520万人。もっともポピュラーな用途はWeb開発となっています。ただしこの人数にはTypeScri
今回のブログでは皆さんにモーダルウィンドウのデザインのポイントや実装方法などを解説いたします。 モーダルが表示されている間は他の操作をすることができないため、しっかりとポイントを押さえないとユーザーに嫌われてしまう可能性もあります。 実際のサイトでの使用例も挙げながらポイントを解説していきますので、ぜひ最後までチェックいただき効果的なモーダルウィンドウを目指しましょう！ それではどうぞ！ モーダルウィンドウとは？モーダルウィンドウとは特定の操作を完了もしくはキャンセルするまで他の操作ができなくなるウィンドウのことです。 他にも似たような機能で、「ポップアップ」「ダイアログ」というものがあります。 それぞれの違いとしては、意味の焦点が異なります。
React-Paginateを入れて表示を分割した。 - KDP(電子出版)のメモ 急急如律令
今やろうとしているのがpaginationで画面の表示数を分割したい。そうしないとページが重たいのでページの読み込みが長くなり評価が落ちる。使いたいのがReact-Paginateなのだが、useEffect, useStateの使い方がよくわからなかった。表示するだけなんで現在のページ数を覚える必要がない。 基本的な操作はreact-paginateの説明通りにやったが操作が面倒なのでコンポーネントで分割した。詰まったところはどうやってデータを渡したり分割しているのかが触ってコンソールログに表示するまでわからなかった。 zenn.dev github.com Gatsbyにもページャーのやり方はあるがこの場合はページを分割するのでなんか違う気がした。 www.gatsbyjs.com https://www.freecodecamp.org/learn/ freecodecampのrea
JavaScriptの活躍の場を広げる「ランタイム」の今
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
Exploring The Creative Potential Of Atropos.Js For Web Design 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 デザイン愛好家の皆さん、気を付けて乗ってください!私たちは、Webデザインにおける無限の創造性の可能性を探求するための素晴らしい冒険に乗り出します。この冒険の目的は、人気映画「ゲーム・オブ・スローンズ」のキャラクターギャラリーをThronesAPIから取得し、キャンバスとしてこのライブラリの魅力的な可能性を紹介することです。革新とインスピレーションの旅に出かけましょう。 Atropos.jsの理解 Web 開発者にとってのAtropos.jsの重要性 Atropos.jsによるスクロールベースのギャラリーの構築 プロジェクト環境のセットアップ スクロールベースのギャラリ
Firefox系ブラウザでCosenseのブックマークレットが改行を多く出力する場合の対処法 - 小技チョコレート
Cosense（旧Scrapbox）に外部のウェブページのテキストを取り込むための公式のブックマークレット（"Scrap to ○○"）をFirefox系のブラウザで使用したとき、取り込まれたテキスト内の改行の回数が、元のテキストよりも多くなってしまう場合があるようです。 ブックマークレットのJavaScriptを少し改変することにより、改行の回数を元のテキストと同じにすることができたので、ここに載せておきます。 改変後のJavaScript スクリプト内のPROJECT_NAMEとPROJECT_URLを、ご自分のCosenseのプロジェクト名とプロジェクトURLに置き換えて下さい。 javascript:(function(){var title=window.prompt(`Scrap "${document.title}" to PROJECT_NAME.`,document.ti
【JS体操】第2問「画像の横長具合を比較しよう」〜正攻法＆ハック部門の解説〜 - KAYAC engineers' blog
こんにちは！ カヤック面白プロデュース事業部のおばらです。 普段は受託案件のデザイン・フロントエンド開発などを担当しています。 さて、『JS体操』第2問 いかがでしたか？ 今回初めての方々 第1問に引き続きの方々 複数のアプローチで何通りも回答してくださった方々 普段業務で JavaScript をバリバリ書いているであろう方々 JavaScript を学んでいる学生の方々 などたくさんの方々が挑戦してくださいました。 とても嬉しいです。ありがとうございます！ 『JS体操』とは？ 『JS体操』とはカヤックが主催する JavaScript のコードゴルフ大会です。 もともとは社内の勉強会として始めた施策です。 その詳細は以下のブログ記事を御覧ください！ techblog.kayac.com 第2問の詳細はこちら https://hubspot.kayac.com/js-taiso-002 も
VSCodeのExtensionを作成したら(こちらの記事参照)、次のステップはMarketPlaceにリリースですね。リリースまでの対応についてまとめたので参考にしてください。 VS Codeの拡張機能をマーケットプレイスにリリースするには、以下の手順で行いました。これには、拡張機能のパッケージ化、Visual Studio Code Publisherの設定、拡張機能の公開などが含まれます。 Azure DevOpsアカウントの作成とPublisherの登録 アカウント作成 azure.microsoft.com にアクセスしてアカウントを作成します。 このウインドウはそのままContinueでOK この画面まで来たらアカウントの作成はできています。 そのままプロジェクトを作成してしまいましょう。 プロジェクト作成 適当なProject name・Description（プロジェクトの
### New features Support ES2025 duplicate capture group names in regular expressions. ### Bug fixes Include `VariableDeclarator` in the `AnyNode` type so that walker objects can refer to it without getting a type error. Properly raise a parse error for invalid `for`/`of` statements using `async` as binding name. Properly recognize \"use strict\" when preceded by a string with an escaped newline. M
CodeceptJSにトライしてみた。 - Qiita
最初に 本記事はGitHub: GOAMI-Takaaki/codeceptjs-hotel-planisphereの転記になります。 概要 自動化練習サイト「HOTEL PLANISPHERE」を対象に、Gherkin記法のテストを、CodeceptJS で実装したサンプルコードを紹介します。 対象 サービス HOTEL PLANISPHERE - 自動化練習サイト シナリオ testplanisphere/hotel-example-webdriverio-ja 構成 自動化フレームワーク CodeceptJS + Playwright プログラミング言語 TypeScript テスト記法 Gherkin 環境 ライブラリ Node.js OS WSLg + Ubuntu 22.04.2 LTS 基本 CodeceptJS とは E2Eテストフレームワークである。 Node.jsプロジ
数日前につぶやいたこの不具合ですが、直し方をググっていたら簡単な方法がありました。 リンクを２回タップしないと動かない原因タッチデバイスでhover動作が反応しないため１回目無反応、２回目でリンク反応のような動きになるようです。 私の環境ではiOS版Chromeで確認でき、Safariでは問題ありませんでした。 直し方こちらのサイトを参考にさせていただきました。 htmlに以下のscriptを追加します。（Webテク倉庫様からそのまま引用） <script>document.addEventListener('touchstart',function(){});</script></body>の直前に加えればいいみたいですが、Jimdoのようにhtmlを編集できないテンプレートなら<head></head>内に加えれば全ページに適用されます。 これでモバイル版Chromeのリンクも正常に反
みなさんこんにちは、現役エンジニアのサメハックです アパレル企業でトップ販売員を経て 未経験からWebエンジニアに転職し、 現在正社員として5年働いています！ JavaScriptの解説シリーズです。 今回はexportとimportを使ったモジュール化について学んでいきましょう！ 駆け出しエンジニアや未経験の方、 また新入社員を指導する先輩社員にとっても わかりやすいように解説していきます！
Cannot read properties of undefinedエラーとは？原因と解決策を解説！ この記事ではJavaScriptで発生する『Cannot read properties of undefined』エラーの原因と解決方法について説明しています。以下の内容を説明します。 「Cannot read properties of undefined」エラーとは「Cannot read properties of undefined」エラーの原因と解決方法未定義のオブジェクトのプロパティにアクセスする未定義の配列の要素にアクセスする存在しないDOM要素にアクセスする分かりやすく説明するように心掛けていますので、ご参考になれば幸いです。 「Cannot read properties of undefined」エラーとは「Cannot read properties of und
JSer.info #696 - Storybook 8.1がリリースされました。 Storybook 8.1 Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応しています。 pacakge.jsonのimportsフィールドで特定のモジュールを条件分岐して読み分けるための仕組みであるSubpath importsについては、次の記事でも解説されています。 Type-safe module mocking in Storybook Mocking modules • Storybook docs その他には、React 19/Angular 18のサポートなども含まれています。 Turborepo 2.0がリリースされました。 Turborepo 2.0 Turborepoはmonorepo向
「Cloudflare Workers活用事例 業務利用の決め手とその効果に迫るLunch LT」https://findy.connpass.com/event/318382/ での発表資料です。
こんにちは、技術推進部の谷黒と申します。 スパイダープラスでは日々の業務での出来事や向き合った技術的課題を定期的にブログとして発信しております。 さて、今回はiframeをテーマにします。こちらは外部サイトなどをHTML内に埋め込みたい時などに使うことが一般的です。 ご存じの方もいらっしゃると思いますが、iframeはフレーム内の値をフレームの外の世界に渡すことができます。 今回、私たちはヘッドレスなAPIを使わずiframeをデータ受け渡し専用に用いた手法を採用し、機能開発を行いました。その方法を紹介いたします。 背景 私が開発を担当しているBIM（*Building Information Modelingの略で図面上により詳しい属性情報などがついたモデリングのこと）のサービスは、基本機能を提供するSPIDERPLUSとはマイクロサービス的な関係にあり、SPIDERPLUSとは独立した
WebAssembly’s JavaScript Promise Integration (JSPI) API has a new API, available in Chrome release M126. We talk about what has changed, how to use it with Emscripten, and what is the roadmap for JSPI. JSPI is an API that allows WebAssembly applications that use sequential APIs to access Web APIs that are asynchronous. Many Web APIs are crafted in terms of JavaScript Promise objects: instead of im
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
Vite ってよく聞くけど何なんですか？ あれは
とにかく軽いLightbox系スクリプト「Luminous」の使用方法
TypeScript 5.5 で追加された正規表現構文チェックを理解する
How JavaScript Is Finally Improving the Module Experience
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
Limo：using構文を用いたファイル読み書きライブラリ
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
JavaScriptでオブジェクトの配列を filter() を使ってフィルタリングする | Try Lifelog
【JavaScript】オブジェクト配列を特定のキーでソートする方法 | ramble - ランブル -
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
モーダルウィンドウのおすすめデザインや実装方法をご紹介（デモサンプル付き） | 東京のホームページ制作 / WEB制作会社 BRISK
Atropos.jsで実現する、もっとスクロールしたくなるWebデザイン - コハム
VSCodeのExtensionをMarketPlaceにリリースする方法 - Qiita
Release Version 8.12.0 · acornjs/acorn
モバイルページでリンクを２回タップしないと反応しない時の対処｜在ル在リ
【Chome126】View Transitions APIで滑らかな画面遷移を実装する
【JavaScript】exportと importを使ったモジュール化【module】
Cannot read properties of undefinedエラーとは？原因と解決策を解説！
2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)
prismaのような感覚でスプレッドシートを操作できるGASライブラリ "GASsma" - Qiita
Cloudflare Workersで構築する非同期ジョブシステム
iframeをデータ受け渡しのために使ってみた - SPIDERPLUS Tech Blog
JavaScriptでCSVファイルを読み込んでデータを表示する方法｜DAD UNION – エンジニア同盟
大量のPromiseを捌く手段｜非同期処理を極めよう！Promiseの基礎
WebAssembly JSPI has a new API · V8