「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
ホームページ- EY-Office
小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")（importは省略しました）と簡単に書けますが、JavaScriptでは案外面倒なのです。 追記： いくつかの間違いのご指摘がありましたので修正しました（2023-04-19）。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス Amazon Web Services（AWS）は、実験的な実装としてサーバレス環境のAWS Lambdaで使うことにフォーカスした軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開しました。 LLRTはRustで開発され、JavaScriptエンジンにはQuickJSを採用しています。 LLRTの最大の特徴は、現在のJavaScriptランタイムにおいて性能向上のために搭載されているJITコンパイラをあえて搭載せず、よりシンプルで軽量なランタイムとして実装することで高速に起動することにこだわっている点です。 これにより（Node.jsやDenoや
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
Next.js の fetchCache を考える
Next.js App Router は global のfetch関数に patch をあてており、自動でデータ取得が最適化されるように設計されています。そのうちの一つが、取得したデータをキャッシュし、再利用する最適化です。キャッシュされた取得データは、必要に応じて任意のタイミングで Revalidate（データ再取得・キャッシュ更新）が可能です。本稿はこのfetch関数を経由してキャッシュされる「fetchCache」について、どのように向き合うべきか考察したメモです。 検証留意点 はじめに、筆者が検証にあたり留意した点を書いていきます。本稿を読んでみて「自分でも検証してみたい！」となった方は、参考にしていただければと思います。 【1】取得データがキャッシュされるタイミング タイミングは２通りあります。 ビルド時: next buildで Next.js アプリをビルドした時 リクエス
初心者に分かりやすい！JavaScript 入門チートシート - コムテブログ
TL;DR このページでは、Jamstack を使った構築や、Next.js を使う上で必要となる JavaScript の基礎知識をまとめたものを初心者向けにチートシート形式でご紹介します。JavaScript の主要な特性や概念を分かりやすく網羅していますので、JavaScript の学び直しにもご活用できるかと思います。定期的に見返しましょう！ 項目 内容
TypeScriptのイカれたメンバー (主要技術) 達を紹介していくぜ！！
はじめに TypeScriptを勉強していて、使用する技術とそのサンプルのコードの一覧があれば便利だなぁ と思ったので投稿することにしました。 対象読者 TypeScript初心者 TSをインストールしたけど挫折した人 前提条件 そもそもTypeScriptとはなにか？ TypeScriptとは、JavaScriptがベースとなっていて変数や引数なんかに対して型というものを付けることができる言語です。 型っていうのは、この変数には文字しか代入できないですよ～！！なんてな感じでデータの出入りを制限できるものになります。 変数や関数の後に「：」を付け、その後に任意の型を書けば完了です。これを書くだけで晴れてあなたもTypeScripterの一員です。
JavaScript で学ぶビット演算の基礎
唐突にビット演算の話です。今回は本当に基礎的な事しか書きませんので、ある程度のレベルの方には常識レベルの話になることをご承知ください。 近年のプログラミング環境で、ビットを意識する機会はほとんど無くなりました。プログラミングの抽象化が進んだおかげで良いことだと思います。今や知らないのが普通なのかもしれません。しかし、もしちょっと低レイヤーな処理を書く機会があった時に、今までの私達にとっては常識レベルであった知識であっても、重要度が下がり学ぶ機会も無くなってしまったが故に、知らない人はそこで躓いてしまう可能性が高いことに気が付きました。この記事は、普段のプログラミングにはあまり必要のないビット演算を、とりあえずこれだけ知っておけばその先は自力でなんとかなるかな、というレベルまで解説したいと思います。 解説は JavaScript を使って行いますが、基本は他の言語でも同じです。 JavaSc
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking
フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。 シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。 Flicking Flicking -GitHub Flickingの特徴 Flickingのデモ Flickingの使い方 Flickingの特徴 Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。
米ハーバード大学のプログラミング授業「CS50x」日本語訳が無料公開
米ハーバード大学がオンラインで無料公開している、PythonやJavaScriptのプログラミング学習とコンピューターサイエンスの入門講座の日本語訳ページ「CS50.jp」が無償公開されました。2022年8月31日に2022年度最新版の日本語化が完了しました。講義動画の日本語字幕の翻訳化を順次すすめています。学生向けですが、年代にかかわらず、コロナ禍で学習環境やキャリアに悩んでいる誰もが学ぶことができます。 ハーバード大学のCS50xとは ハーバード大学のCS50xとは、日本語翻訳ページ「CS50.jp」によると、コンピューターサイエンスとプログラミング技術を紹介するオンラインコースです。この講義がオンライン上で無償公開されており、世界で282万人が履修登録しています。 edX - CS50s Introduction to Computer Science 学べる内容はPythonのプロ
Google発のJavaScriptで書けるシェル 「zx」 | DevelopersIO
Introduction シェルを書きたいときにBashは手軽に使えるけど、 少し込み入ったスクリプトを書こうとするとちょっと面倒。 NodeいれてJavaScript書くのもいいけど、 いろいろセットアップが手間。 そんな人にピッタリはまるかもしれないのがzx。 Google発、JavaScriptで記述できるシェルです。 Top Level await使ってシェルコマンドがそのまま使用可能です。 また、Promise.allでコマンド並列実行ができたりするので便利です。 Environment OS : MacOS 10.15.7 Node : v14.16.1 Top Level awaitがサポートされたNode(v14.8)以降が必要ぽい？ Setup では早速セットアップしてみます。 npmでzxをグローバルインストール。 % npm i -g zx % zx usage: z
Opensource bar chart race generator
Input should be a csv file. Dates should be YYYY-MM-DD. Option 1 : one row per date (ordered) and one column per contender Date Name1 Name2
2019年5月時点 JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ - Qiita
初心者向け解説によくある例です。 これが現時点（2019年5月時点）で非推奨な書き方だと、初心者は気付くことができない。つらい。 【JavaScript初心者のつらいところ】 初心者向け解説（チュートリアル）のvarをconstやletに置き換えなきゃいけない 何も知らずvarで写経すると悪癖がつく 他にも「今は覚えなくていい書き方」がどうやらたくさんある 「歴戦のJavaScripterがモダンJavaScipt知識をアップデートするためのまとめ」を読むには、そもそも必要とされる前提知識を持ってない 「何が正解かわからない→ググる」と、正しい情報探しに時間が消える 解説途中でググらなくても良い、チュートリアル的に読み通せるサイトってどこ！？！？ そんな私のニーズを満たせそうなサイトにたどり着いたので、記事にしてみます。 【js-primer】 js-primer これからJavaScri
完全に単一のHTMLファイルで動作するMarkdownエディタ作った - Qiita
概要 完全に単一のHTMLファイルで動作するMarkdownエディタ「かんたんMarkdown」を作ったというお話。 お断り 一応簡単に動作検証はしていますが、とんでもないバグが潜んでいるかもしれません。 かんたんMarkdownを利用して大切な文章がなくなってしまったり、その他損害が生じても責任は取れませんm_ _m 経緯 前回の記事(そろそろExcelで資料作るのやめたい)で、 単一ファイルで動くMarkdown 画像をbase64で埋め込んでしまう というアイデアに可能性を感じて下さった方が多いようです1。 しかしながら、 エディタとプレビューアが別なのが面倒 base64に変換するのが面倒 といった意見も多く聞かれました。 そこで思ったのです。ならばエディタを作ってしまえと。 かんたんMarkdown かんたんMarkdownは完全に単一のhtmlファイルで動作するMarkdown
Hugo に全文検索を取り付けた
静的サイトジェネレータ Hugo を使って生成したコンテンツに 全文検索を取り付けました。Hugo でのコンテンツと一緒にインデックスファイルも同時に書き出し、クライアント側の JavaScript で日本語のキーワードを検索をします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Explore DOM Events
Mantine
サーバーサイドエンジニアも知っておくべきフロントエンドの今
