JavaScriptにセミコロンは入れるのか？入れないのか？ - Qiita
結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察してセミコロンを挿入してくれる 自動セミコロン挿入のしくみはECMAScriptで規定されており、自動セミコロン挿入はJavaScriptエンジン間で可搬性がある 自動セミコロン挿入には落とし穴があり、ルールを理解しておく必要がある 第１のルール：セミコロンが挿入されるのは、"}"トークンの前か、改行の後か、プログラムの末尾だけ
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse
rollup が求めてたものだったかもしれない : (*x).b=z->a+y/c
rollup 使ってみたあるライブラリのコードを見ていて すごく規則的ではあるんだけど無駄が多くて こんなこと手動でするかなぁ？と思うのがありました いかにも機械的って感じですが webpack みたいなバンドルされたものって感じでもなく普通に書いたようなコードです それでも global$1 と global$2 とか人が書かないような部分も多く気になってました その後色々あって rollup がもしかしたらこれかもと思うことがあって 試してみたら正解でした webpack や parcel と違って rollup はライブラリ向いてるとか聞いたことはありましたがその意味はよくわかってませんでした ですが バンドル結果をみればその理由は明らかでした rollup の良いところwebpack や parcel は元のファイルの import/export 処理だけを書き換えてそれぞれを関数
JS のビルドサイズを極限まで絞るための TIPS 集
ビルドサイズ限界まで絞りたい人向け。 あらゆる環境で実践するものではないが、知ってたら簡単に避けることができるのもあるので知っておくと便利なTIPS書いていく。 基本ポリシー 未使用コードはビルド時に全部落とす。 何が未使用コードで、何が定数かわかるようなインターフェースを人間が心がける。 用語 Dead Code Ellimination(DCE) Rollup や Terser で、未使用コードを削除すること
マウスカーソルに反発する!?リペリングエフェクトを取り入れたコードスニペット9選 - Workship MAGAZINE(ワークシップマガジン)
インタラクティブなエフェクトにもさまざまな種類があります。今回ご紹介するのは、マウスカーソルから粒子や線が逃げ出すような動きをする「リペリング（反発）エフェクト」。 この記事では、リペリングエフェクトを作品として落とし込んだコードスニペット9選をご紹介します。 1. Repeling Lines 一見するとギターの弦のようですが、カーソルをあわせるとその部分の線が曲がり、円形の空白ができます。 ぜひ右側のオプションパネルから、エフェクトを調整してみてください。円の半径や線の数、線の間隔などが変更可能です。自然な動きが実現されていますね。 See the Pen Repeling Lines by Daniel Velasquez (@Anemolo) on CodePen.default Repeling Lines 2. 30,000 Particles 3万個もの粒子がぎっしりと詰まっ
React手抜きテクニック集
formやinputを非制御で最も簡単に使う方法 useStateやuseRefを使わずに、最小限の記述でフォームに入力したデータをとることが出来ます Reactの公式ではvalueプロパティを使って制御する形を推奨しています しかしvalueに対応するsetStateが上位の層にいると、テキストを入力するごとに下位コンポーネントの再評価が行われ重力地獄に落ちることがあるので、特段の理由が無ければ私は非制御を推奨します 重力地獄はmemo化で対処は出来るといえば出来るのですが、それなら最初から余計な動きをさせないのが一番です また、リアルタイムなバリデーションチェックはsetStateに関係なく、onChangeイベントで入力内容のチェックが可能です const Form = ({ onSubmit }: { onSubmit: (value: string) => void }) =>
JSで西暦1年1月1日が何曜日か求める
この記事はCybozu Advent Calendar 2021の21日目の記事になります。 Cybozuにも関係なければなかなかニッチな内容の記事ですが、アドベントカレンダーということでカレンダーにまつわるテーマにしました。 ということで果たして需要があるのかは謎ですが、古い日付の曜日を正しく取得する方法について考えていきます。 突然ですが、西暦1年1月1日が何曜日かJSで求めるにはどうしたら良いでしょうか？ 忙しい人のためのまとめ 西暦1年1月1日は日曜日です。 ポイントは 改暦を考慮してユリウス暦で求める ツェラーの公式を使うと簡単に求められる さらに、閏年のミスを考慮に入れる ... getDay まずはシンプルにDate.prototype.getDay()を使って求めてみます。 const firstDay = new Date(1,0,1); const day = firs
Reactで超簡単な画像ビューアを作る - FileReader - Qiita
import React, { Component } from 'react' import { render } from 'react-dom' class App extends Component { state = { file: "", imagePreviewUrl: "" } handleFileChange = (e) => { e.preventDefault() let reader = new FileReader() let file = e.target.files[0] reader.onloadend = () => { this.setState({ file: file, imagePreviewUrl: reader.result }); } reader.readAsDataURL(file) } render() { console.log("i
JavaScript FileAPIについて学ぶ - Qiita
FileAPIとは？ ローカル（自分のパソコン内）にあるファイルを、JavaScriptを用いて操作することのできるAPI。例えば、自分のパソコンの中にある画像をブラウザ上(ChromeやSafariなど）に表示させたり、そのブラウザ上で画像を編集できたり、またそれをダウンロードしたりすることも可能。 FileAPIの使用方法 １HTMLでファイル選択ボタンを作成する まず、以下のようなファイルを選択するためのボタンを用意する。 そのためには、inputタグを用意し、typeを「file」に設定する。複数の画像を選択できるようにするには、追加で、「multiple」 属性を追加する。 <!-- 画像を選択するボタン --> <input id="input-file" type="file"> <!-- 複数画像を選択可能にする場合 --> <input id="input-file" t
Geoライブラリ | GeoDjangoではじめる地理空間情報
* OSGeo財団 (The Open Source Geospatial Foundation) * https://www.osgeo.jp/地理技術及び地理データの共有化を推進する非営利の非政府 地図表示するためのJavaScriptのオープンソースライブラリとして「OpenLayers」と「Leaflet.js」が代表的である。 Google Maps JavaScript APIも地図表示するためのJavaScriptのライブラリである。
JavaScriptで動画を撮影する方法【デモ動画あり】
この記事について この記事ではJavaScriptから MediaStream Recording API を利用して動画を撮影する方法について紹介します。この記事の関連リソースを下記に示します。 デモ デモ動画 ソースコード おおまかな手順 おおまかな手順を下記に示します。 コーディングの準備 コーディング 動作確認 コーディングの準備 下記のコマンドを実行してコーディングの準備をします。 コーディング index.html エディタでindex.htmlを開き、下記の内容を入力します。 main.js エディタでmain.jsを開き、下記の内容を入力します。 ポイントを下記に示します。 動画を取り込むためのメディアストリームを取得します。 video/webm形式での録音が可能かどうかを確認します。 メディアレコーダーを作成します。 mediaRecorder.startメソッドを呼び
All the user-facing states
I find myself needing a reference like this more often than not lately. So, here’s a blog acting as augmented memory—I’ll update it as I encounter more user-facing states in the wild. What user-facing state is User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which somethin
Unhandled Rejection の考え方 - from scratch
はじめに twitter 上で議論になっていたネタを本人の許可を得て記載しています。 Node.js でだけ発生する非同期関連の謎現象を発見した🤔 複数回連続で、非同期処理を挟んだ関数から返した非同期関数を、非同期に実行すると allSettled で待ち受けされずにその場で例外が発生する。 これはバグなのかな...https://t.co/w5C9wKEAOA pic.twitter.com/y3pz4ajndF— shqld🦭 (@shqld) January 4, 2022 実はこの話は会社の中でも一回議論になったネタなんですよね。僕も microtask と呼ばれる Promise キューイングの仕組みとイベントループでタスクをハンドリングする仕組みの両方が組み合わさった時に Unhandled Rejection が起きる理由がわかりにくくなるなーと思っています。誤解していた
import、export、require | TypeScript入門『サバイバルTypeScript』
実務でアプリケーションを作る場合、複数のJavaScriptファイルを組み合わせて、ひとつのアプリケーションを成すことが多いです。いわゆるモジュール指向の開発です。ここではJavaScriptとTypeScriptでのモジュールと、モジュール同士を組み合わせるためのimport、export、requireについて説明します。 スクリプトとモジュールJavaScriptのファイルは大きく分けて、スクリプトとモジュールに分類されます。スクリプトは普通のJavaScriptファイルです。
ガベージコレクション
JavaScriptのメモリ管理は、自動で私たちの目には見えないように行われます。私たちが作るプリミティブ、オブジェクト、関数… それらはすべてメモリを必要とします。 何かがもう必要なくなったとき、何が起こるでしょう？JavaScriptエンジンはどのようにそれを検出し、クリーンアップするのでしょうか？ 到達性JavaScriptのメモリ管理の主要なコンセプトは、到達性 です。 簡単に言えば、「到達可能な」値は、何らかの形でアクセス可能、または使用可能な値です。それらはメモリに格納されることが保証されています。 本質的に到達可能な値の基本セットがあり、それらは明白な理由により削除されません。 例: 現在の関数のローカル変数とパラメータ ネストされた呼び出しの、現在のチェーン上の他の関数のローカル変数とパラメータ グローバル変数 (他にも幾つか同様に内部のものがあります) それらの値は ルー
JS の GC の調査メモ
モチベ 学習がてら GC についての情報をまとめていく リンク 一般の概要 https://ja.javascript.info/garbage-collection V8 特に V8 について https://github.com/thlorenz/v8-perf/blob/master/gc.md https://v8.dev/blog/high-performance-cpp-gc https://v8.dev/blog/trash-talk https://www.jayconrod.com/posts/55/a-tour-of-v8--garbage-collection アプリでのユースケース https://www.html5rocks.com/ja/tutorials/memory/effectivemanagement/
ブラウザで動くアゲアゲなシンセサイザーをWeb Audio APIで作った話 - Qiita
アゲアゲな年末を過ごすために、JavaScriptのちょっとマニアックなAPI「Web Audio API」を用いてシーケンサー機能付きのシンセサイザーを作成しました。 実物はこちらから動かせるので、まずはぜひ遊んでみてください！全体のコードや、操作方法はリポジトリにございます。 はじめに Web Audio APIはブラウザ上で音声制御を行うことができるJavaScriptのAPIです。やや独特な仕組みを持ち少々とっつきにくい部分もありますが、工夫次第で本格的な音声制御も可能な数多くの機能を持っています。 本記事では、今回の実装でも利用している 基本的な概念「Node」「connect」について 音声のテンポを合わせる方法 音声合成 wavファイルの再生 音量変更 フィルター エフェクト(ディレイ、リバーブ)の作り方 をテーマに、Web Audio APIの機能や使い方を解説します。本記
あなたが知らないJavaScriptの便利すぎるショートハンド19選
日頃書いているJavaScriptをもっと短く書く方法を知っていますか？ 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド（短縮記法）を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1．三項演算子 if-else文を1行に収めた短縮記法です。 通常const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } ショートハンドconst answer = x > 10 ? 'is greater' : 'is lesser'; 従来のif文を1行に収めることも可能です。 const big = x >
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
8. ECMA Script ver.1 ver.2 ver.3 ver.4 もめ過ぎて破棄 ver.5 ver.6 → ver.2015 数え方を変更 ver.2016 ver.2017 作成中 このECMAScriptは、時代とともに新しくなってきました。 ver.6からは毎年新しくするよ！っていう意気込みで 数え方を西暦に変更しました。 つまり、毎年便利な機能が増え続けているのです。 もっと詳しく⤴︎ 詳しく⤴︎
JavaScriptを大きく変えうる Dataflow Proposals の概要と論点(Call-this, Pipe Operator)
Dataflow Proposals とは 以下の5つのプロポーザルをまとめて Dataflow Proposals と呼んでいる。 Stage 2: Pipe operator Stage 1: Call-this operator Stage 1: Partial application(PFA) Stage 1: Extensions Stage 0: Function.pipe and flow 例えば Pipe operator, Call-this operator, Partial application を組み合わせると、以下のように書けるようになる。（提案段階なので変わる可能性アリ） import { getAuth, getIdToken } from "firebase/auth"; function isPublic(article) { return articl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
