htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
JavaScriptでObjectに空のStringを足すと0になる！？……わけではなかった
ASTをみてみよう この不思議な現象を調査するために、AST（Abstract Syntax Tree: 抽象構文木）の状態を見てみることにしました。ASTはソースコードを構文解析した結果をツリー構造にしたもので、AST Explorerを使うと簡単に見ることができます。 ({}) + "" のAST ({}) + "" のASTをみると、ひとつの ExpressionStatement となっているのがわかります。ExpressionStatement の leftは ObjectExpression 、 operator は + 、rightは Literal となっていて、たしかに Object と String の足し算になっています。これなら確かに"[object Object]" が返ってくるでしょう。 {} + ""のAST しかし、{} + "" のASTをみると、Bloc
【JavaScript】オブジェクトの比較についてまとめてみた - Qiita
はじめに 業務でオブジェクトの比較を行うことがあって、等価演算子を使って実装したら思った動きになりませんでした。 下記のイメージになります。 const objectCarA = { make : "Toyota", model : "Corolla", color : "red" } const objectCarB = { make : "Toyota", model : "Corolla", color : "red" } const isEqualCars = objectCarA === objectCarB console.log(isEqualCars) // false (あれ、trueにならないの？) 先輩にその理由を教えてもらったので、ここにまとめます。 参照型（オブジェクト型） 基本型（プリミティブ型） JavaScript のデータ型は、大きく２つに分けて 「基本型
【JavaScript】URL文字列が有効か判定する方法 - Qiita
try...catchを使用する URL()コンストラクターが与えられたURL文字列が有効でなければ例外をスローすることを利用して以下のように判定します。 function isValidURL(url) { try { new URL(url) return true } catch { return false } }
もう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トレンドで調べた結果である。 アメリ
JavaScriptのイベント種類 - Qiita
JavaScriptのイベントとは？ ユーザがボタンをクリックしたり、キーボードで入力したりなど操作することで何らかの動作をする、きっかけのことです。 イベントの設定はaddEventListener()メソッドを使います。
Bootstrapが難しいので、苦し紛れにJavaScript関連用語だけざっくり調べた - Qiita
注記 この記事の投稿者はRuby on Rails初学者であり、自身の学習の備忘録目的で記事投稿を行なっております。 情報の正確さには最大限注意をしておりますが、もし誤り等がございましたらお知らせいただけますと幸いです。 ご覧いただきありがとうございます！ Ito と申します！ Ruby on Rails初学者です。 調べた動機、経緯 初めてのアプリを作成しようと思いRails new後、Bootstrapを導入しようとしたら数時間ハマりました。 開発環境はRails7系を使用していますが、ChatGPTに質問をしたところWebpackerを薦められました。 JavaScript周りの知識があればChatGPTのアドバイスの矛盾点に気付けたのでしょうが、知識の持ち合わせがなかった私は、なすがままに振り回されてしまいました。 悔しかったのと、「自分と同じように機械に使われる初学者さんを1人で
【JavaScript】ES2024の新機能まとめ - Qiita
ES2024 / ES2023 / ES2022 / ES2021 JavaScriptの仕様は、TC39というところで決められています。 ブラウザベンダや関係者が定期的に会合を行い、様々な新機能について話し合ってどのようにするかを決めています。 ちなみに2023年9月のミーティングは東京で行われました。 ここでは2023年にFinishedになった、すなわち仕様が確定して複数のブラウザで実装がなされたproposalについて紹介してみます。 つまり、主要ブラウザでは既に使用可能です。 なお、2023年2月から2024年1月までにFinishedになったproposalがES2024と呼ばれるみたいです。 ずれているせいでややこしいですね。 年と一致させてくれ。 Finished Proposals Promise.withResolvers Promiseを外からresolve/reje
JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。
はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します 用はi18nの書式版です。 例を出すより見たほうが早いので実際に機能解説します。 (先に言っておきますが、実はこれバックエンド無しで自然言語処理が出来る優れものです。) 用語解説 localesって何？そもそもnewって何？って人がいるかもしれないので locales https://developer.mozilla.
JavaScript の Segments の使い所を考える - Qiita
JavaScript の Segments という機能を知りました。 JavaScript って標準 API でこんなこともできるのかhttps://t.co/ckHTlqcium pic.twitter.com/hrwfgvtF4J — naporitan (@naporin24690) December 25, 2023 これは面白い！ ブラウザの標準機能で自然言語処理ができる時代だ！ とりあえず、お手元で試したい方はこちらをどうぞ。お使いのブラウザの console に貼り付ければ動くはずです。 const segmenter = new Intl.Segmenter("ja", { granularity: "word" }); const string1 = "東京都府中市は「とある科学の超電磁砲」の舞台ではない。京都府中京区も違う。"; const segments = seg
【React】JavaScriptからTypeScriptに移行してみた - Qiita
import React, { useState, useEffect } from 'react'; import styles from './App.scss'; import { pokeNameList } from './pokeNameList'; const App = () => { return <SuggestForm />; }; const SuggestForm = () => { const [value, setValue] = useState(''); const suggestNum = 15 ; const wordList = pokeNameList; const [suggestions, setSuggestions] = useState([]); useEffect(() => { const suggestions = getSugge
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
JavaScriptは「参照渡し」をしないって本当？ - Qiita
概要 タイトルの答えはYES. JSを勉強し始めたばかりで、JSにおける値渡し/参照渡し/参照の値渡しの処理の違いがわかりませんでした。 調べていくうちに「え、JSって参照渡ししないんだ！？」となったので、ここに学んだことをまとめようと思います。 追記：いただいたコメントをもとに修正しました。コメントありがとうございます！ 結論 JSでの処理は「プリミティブ値は値渡し」「オブジェクトは参照渡し」と言われていますが、厳密には「参照渡し」はしません。 JSでは「参照の値渡し」(共有渡し、本文中では共有渡しに統一)が行われています。 値渡し、参照渡し、共有渡しとは 値渡し 引数に値を渡す時、変数の値をコピーして渡す処理。 呼び出しもとの変数は変化しません。 参照渡し 引数に値を渡す時、参照(=メモリ番地)で渡す処理。 変更が呼び出しもとに反映されます。 共有渡し 引数に値を渡す時、変数に格納され
JSONって何？ - Qiita
この記事は「RUNTEQ Advent Calendar 2023」の24日目に参加しています🎄🎅✨ はじめに 現在プログラミングスクールRUNTEQで学習中のhimeです！ 以前から気になっていた「JSON」について理解したいと思い、今回テーマに選びました！ JSONについて整理したのち、最後にアプリのプロジェクトを立ち上げた際に生成される package.jsonというファイルが何なのか理解したいです。 自分が作ったアプリのpackage.jsonの中身を解説できたらな〜と思います。 JSON とは JSON(ジェイソン) は JavaScript Object Notation の略称です。 日本語訳だと「JavaScriptオブジェクト記法」になります。 JSONは、データの構造化とデータの交換を目的とした軽量なデータ形式で、 ファイルの拡張子は.jsonです。 まとめると、J
【JavaScript】Promise 〜 初めてのAPI操作 〜 - Qiita
初めまして、現在プログラミングスクールで学習中のやまちゃんと申します。 Reactを勉強してみたいなと思っていましたが、そもそもJavaScriptの基礎を さらっとしか触れていなかったので勉強することにしました。 その中で非同期処理において大事だと言われるPromiseについて少し調べてみました。 今回はcatAPIを用いて猫画像を取得する非常にシンプルなコードで見ていこうと思います。 catAPIについては下記を参照ください！ catAPI ※ この記事は「RUNTEQ Advent Calendar 2023」の21日目を担当した記事です。 そもそも非同期処理とは？ JavaScriptでは基本一つの処理が完了するまで他の作業はできませんが、 非同期処理は一つの作業をしている間に他の作業ができるようにした仕組みの事です。 参考記事 非同期処理とは何か、何が嬉しいの？ Promiseと
Javascriptがわからなかったので「DOM」を調べました。 - Qiita
はじめに こんにちは！ ガク@Necono_Engineerと申します！ プログラミングスクールRUNTEQで現在Ruby on Railsを中心に学んでいます。今回はjavascriptやReactを学ぶ中で出会ったDOMという概念についてまとめてみました！ ("ドム"と読みます) 概要 この度、PF作成のためにReactを学び始めたところ仮想DOMという言葉を知りました。 仮想.... というかまず、"DOM"ってなんなんだ？ そんな疑問を解消するためにJavaScript初心者がゼロから少しずつ学んだことを共有していきたいと思います。 DOMとは? DOM（ Document Object Model ）はWeb API( Application Programming Interface )の1つです。 API（ Application Programming Interface
【JavaScript】dayjsでの日付処理まとめ
コードをローカルで確認する場合、CDN を読み込むため VSCode の拡張機能 Live Serverなどを導入し、localhost を立てれるようにしてください。 GitHub dayjs vs moment.js 最初に少しだけ小話を。 dayjs と並んでよく使われているライブラリとして moment.js が挙げられます。 なんとなく dayjs が一強になっているのかなと思ってたのですが、実際は両者どのくらいの利用差があるのか npx trends で確認してみました。 結果、どうやらまだ moment.js の方が利用率は高いようです。 しかし、dayjs も 6 年間という歴史の差をひっくり返す勢いで利用されておりトレンドとしてはやはり dayjs に向いてきているのかなと思いました。 どちらを使うかは機能面など状況によりけりだとは思いますが、両者を比較をすると以下の差が
JavaScript dayjsはMoment.jsの代替になるか? | nansystem
JavaScriptの日付操作には罠が多く、業務では日付操作を簡単かつ安全に操作するライブラリが使われる。日付操作のライブラリの中でもMoment.js (opens new window)(Star数40,601)はよく知られているが、ファイルサイズが大きくパフォーマンス改善の妨げになることがある。 そこでこの記事ではより軽量でMoment.jsの代替となるdayjs (opens new window)(Star数19,872)を紹介する。 # dayjsとは dayjsとは、日付操作を簡単にするJavaScriptのライブラリだ。Moment.jsのAPIと広く互換があり、gzip圧縮されたサイズは2.71KBと軽量なのが特徴だ。 # インストール dayjsが十分Moment.jsの代わりになり得るのか確認していく。 まずはインストールして、業務で使われる日付操作をみていく。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Auth.js v5ではじめる本格認証入門
【JavaScript】三項演算子の入れ子、いうほど可読性悪くない説 - Qiita
