Maximum Blog埼玉大学プログラミングサークル「Maximum」の技術ブログです。 アドベントカレンダーなどのイベントの記事や、メンバーの技術記事を投稿しています。 また、サークル内で扱った講義の資料も公開していますので、ぜひご覧ください。
【JavaScript】MDNが推奨する最強の書き方 - Qiita
はじめに MDNのドキュメントを眺めていたら、JavaScript のサンプルコードの作成ガイドラインという章を見つけました。第三者にコードを公開するような人向けにまとめられたものですが、正しい書き方の実践としてみることができるので、クローズドなプロジェクトの中でも使えるかもしれません。ただ、モノによってはチームで決めた慣習と食い違うこともあるかもしれないので、採用はケースバイケースになると思います。 上記のページが紹介された記事があまり見当たらなかったので、折角なので共有してみようと思います。あと、ところどころ補足を付け加えています。 対象読者 基本的には初心者向け ただ、幾つかは中級者の方でもためになるものがあるかも？ 規則の一般性 ☆：よく見かける書き方。一般的 ☆☆：あまり見かけないかもしれない書き方。あるいは、意識的には規則づけられてなかった書き方 ☆☆☆：クローズドなプロジェク
データサイエンス基礎を高校数学から復習しよう！ D3.jsでデータを表現する
データサイエンスという分野は、データ収集や可視化などが身近になったことで、より重要になってきています。システムを使ってデータ分析する際、利用者は最終的な結果のみを求めますが、私たちエンジニアはその途中経過についても正しく評価する必要があります。そのためには、中学や高校で学んだ数学の知識が欠かせません。そこで本連載は、高校までに学ぶ基本的な数学知識を使って、データ分析やデータ表現の基礎的な考え方を紹介します。また、既に学んだ数学的基礎からデータの特徴を見つけるためにデータ表現する方法について紹介したいと思います。 はじめに コンピュータでのデータ分析といっても多種多様で、画像や音声、映像、文章などを対象にする場合もあれば、売上値や検査値などの数値を分析する場合もあります。最近では、AIによってさまざまなデータが扱いやすくなり、利用者にとって分かりやすく結果を提示できるようになっています。 そ
JavaScriptがブラウザでどのように動くのか | メルカリエンジニアリング
実際にコードを用いてスタック領域とヒープ領域の概念を説明します。 person オブジェクトを宣言した時、JavaScript エンジンはオブジェクトの実体をヒープ領域にメモリ割り当てを行い、ヒープ領域にある実体への参照をスタック領域にメモリ割り当てを行います。 const person = { name: 'Taro', age: 24 }; 次のように新しい変数(newPerson)に再代入をすると参照がコピーされ、newPerson も person もヒープ領域に割り当てられた同じ実体に対する参照を持ちます。 const newPerson = person; Object.assign を使って新しいオブジェクトを生成するのは、参照コピーをしないための方法の一つで、よく使われる手法の1つです。 function getName(person) { return person.na
console.logについて理解していますか？
はじめに console.log()を使っていますか？ コンソールデバッグをしない派の人もまったく使わないことはないでしょう。
これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。 他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。 Swapy Swapy -GitHub Swapyの特徴 Swapyのデモ Swapyの使い方 Swapyの特徴 Swapyは、フレームワークやライブラリに依存することなく、わずか数行のコードであらゆるレイアウトをドラッグして移動できるレイアウトに変換するためのJavaScriptツールです。 MITライセンスで、個人でも商用でも無料で利用できます。
JavaScriptで100行で作る！数式言語のインタプリタ
はじめに 皆さんはプログラミング言語を作ったことがあるでしょうか？ おそらく大抵の方は「ない」というのが正直なところなのではないかと思います。背景には、おそらく「プログラミング言語を作るって難しそう」という先入観があるのではと筆者は踏んでいます。 プログラミング言語とは、コンピューターに指示を与えるための特別な言語です。私たちが日常で使う言語と同じように、プログラミング言語にも文法やルールがあります。そして、この言語を理解し実行するのが「処理系」と呼ばれるプログラムです。 しかし、実はプログラミング言語の処理系（インタプリタ）を作ることは非常に簡単なことです。小さなOSを作ることに比べても、ちゃんと動くWebサービスを作ることに比べても本当に簡単です。 というわけで、この記事では「プログラミング言語」を作るための導入として「数式言語」のインタプリタを作ってみます。数式言語とは、数学の式を扱
polyfill.ioを使うのは危険かもしれない(危険だった) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TL;DR 2024/06/26 実害が出ているようです、polyfill.ioを利用している場合は直ちに利用を止めましょう。 GIGAZINE: JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Codebook: Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 polyfill.ioから配信されるスクリプトが汚染される環境下にあり、危険な可能性があります。利用している方がいらっしゃいましたら外しておくことをおすすめします。または安全なバージョンのものが
Polyfill supply chain attack hits 100K+ sites
by Sansec Forensics Team Published in Threat Research − June 25, 2024 The new Chinese owner of the popular Polyfill JS project injects malware into more than 100 thousand sites. Update June 28th: We are flagging more domains that have been used by the same actor to spread malware since at least June 2023: bootcdn.net, bootcss.com, staticfile.net, staticfile.org, unionadjs.com, xhsbpza.com, union.m
JavaScriptの便利な記法や関数の紹介およびそれらの注意点について - Qiita
はじめに JavaScript初学者を抜けたあたりの方にむけて、便利な記法や関数、その注意点について紹介します。 初歩的な文法やデータ型などの知識は前提として解説を省きます。 JavaScriptの巨大なテーマとしては非同期処理などもあるのですが、巨大すぎるために本稿では割愛させていただきます。 let/constの使い分けについて 変数は不変なconstおよび可変なletを利用することができます。原則的にはconstを使い、再代入が必要な個所のみletを使うのが標準的です。 letを利用している時点で 「処理のどこかで再代入される」 と処理内容の推論を働かせてコードを読む人が多いと思います。このようなコードの読み方をするという前提を踏まえてコードの可読性を高めるうえでも、再代入されるかされないかを意識してconst/letを使い分けることが重要です。
Service Workerの基本とキャッシュ制御 - プログラミング雑ネタ集
2021/10/12更新 目次 Service Workerとは Service Workerでできること Service Workerの制限 Service Workerのライフサイクル 動作するまでの流れ Service Workerの登録 Service Workerのインストール Service Workerの有効化 キャッシュ制御 キャッシュ対象ファイルの準備 リクエストに対する応答「キャッシュに無ければネットワーク」 リクエストに対する応答「ネットワークがダメならキャッシュ」 リクエストに対する応答「オフライン不可である旨を表示」 古いキャッシュの削除 ユーザーによるキャッシュ削除 個人的に感じた疑問 Q. Service Workerとブラウザキャッシュはどのような関係にあるのか？ Q. 何らかの誤りにより更新ができなくなってしまうようなことは起きないのか？ Q. どんなリク
CVE-2024-4367 - Arbitrary JavaScript execution in PDF.js — Codean Labs
This post details CVE-2024-4367, a vulnerability in PDF.js found by Codean Labs. PDF.js is a JavaScript-based PDF viewer maintained by Mozilla. This bug allows an attacker to execute arbitrary JavaScript code as soon as a malicious PDF file is opened. This affects all Firefox users (<126) because PDF.js is used by Firefox to show PDF files, but also seriously impacts many web- and Electron-based a
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
javascript でなぜ 2^53 - 1 以下の整数を正確に表せるのか - Qiita
javascript の勉強をしていて疑問に思ったことについて調べたので書きます。冷静に考えるとかなり当たり前のことなのですが、同じ疑問を持つ人もいるかと思うのでメモを残しておきます。勘違いがあったら教えてください。 jsでは数値はすべて浮動小数点型で表す ほとんどのプログラミング言語では、整数と整数以外の実数を異なる型で表す（以下、面倒なので整数以外の実数を単に実数と表現する場合がある）。つまり、数値の中でも整数だけを特別に扱う型がある。例えば、Cでよく使うのは整数はint、実数はdoubleなどですね。これに対して、 javascript では整数だけを表す型というのがなく、数値はすべてNumberという型で表現される。つまり、3も0.3も同じ型の値である。Numberは実数を表すのによく使われる64bit の浮動小数点型なので、 javascript では整数も実数っぽく表しているこ
JavaScript Visualized - Promise Execution
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
うるう日にしか発生しないバグ
昨日うるう日にしか発生しないバグに遭遇した。Javascriptを書く人には有名な話だとは思うので大して面白くはないかもしれないが一応メモ。 詳しくは書けないがバグが発生した関数の仕様としてはざっくりと下記のような感じ。 対象の年月日が基準日の1年前から1年後の間に含まれる場合はtrueを返しそうでない場合はfalseを返す 引数として2020-12-24というフォーマットの文字列が渡される(判定対象の日) 引数として2021-01-01というフォーマットの文字列が渡される(+-1年の基準日) Javascriptで書く (例) 対象の日: 2024/10/10 基準日: 2024/01/28 この時、trueになる範囲は2023/01/28 ~ 2025/01/28。なので2024/10/10はtrue。2023/01/28も2025/01/28もtrueになる。閉区間。 とあるコードの
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
<img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointerCapture(event.pointerId) } } </script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのthisもこれで完璧！呼び出し方で変わる5つのパターン - Qiita
[JavaScript] 負数の四捨五入がExcelと合わない問題 - Qiita![[JavaScript] 負数の四捨五入がExcelと合わない問題 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/88fa7fa9197051ea24413ef388a58c2c3647e8f7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTIyOTE3JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTE0NzcwMjAyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTEwY2Q3NDU4NGZiYTQ1YzVhN2JhZWYyNzAzZTQ4Mjc0%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Db8ccccad7441593ce00cbab9f3a5a75e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOCVCMiVBMCVFNiU5NSVCMCVFMyU4MSVBRSVFNSU5QiU5QiVFNiU4RCVBOCVFNCVCQSU5NCVFNSU4NSVBNSVFMyU4MSU4Q0V4Y2VsJUUzJTgxJUE4JUU1JTkwJTg4JUUzJTgyJThGJUUzJTgxJUFBJUUzJTgxJTg0JUU1JTk1JThGJUU5JUExJThDJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OTU5ZTJiOGE4YjhiODQ5NGM0Yjk5NWY1NWVjYzBiNDc%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5LXNvbWUmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz02MjgzMmYwYWY2MWVjY2VmNDllMmM2OTZjNDM3MDcwYw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D54b78f75999ed57233eeae8833523067)
Help Load STL files ASCII or Binary to calculate Volume and Dimensions