Extensible Web を支える低レベル API 群 - Block Rockin’ Codes
Intro 最近 Extensible Web の話がたまに出るようになりましたが、なんというかレイヤの高い概念(ポエム)的な話が多い気がしてます。 もう少し具体的な API とか、「それコード書く上で何が変わるの？」って話があまりないので、今日はそこにフォーカスして、 Extensible Web 的な流れの中で整理された API の話をします。 しかし、実際には API が 「Extensible Web という理念で生まれたかどうか」は自明ではないので、 今標準化されている低レベルな API を拾い、それを整理するというエントリだと思ってもらと良いかもしれません。 あまり知られてない API もあると思うので、これを期に「これがあれば、今までできなかったアレが、標準化や実装を待たなくても、できるようになるな」と思ったら是非書いてみると良いと思います。 実際はそれこそが Extensi
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
HTMX入門【はじめからそうやって教えてくれればいいのに！】
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ HTMXとは？ HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. （訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
いまどきな JavaScript に入門しよう！『流麗な JavaScript』を読んで（上） - 虎の穴ラボ技術ブログ
こんにちは。虎の穴ラボの古賀です。 9 月の連休で社内の技術書購入を支援する制度を利用して購入した『流麗（ELOQUENT）な JavaScript 第 3 版 現代のプログラミング入門』を読みました。 流麗なJavaScriptの書影 良い本でしたので、本書の前半部分の概要とその中で良かったところや気になったところをご紹介します。 どんな本か 基本情報 オススメする読者層 著者、訳者について 構成について Chapter1〜3：プログラムの基礎的なところから、制御フロー、関数など Chapter1 Chapter2 Chapter3 Chapter4 Chapter5 Chapter6 Chapter7 Chapter8 Chapter10 Chapter11〜22：未読 良かったところ サンプルコードの実行環境や練習問題がある 初心者がつまづきがちなところについて説明がある 気になった
JavaScriptを雰囲気で使っていたので勉強し直したら知らなかったこと
小ネタ。chromeで動作確認 何となく使っていたので改めて勉強してみたら知らなかったことなどのまとめ this 関数の呼び出し元のオブジェクトがthisになる。ただし、呼び出し元のオブジェクトの指定がない場合は、windowオブジェクトがセットされる。ただし、厳格モードuse strictの場合はundefinedがセットされる const foo = { bar: function() { // 呼び出し元はfoo.bar() console.log(this); // foo object const baz = function() { // 呼び出し元はbaz()でオブジェクトの指定がない console.log(this); // window object } baz(); const qux = function() { 'use strict'; // 呼び出し元はqux
JavaScriptのデバッグにはdebugger文を使おう - Qiita
JavaScript初心者のため、デバッグ力がまだまだ拙くどうしたらデバッグ力ってつくのだ…と悩んでいたら 👨💻 < スタックトレースするといいよ！ 👨💻 < スタックトレースするにはdebuggerとかconsole.trace()使うといいよ！ と教えていただきdebuggerを使ったらとても便利だったので🙏 スタックトレースとは スタックトレース (stack trace)とは エラーが発生したときに表示される内容で、そのエラーが発生するまでの過程（どんな処理がどの順番で呼び出されたかの流れ）を、ざっくりと表示したものです。 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 スタックトレースを使って問題をどう切り分けるか まずは問題が起きている箇所のスコープを狭くしていきましょう💡 問題の切り分け方として ざっくり入口と出口の関数に適切な値が入って
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
Structure and Interpretation of Computer Programs, Comparison Edition
The text of the original SICP 2nd edition is licensed by Harold Abelson and Gerald Jay Sussman under a Creative Commons Attribution-ShareAlike 4.0 International License (CC BY-SA). The text of the JavaScript adaptation is licensed by Harold Abelson, Gerald Jay Sussman, Martin Henz, and Tobias Wrigstad, also under CC BY-SA. The figures in the JavaScript adaptation are derived from figures created b
TypeScript Deep Dive 日本語版 | TypeScript Deep Dive 日本語版
TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 ~�
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
パネル、カード、ボタンなどのUI要素をふわりと浮かせ、視差効果を与えるJavaScriptの超軽量ライブラリ -vanilla-tilt.js
パネル、カード、ボタンなどのUI要素をユーザーの操作にあわせて、ふわりと浮かせ、アニメーションで気持ちよく動かして視差効果を与えるJavaScriptの超軽量ライブラリを紹介します。 実装は簡単で、HTMLを汚さずに実装することもできます。 vanilla-tilt.js vanilla-tilt.js -GitHub vanilla-tilt.jsの特徴 vanilla-tilt.jsのデモ vanilla-tilt.jsの使い方 vanilla-tilt.jsの特徴 vanilla-tilt.jsは、Tilt.js（jQueryバージョン）からフォークされたスムーズな3Dチルトを簡単に実装できるJavaScriptライブラリです。 滑らかなアニメーション 軽量 60fps バニラJavaScript（依存関係はありません） 実装は簡単、カスタマイズも簡単
再帰的な構造のデータの同値性判定はどうしたらいいか - 貳佰伍拾陸夜日記
数日前にTwitterで, JavaScriptのオブジェクトに対する===の挙動が初心者には難しいみたいな話を見かけた. 発端や周辺の議論をちゃんと追いかけてないからとくに出典は貼らない. たぶん元々の話は「へぇ, こういう挙動なんだ, 簡単ではないね」くらいの話だったのかもしれない. 自分のタイムラインの観測範囲では「そうだそうだ, (参照の同一性ではなく)同値性にしとけばいいのに」と思っている人もそれなりにいそうに見えた. 個人的にも同値性が簡単に確認できるとよい気はするものの, 「なんでそうしないんだ, オブジェクトの中身を確認していくだけだろ!」みたいな簡単な話ではないことも知っているため, 以下のようなツイートをしたのだった. JavaScriptのオブジェクトの同値性、再帰的な構造とか作るとぜんぜん自明じゃないんだよなぁ。リンクの構造は違うけどプロパティを辿ったときのパスはど
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】ネイティブで集合演算できるようになった - Qiita
Learn JavaScript | web.dev
Next.js 2022年度リクルート エンジニアコース新人研修講義資料 - Speaker Deck
