翻訳について これは Allen Wirfs-Brock, Brendan Eich 著 JavaScript: the first 20 years の翻訳です。英語版は CC BY 4.0 ライセンスで公開されています。 この翻訳は CC BY 4.0 ライセンスの許諾に基づいて公開されます。 PDF/EPUB 版について この翻訳の PDF/EPUB 版を BOOTH で販売しています。
JavaScript: 最初の 20 年 (翻訳) - inzkyk.xyz
翻訳について これは Allen Wirfs-Brock, Brendan Eich 著 JavaScript: the first 20 years の翻訳です。英語版は CC BY 4.0 ライセンスで公開されています。 この翻訳は CC BY 4.0 ライセンスの許諾に基づいて公開されます。 PDF/EPUB 版について この翻訳の PDF/EPUB 版を BOOTH で販売しています。
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
JavaScript Primer - 迷わないための入門書
Todoアプリのリファクタリング 前のセクションで、予定していたTodoアプリの機能はすべて実装できました。 しかし、App.jsを見てみるとほとんどがHTML要素の処理になっています。 このようなHTML要素の作成処理は表示する内容が増えるほど、コードの行数が線形的に増えていきます。 このままTodoアプリを拡張していくとApp.jsが肥大化してコードが読みにくくなり、メンテナンス性が低下してしまいます。 ここで、App.jsの役割を振り返ってみましょう。 Appというクラスを持ち、このクラスではModelの初期化やHTML要素とModel間で発生するイベントを中継する役割を持っています。 表示から発生したイベントをModelに伝え、Modelから発生した変更イベントを表示に伝えている管理者と言えます。 このセクションではAppクラスをイベントの管理者という役割に集中させるため、Appク
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
Jest · 🃏 Delightful JavaScript Testing ドキュメント
スナップショット機能で大きなオブジェクトを容易に追跡できるテストを作成できます。スナップショットはテストと一緒に、あるいはインラインに埋め込んだ状態で表示できます。
【JavaScript】 変数名の$（ドルマーク）はどんな意味がある？
更新日：2023/10/11 jQueryの変数には$（ドルマーク）をつける。 JavaScriptの勉強を始めたころ、参考にしていたサイトにそう書いてありました。 僕は、そういうものだと深く考えずに使っていました。 ですが今になってドルマークには何か深い意味があるのではないかと、疑問に感じました。 そこで今回は、『変数名の$（ドルマーク）はどんな意味があるのか』について調べてみました。
JavaScript の undefined と null を完全に理解する
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true 他の falsy な値（false とみなされる値）との比較は、ゆるい比較演算子であっても区別されます（仕様 同上）。 console.log(undefined == fa
永遠にスクロールしていたくなる、気持ちいいエフェクト -Intersection Observer Scrolling Effects
Intersection Observerとカスタムプロパティを使用して、グリッドやリストのスクロールビューにアニメーションを適用するテクニックを紹介します。 アニメーションはスクロールに連動して動作し、GridやListなどよく見かけるUIだけでなく、水平スクロールやジッパー・回転などもあります。 どのスクロールエフェクトも軽快な動作で、ちょー気持ちいいです！ Intersection Observer Scrolling Effects ✨ Intersection Observerやカスタムプロパティについて詳しくは、下記をご覧ください。 Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる Intersection Observerを使用すると実装が簡単に！Vue.jsでスクロールイベントをトリガーする方法 CSSの変数（カスタム
CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。 ScrollBtween ScrollBtween -GitHub ScrollBtweenの特徴 ScrollBtweenのデモ ScrollBtweenの使い方 ScrollBtweenの特徴 ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネ
最速のアニメーションライブラリはこれだ! JSライブラリの性能をDOMとWebGLで比較検証 - ICS MEDIA
HTMLのアニメーション実装に役立つさまざまなJavaScriptライブラリがあります。前回の記事「現場で使えるアニメーション系JSライブラリまとめ」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます。また、パフォーマンスがよければCPUへの負荷が低くなるため、サイト訪問者のスマートフォンの消費電力にも優しいとも言えます。ウェブ制作者はJSライブラリのパフォーマンスにも気を配りたいものです。 今回検証したJSライブラリ アニメーション（トゥイーン）用のJSライブラリやテクノロジーとして次の9種類で比較しました。バージョンは2022年5月現在の最新版を利用。ウェブページ用途の①DOM版と、ハイパフォーマンス用途の②WebGL版の2通りの方法で検証しています
欽ちゃんの仮装大賞 パネル再現ツール
欽ちゃんの仮装大賞で使われていたパネルをwebアプリのツールとして再現してみました。操作方法は A S D キーでカウントアップ、R キーでリセットできます。ヘルプボタンからスマホ向けのボタンを表示する機能がありますので、スマホユーザーの方はそちらのボタンを利用して楽しんでください。
Intense Images
Intense Image Viewer A javascript library for viewing images in a fully full screen. Click the images to see it in action!
Vue.js、Nuxt JSを学習するときにやったこと
2021年7月11日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↑私が10年以上利用している会計ソフト！ 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
10年引きこもりニートしてた就職氷河期直撃アラフィフでも社会復帰してReactで成り上がれるよ｜erukiti
社会問題にもなっている就職氷河期直撃世代のえるきちです。クッソどうでもいい専門学校を出てから10年引きこもりニートしてました。 どん底（と言っても本当にどん底ではないかもしれない）からでも、普通に人生なんとかなるみたいな話です。あと、怪しげなサロンやスクールに通うくらいならN予備校に通う方がいいと思いますという話です。 ワナビー界隈だと年収公開したりするようなキラキラパリピが人気集めるんですって？わざわざ金の話をこれ見よがしに語る人、まっとうなエンジニアではないので気をつけた方がいいですよ。 年収は特に書きませんが、スタートアップに勤めて、同人誌書いたりしつつ、面白おかしく生きるのに問題無い金額は稼いでおります。 前提: 他の世代の人への補足アラフィフ4x歳だったら、経験も豊富で金も一杯もらってんだろ当然だろみたいに考える人もいるかもしれませんが、それは必ずしもそうとはいえません。 たとえ
画像を拡大させるJavaScript「JQuery.iviewer」
画像の細部まで拡大させることにより、商品などを魅力的に見せることが可能です。 今回はJaavScriptライブラリのjQueryプラグイン「JQuery.iviewer」を利用して実現します。 sponsors 使用方法 JQuery.iviewerにある、jquery.iviewer.jsとjquery.iviewer.cssをダウンロードします。 またMouse Wheel Extensionからjquery.mousewheel.jsを、もちろんjQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" href="jquery.iviewer.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascrip
この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
React – ユーザインターフェース構築のための JavaScript ライブラリ
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。 自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。 コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
難しすぎると話題の「警視庁の音ゲー」、JavaScriptでベタ書きされていた→作り切る根性がすごいし参考になりそうな実装だった
Hello! | party.js
