May 19, 2024 - Póvoa de Varzim, Portugal 🇵🇹 A virtual DOM in 200 lines of JavaScript In this post I’ll walk through the full implementation of a Virtual DOM in a bit over 200 lines of JavaScript. The result is a full-featured and sufficiently performant virtual DOM library (demos). It’s available on NPM as the smvc package. The main goal is to illustrate the fundamental technique behind tools li
JavaScriptのProxy(Reflect) JavaScriptのProxy(Reflect)と 昨日より仲良くなる20分 2024.05.24 JavaScript祭り hiroko_ino ※掲載させていただいているOSSのコードは 発表現在のものです 自己紹介 猪野 浩子 / hiroko_ino 所属：RUN．EDGE株式会社 Web Front-end Engineer, Designe Vue.jsやFlutterでの開発や、UIデザインを時にはやっ たりしま 神奈川在 趣味はゲームのRTA
【初心者向け】Reactでよく使うJavaScriptのメソッドや構文13選とReact Hooks(プチ紹介) - Qiita
はじめに 最近、ひょんなことから初学者向けのReactアプリをレベル別に10個くらい開発しながら、ハンズオンで学べる教材的なものを作成する機会があり、それを実施する前に最低限理解していたら学習がスムーズに進むだろうと思われるものをまとめました。 また、予習編としてReact専用で使用されるものも簡単に紹介します。 ちなみに、すでに「基本編くらいわかるわ！」って方は予習編はみなくていいので、以下のリファレンスのチュートリアルをやっちゃってください。Udemyなんかでもいいと思いますのでどんどん手を動かすフェーズに入っていきましょう。 https://ja.react.dev/ 基本編(JavaScript) mapメソッド 配列内の全ての要素に対して関数を適用し、新しい配列を作成します。 const items = ['apple', 'banana', 'cherry']; const l
前回まではこちらを参照してください。 https://qiita.com/tri-comma/items/e9790b420d9786f91149 https://qiita.com/tri-comma/items/be169c9163d637d82af3 最後に音声再生を実装しました。 （ついでにコインも描画しました） 前回ソースからの差分 if (this.status == this.STS.SPINING) { const medal = this.ROULETTE[this.ridx]; this.medal -= medal; this.player.medal += medal; this.status = this.STS.STANDBY; - this.onstop ? this.onstop() : null; + this.onstop ? this.onstop(t
２か月かけたhtml,CSS,JavaScriptで編集できる、video,audio,image,table,textを組み合わせ時間経過で変えて一つの動画的に見られる、試行錯誤の結果が出ましたので、お知らせします。 なにぶん、大きくなったのでホームページにて、公開と致しております。アドレスは、 https://tattyan0-0.sakura.ne.jp/etc/index.html お得なように、色々付属して大きくなっております。必要なのを残して掃除して使う事をお勧めします。 すべて、実働のファイルを提供いたしています。 検査不足の動作不具合などが見つかったら直していただいて結構です。著作権は保留「使わない」ので、二次頒布、類似品は、覚悟の上ですが、使用者におかれましたら、すべて無料ですから 騙されない様にしてください。 こんな感じ。では、よろしくお願いいたします。プログラムを組む
JavaScript: 圧縮力編8 - Qiita
皆様お待ちかねの圧縮力の記事となってしまいました。今回はhuffman符号と部分一致予測(通称PPM)の組み合わせを紹介します。 構造 まずは接尾辞木のようなものによって文脈を構築し、高速化を図ります。その弊害としてhuffman符号は毎回最初から作り直す羽目になります(本末転倒)が、前回の記事のものよりは遥かに高速です。 0次の文脈(初期接尾辞木)には最初から全ての文字を登録しておきます。sは文字(実装上は整数)、cは頻度とします。 let Tree=[]; for(let a=256;a;)Tree[--a]={s:a,c:1}; /*insert sort @A: 整列元配列 @a: 始点 @b: 終点 */ function isort(A,a,b){ for(var c,i=a,j,k;a<b;A[j]=c) if((c=A[j=k=++a])<A[i])for(;j>i;)A[
曖昧な理解ではなく、確実な理解を目指す立場から、まずコルーチンとイベントループを簡単に説明してから、Promiseとasync/awaitを解説します。 コルーチンと yield：フィボナッチ数列のジェネレーター コルーチン（coroutine）とyieldを理解するには、ジェネレーター関数を用いると効果的です。ここでは、フィボナッチ数列を生成する例を通じて説明します。 フィボナッチ数列のジェネレーター フィボナッチ数列は、次の数が前の二つの数の和である数列です。以下に、フィボナッチ数列を生成するジェネレーター関数を示します。 function* fibonacci() { let [a, b] = [0, 1]; while (true) { yield a; [a, b] = [b, a + b]; } } この例では、genというジェネレーターオブジェクトを作成し、next()メソッ
【PHP】【JavaScript】PHPで簡易WebAPI作成 〜 JavaScriptで取得しブラウザに表示させるまで - Qiita
バックエンド：PHP フロントエンド：JavaScript で開発する場合に、つなぎ込みの部分がよく分かっていなかったため学習して備忘録として残しました。 つなぎ込みの部分の理解が目的であるため、APIの内容はかなりシンプルです。 ① 簡易WebAPIの実装
前回まではこちらを参照してください。 https://qiita.com/tri-comma/items/e9790b420d9786f91149 https://qiita.com/tri-comma/items/be169c9163d637d82af3 最後に音声再生を実装しました。 （ついでにコインも描画しました） 前回ソースからの差分 if (this.status == this.STS.SPINING) { const medal = this.ROULETTE[this.ridx]; this.medal -= medal; this.player.medal += medal; this.status = this.STS.STANDBY; - this.onstop ? this.onstop() : null; + this.onstop ? this.onstop(t
JavaScriptで動画ファイルの読み込み・再生終了イベントを取得して、複数の動画を順番に、またはランダムに再生させる方法を解説！
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> </head> <body> <section> <video id="hero-movie" muted> <source type="video/mp4" id="hero-movie-mp4"> <source type="video/webm" id="hero-movie-webm"> </video> </section> <script src="js/movie-control.js"></script> </body> </html> ここでは動画を配置するDOM要素を「hero-movie」としています。 videoタグに関してですが、音声の再生を禁止する属性「muted」を指定しておかないと、iOSのSa
focus()の引数に{ preventScroll: true }を渡すとフォーカス時にスクロールしないようにできます。 document.getElementById("focus_no_scroll").addEventListener("click", () => { document.getElementById("myButton").focus({ preventScroll: true }); }); クリックするとtextareaが表示されフォーカスされる場合に、{ preventScroll: true }を指定せずにtextareaの一部が画面からはみ出した状態でフォーカスすると以下のようにtextareaが画面の中央付近に来るまでスクロールされます。 { preventScroll: true }を指定した場合には画面からはみ出した状態でフォーカスしてもスクロールは
配列とは・・・ はい‐れつ【配列／排列】 読み方：はいれつ １ ［名］(スル)順序を決めて並べること。また、その並び。「五十音順に—する」 ２ （「配列」と書く）コンピューターのプログラミング言語における、データ形式の一つ。同じ型のデータの集合を意味し、個々のデータは変数の添え字で区別する。 データ構造。データの集まりのこと。 一つの値を単体で書くのではなく、 複数のデータの集まりを関連付けて一つのまとまりとして使いたい場合に使う。 例： 嵐のメンバー５人を一つのまとまりとして定義したいが・・・ const = Jun Matsumoto const = Kazunari Ninomiya const = Masaki Aiba const = Satoshi Ohno const = Sho Sakurai これだと、１つの変数にそれぞれ５人の名前を定義しているだけなので５つの変数がそれ
![配列 [JavaScript] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3ddf704c52f357f87892db183610cbc423adc519/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU5JTg1JThEJUU1JTg4JTk3JUUzJTgwJTgwJTVCSmF2YVNjcmlwdCU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NTBiMWJiMWM1YjM3ZjFiNGY3M2MxMDZhY2IzZDY3YmI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaGlzc2hpX2VuZ2luZWVyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hMzRhYTgzZDE3ZmQyMGE2M2UwMmQ0MDc4ZDRkMzU1ZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D5376ade818d6a954f5b92b04b60d930b)
JavaScriptの "+" 演算子の謎 - Qiita
今回はJavaScriptの+演算子について私が思っていたよりも中々理解しにくいところがありましたので、記事にしてまとめてみました。 基本的な概念 JavaScriptでは、+ 演算子は2つの役割を持っています： 数値の加算：両方の値が数値の場合、これらを足します。 文字列の連結：一方または両方の値が文字列の場合、値を文字列として結合します。 型変換の例 JavaScriptは、異なる型（数値や文字列）の値が + 演算子で一緒に使われたときに、自動的に型を変換します。この型変換の仕組みが、数値が文字列に変換される理由です。 具体例で説明 例1: 数値と文字列が混ざった場合 var num1 = 1; // 数値 var num2 = "2"; // 文字列 var num3 = 3; // 数値 console.log(num1 + num2 + num3); // 出力: "123" 最
JavaScriptデフォルト引数の使い方10選
※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。 (送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。) はじめにこの記事を読めば、JavaScriptのデフォルト引数の使い方がわかり、コードの効率化や可読性向上に役立てることができます。 JavaScript初心者の方でも理解できるように、デフォルト引数の基本から応用までを10のサンプルコードとともに詳しく解説していきます。 ぜひ最後までお読みいただき、JavaScriptのデフォルト引数を活用して効率的なコーディングを身につけましょう。 ●JavaScriptデフォルト引数とはJavaScriptのデフォルト引
JavaScript には、数値、文字列、ブール値、オブジェクト、null 属性など、いくつかのデータ型があります。 VBScriptでは、 Variantという1つのデータ型しか使用しません。このデータ型は、文字列、数値、ブール値などを表現するためにサブタイプ化することができます。 JavaScript では、配列の length プロパティに新しい値を設定することで、配列を動的に展開できます。 VBScript では、配列を拡大することはできません。これらは、 redim ステートメントを使用して再入力する必要があります。 VBScript と JavaScript の両方が関数をサポートします。 ただし、VBScript ではサブルーチンもサポートされています。 サブルーチンは関数に似ていますが、値を返しません。 JavaScript では大文字と小文字が区別されます。 VBScri
JavaScriptを使って、HTMLの文章を読み込んで操作する方法と、操作した後にまた文字列に戻す方法を紹介します。そのために、DOMParserとXMLSerializerを使います。 HTMLの文字列からDOMへの変換を行うには、以下のようにします。 // HTML文字列 const htmlString = "<div><h1>Hello, World!</h1><p>This is a paragraph.</p></div>"; // DOMParserを使ってDOMに変換 const parser = new DOMParser(); const dom = parser.parseFromString(htmlString, "text/html"); // ログ出力 console.log(dom.documentElement); DOMからHTMLの文字列への変換を行
Microsoft Edgeは、初期状態でJavaScriptが有効になっていますが、無効になっていた場合は、以下の方法で設定できます。
この記事では、Railsアプリケーションで非同期的にテーブルを更新する方法について説明します。特に、スケジュール管理アプリケーションの例を用いて、特定の日付のスケジュールとその時間枠を動的に表示する方法を解説します。 1. 背景 スケジュール管理アプリケーションでは、ユーザーが日付を選択するたびに、該当日のスケジュールと時間枠を動的に表示する必要があります。この実装のためには、RailsサーバーからJSON形式でデータを取得し、フロントエンドでそのデータを使用してテーブルを更新する必要があります。 2. 実装の概要 2.1 サーバーサイド（Rails） Railsのコントローラーで、選択された日付のスケジュールと時間枠を計算し、JSON形式で返すアクションを作成します。 2.2 クライアントサイド（JavaScript） JavaScriptで、取得したJSONデータを使用してテーブルを動
//基本のクラス class Parent { example1() { console.log("example1です"); } } // クラスの継承 class Child extends Parent { example2() { console.log("example2です"); } } var sample = new Child(); sample.extends1(); // => example1です sample.extends2(); // => example2です クラスを継承するときに「extends」を使用します。子クラスで、親クラスと同名のメソッドを定義すればメソッドがオーバーライドされ、 子クラスから親クラスのメソッドを呼び出せます。 コンストラクタ(constructor)を呼び出す //基本のクラス class Parent { constructo
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
はじめに global object とは、簡単に言えば「コードのどこからでもアクセスできるオブジェクト」です。 ホスト環境（Node.jsや各種ブラウザなど）によって実装が変わります。 ※コメントいただきました。 globalThisを使用すればホスト環境に関係なくglobal objectにアクセスできるようです。 ただし、挙動が変化することはないようです。Node.jsのglobalThisはglobalと同じ挙動をし、ブラウザのwindowもしくはglobalThisとは違う挙動をします。 ブラウザの場合：window Chrome, Firefox, Safari, Edgeの各ブラウザはglobal objectとしてwindowを使用します。 See the Pen Qiita_global_window by Kohki_Takatama (@Kohki-Takatama)
JavaScript/クッキー - Wikibooks
クッキー[編集] JavaScriptを使用してクッキー（Cookie）を操作することは一般的です。クッキーは、ウェブサイトがユーザーのブラウザに保存する小さなデータの塊で、サイトの動作を追跡するためやユーザーエクスペリエンスを向上させるために使用されます。以下は、JavaScriptを使用してクッキーを設定、取得、削除する基本的な方法です。 クッキーの設定[編集] // クッキーを設定する document.cookie = "key=value; expires=Thu, 01 Jan 2025 00:00:00 UTC; path=/"; // クッキーを取得する function getCookie(name) { const cookieValue = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); retur
const n = 4; const arr1 = new Array(n).fill(null).map(_ => []);
まとめ mapメソッドとは map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。オブジェクト指向プログラミングにおいて、プログラム上の手続きの対象を抽象化する概念である。 ※mdn web docs つまり、配列の各要素に対して指定した関数を実行し、その結果を新しい配列として返すメソッドです。このメソッドは、元の配列を変更せず、新しい配列を返します。 目次 基本構文 for文とmapメソッドの比較 for文 mapメソッド 比較結果 基本構文 配列numbersの値をnumとしてコールバック関数num => num * 2に渡し、新たな配列doubled numbersとして返している。 const numbers = [1, 2, 3, 4, 5]; const doubledNumbers =
![[JavaScript] mapメソッドとは - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/57ff0cd82e1a20109e39a39df7b7719c65493e14/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMG1hcCVFMyU4MyVBMSVFMyU4MiVCRCVFMyU4MyU4MyVFMyU4MyU4OSVFMyU4MSVBOCVFMyU4MSVBRiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZjE5ZmY4NGEzOTg5YzYzNTYxNDIyNjVjNjAyM2YzYmE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBKb2NodW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTk3MjFmYjVkYzM4MmU5ZmZmMjJkM2EwODA0MzdiYzU0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D8cd82a88aad956bfcd4bc2a52706510a)
パターンマッチングする方法で、簡単なメソッドはserch()メソッドです。検索する文字列(正規表現)を引数にしているすると、最初に見つけた文字列の先頭の文字位置を表す数値を返します。マッチする文字が見つからない場合は-1を返します。 "hello world".search() // 0 "The quick brown fox jumps over the lazy dog".search("over") // 26 "abcdefghijklmnopqrstuvwxyz".search("s") // 18 "JavaScript".search(/script/ui) // 4 "Puthon".search(/script/ui) // -1
【JavaScript】ローマ字が複数入力できるタイピングゲームのライブラリと簡単な使用例【typing-jp】 - Qiita
前書き タイピングゲームのライブラリを作ったのでタイピングゲームを作りたいと思う。 成果物 雑な設計 ・日本語のテキストとローマ字を表示する。 ・入力に応じてローマ字の色を変える。 ・複数のローマ字入力に対応する。 ・ミス数、タイムを計測する。 作る ライブラリの読み込み ありがたいことにCDNが使えるので使わせてもらう。 <script src="https://cdn.jsdelivr.net/npm/@mogamoga1024/typing-jp@1.0.2/dist/cdn/typing-jp.js"></script> const allQuestionList = [ { text: "りんご", typingText: new TypingText("りんご") }, { text: "バナナ", typingText: new TypingText("バナナ") }, {
Radi Button の具体的な使い方を提示します。 group化、送信の具体例などを記載します。 gloop1とgloop2は <table><tr><td>gloop1</td><td>gloo2</td></tr></table>で省スペースも可能です。 具体的な表示 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="description" content="たっちゃん,studio。"> <title>my_test0</title> <style> body { background-color: #f0f0f0; color: #000; f
Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
はじめに 前回の記事では、ホスト環境によってglobal objectの名称と挙動が違うことを書きました。 Node.js：global ブラウザ：window （この他にもホスト環境は存在します） この記事にコメントを頂いたのですが、どうやらglobalThisという共通の名称が使用できるようです。 名称は同じ。では挙動はどうでしょうか。検証してみます。 ブラウザ：window 前回の記事で確認した、いずれの点もwindowと同じ挙動でした。 constを使用した変数宣言は、window.nameではアクセスできない →globalThis.nameも同様 varを使用した変数宣言は、window.nameでアクセスできる →globalThis.nameも同様 console.logとwindow.console.logは完全に等しい →globalThis.console.logも同
経緯 1.こちらの質問で代替を検索した方がいいようなことを言われました。 2.自分の質問記事がクソみたいらしくて凹みました。 条件 圧縮率は、大まかなファイルサイズ(KB単位ぐらい)から求めた圧縮前サイズを基にした圧縮後のサイズの割合です。 この圧縮率は低い方がいいです。
リモートで業務を行っている人であればZoomを筆頭にTeams, Cisco Webex, Skype for BusinnessなどWEBカメラを利用したWEBミーティングを開催していると思います。アプリケーション毎に専用のアプリケーションもありますがブラウザでもWEBカメラの映像を使ってWEBミーティングを開催することができます。 WEBカメラを利用したアプリケーションを使用している時にどうやってWEBカメラの映像をブラウザ上に表示させるのだろうかと疑問に持った人もいるかと思います。私を含め、WEBカメラの映像を自分の作ったコードを使ってブラウザに表示させたい人のために本文書はあります。方法がわかってしまえばこんなに簡単なんだと思ってしまう設定です。 必要なのはWEBカメラがついたPCとJavaScriptの知識です。ブラウザはChromeを利用しています。 WEBカメラの映像をブラウ
インターネットブラウザでWebアプリを作るととても便利なんですよ。 デスクトップアプリケーションと同じ様な機能を持たせると、それはもうアプリのインストールなんか必要なくて、ブックマークしておくか、デスクトップにエイリアスなどのリンクを置いておくだけでいいですからね。 もちろん、できない事のデメリットもあるけど、デスクトップアプリにはできないこともできてしまうメリットもあります。 そんなWebアプリを作っている時に、ファイルダウンロードする機能を持たせていたら、ダウンロードした直後にページがリロードしてしまうという意味のわからない事象が発生したので、その原因究明までの道のりを備忘録しておきます。 Webアプリのファイルダウンロード機能 検索するとたくさん出てくるのでもはや定番機能と言ってもいいと思いますが、ホームページのダウンロードをJavascriptで便利に行う機能です。 とりあえず、ど
![[Javascript] ファイルをダウンロードすると、ページがリロードしてしまうトラブル](https://cdn-ak-scissors.b.st-hatena.com/image/square/3760b40dfa1042f1f35e98778019a2692425c55f/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEgGXN5PI1XXgLeb3yumFmfo-ytGD3DHEqXNHwwzbrD3Hy8Sl0OxU7YYe201iOCoWsljl13MN9ELAWKqvrAa_lqZUoWP09gataclPyduWFwOdTTRB4h7ZYox3u_FXNM4xJEnwTuXlEYtvg0T0Mt3FpSSr4p29jortt7ZJ-HTlwxDVUJQr9zGNFg7Zzf2%2Fw1200-h630-p-k-no-nu%2Fjavascript2.png)
ブラウザのJavaScriptだけで名刺検出やってみる
背景 今のスマホアプリ開発は、FlutterやReactNativeのようなマルチプラットフォームフレームワークの時代ではあります。 が、将来的にはPWAの時代が来ると思っているので、ブラウザでなんでもできるようになっておきたい。 やること リアカメラで撮影している映像を、リアルタイムに解析し、名刺が見つかればその部分を抽出する。 ということをやります。 画像処理的には矩形検出というか、そういうやつです。 もっと今風に機械学習を用いるなら物体認識タスクとかになるんでしょうか。
JavaScript で Project Eular に挑む後輩のために, 過去の記事 https://qiita.com/kohyama/items/b0f87160605560bae2f8 でご紹介しました, Clojure による素数列の定義 (def prime-numbers ((fn f [x] (cons x (lazy-seq (f (first (drop-while (fn [n] (some #(zero? (mod n %)) (take-while #(<= (* % %) n) prime-numbers))) (iterate inc (inc x)))))))) 2)) を, なるべくそのままのアルゴリズムで JavaScript で実装します. 遅延連結リスト 準備として, 遅延シーケンスの実現方法として, 遅延連結リスト (次の要素を指す部分が遅延評価さ
turolinksによって、画面が切り替わってもその通常起こりうるloadイベント（jsファイルが実行)が起きない場合がある。 document.addEventListenerなどで囲っている宣言の方法を変えてみるとうまく動作するかも。
javascript用OpenCVであるOpenCV.js試してみた - Elsaの技術日記(徒然なるままに)
先日OpenCVに関して調べものをしていたところ、 javascriptで動作させることが出来るOpenCV.jsなるものを発見！！ 早速使ってみましたので今回はセットアップも含めて備忘録残しておこうと思います。 ■OpenCV.jsとは？ ■OpenCV.js利用環境構築 ■最後に ■参考 ■OpenCV.jsとは？ OpenCVの公式ページにはこちらの通り説明がありました。 OpenCV.js is a JavaScript binding for selected subset of OpenCV functions for the web platform. It allows emerging web applications with multimedia processing to benefit from the wide variety of vision functio
はじめに 今回はWordPressでモーダルを実装する際にJavaScriptをどこに埋め込めばいいか悩んだのでその解決策をまとめる。 問題点 WordPressでJavaScriptのコードをどのphpファイルに埋め込めばいいのか。 解決策① footer.phpの</body>の直前に埋め込むことで解決する。 ただしこれは非推奨な方法な模様。
【JavaScript】ブラウザーで OpenAI API のチャット (Chat Completions) のストリームを扱う方法 – webfrontend.ninja
過去 2 回の記事では OpenAI API の音声認識 (Speech to Text) と音声合成 (Text to Speech) を扱いましたが、今回は ChatGPT でもおなじみのチャット (Chat Completions) を扱います。単にメッセージを送って応答を得るだけなら簡単です。ここではストリームを使って ChatGPT のようにリアルタイムに文字ごとに応答を得る方法にチャレンジします。 OpenAI API のチャット (Chat Completions) の概要 OpenAI のチャットの Chat Completions API の詳細は、API reference の [Chat > Create chat completion] に記載されています。curl コマンドであれば次のようにしてメッセージをアップロードして、その応答を取得することができます。 cu
のような違いがあります. 本記事では, 上記機能を使わず「=>」を使っていきます. (function を使う版はこちら) 基本的には各式の評価結果は掲載しないので, 各自手元の環境で評価させ, 確認してください. この記事のコードの動作確認に使った実行環境は Node.js v19.5.0 です. 再帰呼出し (Recursive Call) の再確認 関数リテラル 階乗を例にします. n => (n == 0)?1:n*_(n - 1) のような関数の _ の箇所でこの関数自身を呼び出したい場合, (f => f(f))(g => n => (n == 0)?1:n*g(g)(n - 1)) のように書くことができます. 「引数として関数を与えると, その関数を引数としてその関数を呼び出す関数 (f => f(f))」に, 『引数を与えると「本来やりたかった関数」を返す関数』を与えると
こんにちは！ 概要 通常の<button>要素ではなく、カスタムなボタンを実装する時に、W3のWebアクセシビリティの基準を満たすHTML要素の実装方法を説明します なぜWebアクセシビリティ 我々Web開発界隈で最も軽視されがち、誤解されがちなWebアクセシビリティ。多くのジュニアおよびミドル級のWeb開発者にはまずWebアクセシビリティの存在自体に気づいていないのかもしれません。またより愚かなパターンですが、知っているけれど陰謀論のような思想家でWebアクセシビリティに反感を持っている者すらいます。 なので、まずは「なぜWebアクセシビリティが大事なのか」というところから話を始めたいのですが、すでに目から鱗が落ちている方はこの独白スピーチをスキップしてください Webアクセシビリティは、W3の説明を拝借しますと、 障害を持っているユーザーでも難なく使えるWebサイトをように設計および開
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A virtual DOM in 200 lines of JavaScript
JavaScriptのProxy(Reflect)と 昨日より仲良くなる20分 | ドクセル
javascriptで作るゲーム【ジャンケンマンフィーバー】完結編（音声出力） - Qiita
やってみたシリーズ7編htmlStdio html CSS JavaScript 完結編 - Qiita
JavaScript の async/await について - Qiita
javascriptで作るゲーム【ジャンケンマンフィーバー】完結編（音声出力） - Qiita
【JavaScript】要素にフォーカスした際にスクロールされないようにする方法 - Qiita
配列 [JavaScript] - Qiita
JBScript から JavaScript への変換 - Win32 apps
JavaScriptでHTML文字列からDOMへの変換とDOMからHTML文字列への変換方法
JavaScriptを有効にする設定方法（Microsoft Edge）：BIGLOBE会員サポート
RailsとJavaScriptを使った非同期テーブル更新の実装 - Qiita
【初心者必見】JavaScriptでextendsを使いクラスの継承方法 | kamiblog
本日より Maps JavaScript API で 3D Maps が利用可能に
global object 【JavaScript】 - Qiita
JavaScriptで空の多次元配列を new Array(n) で作成する - Qiita
[JavaScript] mapメソッドとは - Qiita
JavaScriptのserch()メソッド - Qiita
html radioの使い方 JavaScript含む - Qiita
#プログラミング #Javascript # バグネタ - Qiita
globalThis【JavaScript】 - Qiita
Javascriptのミニフィープログラムどれがいいか比較してみた！ - Qiita
【JavaScript】Webカメラの映像をブラウザに表示する方法 | アールエフェクト
[Javascript] ファイルをダウンロードすると、ページがリロードしてしまうトラブル
遅延シーケンスを用いた無限素数列 in JavaScript - Qiita
turbolinksがJavaScriptに干渉する - Qiita
WordPressでJavaScriptを埋め込む方法（再掲） - Qiita
遅延シーケンス in JavaScript (function 使わない版) - Qiita
JavaScriptでWebアクセシビリティに配慮したボタンを作ろう - Qiita