環境 OS windows11 pro 64bitApache 2.4.43ブラウザ chrome 104.0.5112.81
サーバーサイドの JavaScript 実行環境。 Google V8 JavaScript エンジンを使用しており、高速。 Linux サーバにインストールして使用することが多いが、macOS 版や、Windows 版もある。 npm (Node Package Manager) と呼ばれるパッケージ管理システムを同梱。 ノンブロッキングI/O と イベントループ アーキテクチャにより、10K問題 (クライアント1万台レベルになると性能が極端に悪化する問題) に対応。 通信やファイルの読み書きをノンブロッキングI/Oで処理するため、スレッドが I/O 待ちになる頻度が少なく、効率的。 クライアントからパケットを読み込む、ファイルの次のブロックを読み出すなどすべてがイベント処理で実装されている。 基本的にはシングルスレッドだが、内部では暗号化などの重い処理を複数スレッドで処理。 基本的には
この記事はAWS Lambda Advent Calendar 2014へのエントリー記事です。 Lambdaでは、node.js標準のモジュールが利用可能です。これを利用してhttpリクエスト[1]を実行してみました。 http://aws.amazon.com/lambda/faqs/ Q: What languages does AWS Lambda support? At launch AWS Lambda supports code written in Node.js (JavaScript). Your code can include existing Node.js libraries, even native ones. Function var http = require ('http'); exports.handler = function(event, con
JavaScriptで複数行文字列を代入する方法は色々ありますよね。調べると+で行を連結するやり方とかやたらトリッキーな手法とかが見つかります。 ですが現在はテンプレートリテラルを使えば長い文字列でもスマートに代入したり表示する方法があるので、わざわざ面倒なことをする必要がなくなりました。 ここではこのテンプレートリテラルについてまとめてみてみます。
const nameFormat = d3.format('02d'); const data = d3.shuffle(d3.range(0, 20)).map((d, i) => { return { name: `name-${nameFormat(d)}`, value: Math.round(Math.random() * 100), }; }); const size = { width: window.innerWidth, height: window.innerHeight }; const margin = {top: 10, right: 10, bottom: 10, left: 40}; const svg = d3.select('#chart') .attr('width', size.width) .attr('height', size.height);
こちらのサイト(Thinking with Joins)を参考に、D3.jsの enter、update、exit の使い方をまとめました。 1.enter、update、exit の各役割を簡単にまとめると enter 新しく生成した要素を扱います。 例えば、新しくdiv要素を生成した場合、div要素へ更新内容を反映します。 なので、新しく生成した要素に enter を使用しない場合、更新が反映されないのでブラウザに更新内容が表示されません。 update 既存の要素を扱います。 例えば、既存のdiv要素になんらかの変更を行った場合、div要素へ更新内容を反映します。 exit 既存の余分な要素を扱います。 例えば、div1、div2、div3 という要素があり、 div1、div2のみ更新しdiv3は必要ない場合は、何もしないとdiv3も残り続けるので、exit().remove();
1.要素の追加 まずは、svg要素のみ定義されたhtmlに、次の3つの円を追加します。 Demoを表示 1−1.ソースコード 円を追加するには次のようにします。 <body> <svg width="700px"></svg> <script> d3.select("svg").selectAll("circle") // ① svg要素を選択し、その子要素のcircle要素を全て選択 .data([10, 20, 30]) // ② 追加するデータ(今回は円の半径として使用) .enter() // ③ 新規追加する circle要素を DOMに反映 .append("circle") // ④ 円を追加 .attr("cy", 60) // ⑤ y軸の座標 .attr("cx", function(d, i) { return i * 100 + 100; }) // ⑥ x軸の座標
Tips 的な小ネタです。 Node.js + Express によるウェブアプリケーションコードの中で、何らかの URL への GET リクエスト(POST とかでもいいですが、処理内容は GET の時と同じなので GET で考えることにします)を受けて処理している時の、アクセス時のフル URL をサーバー側で知る方法です。 なお、ここでの「フル URL 」とは、プロトコル+ホスト名+(デフォルトと異なる場合は)ポート番号+アクセスパス+実行時のURLパラメータ のこととします。 この値はクライアント側の JavaScript を使えば windows.location オブジェクトを参照することで取得できます。ただこちらはあまり意味がないというか、アクセスしたユーザーは自分のブラウザのアドレス欄を見れば URL を確認できるのでわざわざ別途必要になるケースが珍しいはずです。このクライア
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか? なぜ、Vueのコンポーネントは肥大化するのか? 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
ネコメシでは週に1回、持ち回り制で勉強会を開催しています。各々が気になっているトピックについてスライドを作って、30分~1時間くらいの発表を行います。 先日の勉強会にて、JavaScriptフレームワークのStimulusについて発表したので、その内容を公開します。 Stimulusは控えめなフレームワークで、非SPAのウェブサイト制作(コーポレートサイト、キャンペーンサイト等)において非常に強力なツールだと思います。jQueryをメインに使っている制作者や、オブジェクト指向的にコードを書こうとしているけどいまいちコレといった腹落ちができていない人には、特におすすめできるものです。 Stimulus 受託Web屋に「ちょうどいい」JavaScriptフレームワーク 今日はStimulusというJSフレームワークを紹介します。 多分に実装の話題なので、デザイナーさんたちにはちょっとわからない
javascript ページ遷移時に「このサイトを離れますか?」を表示する 作成日 2020.09.03 更新日 2022.06.15 javascript javascript javascriptでonBeforeUnloadイベントハンドラを使用して、chromeでページ遷移時に「このサイトを離れますか?」を表示するサンプルコードを記述してます。
“async/await” と呼ばれる、より快適に promise を利用する特別な構文があります。驚くほど簡単に理解し、使用することができます。 Async 関数async キーワードから始めましょう。次のように関数の前に置くことができます:
JavaScriptの機能が貧弱と言われたのは今は昔、ES6以降の進化が著しいのは皆さんの知るとおりです。今ではライブラリに頼らずとも、複雑な処理をコンパクトに実装することができるようになりました。 今回はライブラリを使わずにJavaScriptの標準機能だけでURLパラメーターのパースと復元をワンライナーで書いてみました。 URLパラメーターを1行でオブジェクト型にする さてこのようなURLパラメーターを用意しました。
databaseに問い合わせのデータを格納しようとjsを書いていたら、コンソールに見出しのエラーを吐かれました。 色々なサイトを参考に初期設定から立ち上げいていたのですが、このエラーに関する情報がなかなか無くて詰んでしまいました。 その時の解決法です。 firebaseで最初に <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/s
著者:関 勝寿 公開日:2020年1月7日 キーワード: javascript HTMLのCanvas要素におけるマウスとタッチのイベントの取り扱いを理解するために、発生したイベントの名前と位置を表示ながら線を描画するJavaScriptのプログラムを作成した。 Canvas 内のスワイプを無効にする クリア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く