JavaScriptで密かに誤解されていること5選 - Qiita
皆さんこんにちは。この記事では、JavaScriptに関して誤解している人が多そうな小ネタを5個ほど集めましたので紹介します。では早速どうぞ。 ...は「スプレッド演算子」ではない スプレッド演算子ではなくスプレッド構文です。 ...はES2015で追加された便利な構文です。次のように配列をコピーしたり、関数呼び出しの引数に配列を展開したりできます。 また、ES2018からはオブジェクトの中でも...が使えます。 当初この...を「スプレッド演算子」（spread operator）と呼ぶ向きがありましたが、よく見るとこれは全然演算子ではありませんね。 演算子の定義は人によって異なるかもしれませんが、「いくつかの式から式を作る働きをする構文」というのが一般に受け入れられている定義だと思います。例えばx + 1という式は、xという式と1という式を+で繋げる事でx + 1という式を得ています。
脆弱性のあるJavaScriptライブラリを検出するRetire.jsを紹介 - Qiita
「Webには時代遅れで脆弱性のあるJavaScirptライブラリで溢れていることが研究により明らかに」という記事のとおり、世の中には脆弱性のあるJavaScriptライブラリを使った多くのウェブサイトが存在します。 IPAが公開している「安全なウェブサイトの作り方」には脆弱性が修正されたバージョンのライブラリを使用する。と記述があったり、「OWASP TOP10 2017 (日本語版)」にも既知の脆弱性のあるコンポーネントの使用を避けるように、と脆弱性のあるライブラリを使用しないよう注意喚起されています。 脆弱性のあるライブラリを使用しているか調べることができるRetire.jsを紹介します。 すべての脆弱性を防げる保証は無いので、あくまで自己責任でお使いください。 Retire.jsとは Retire.jsは上の画像のようにCLIなどで実行することができる脆弱性のあるJSライブラリを検出
JavaScript dayjsはMoment.jsの代替になるか?
JavaScriptの日付操作には罠が多く、業務では日付操作を簡単かつ安全に操作するライブラリが使われる。日付操作のライブラリの中でもMoment.js(Star数40,601)はよく知られているが、ファイルサイズが大きくパフォーマンス改善の妨げになることがある。 そこでこの記事ではより軽量でMoment.jsの代替となるdayjs(Star数19,872)を紹介する。 dayjsとは dayjsとは、日付操作を簡単にするJavaScriptのライブラリだ。Moment.jsのAPIと広く互換があり、gzip圧縮されたサイズは2.71KBと軽量なのが特徴だ。 インストール dayjsが十分Moment.jsの代わりになり得るのか確認していく。 まずはインストールして、業務で使われる日付操作をみていく。 npm install dayjs --save package.json { "dep
要チェックな10個の Node.js フレームワーク - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、10 Node.js Frameworks Worth Checking Out: Express, Loopback, Hapi, and Beyond の日本語訳です。 要チェックな10個のNode.js フレームワーク テクノロジーは急速に変化しているので、開発者たちは新しいテクノロジーを使用し、Web開発のニーズに合わせて、より便利なフレームワークを採用しています。Node.js は、アプリ開発にJavaScriptを使うのが好きな開発者達から、大いに注目されています。 開発者であるあなたは、クライアントサイドとサーバ
【翻訳】より簡潔で高性能なJavascriptを書くための7つの便利なコツ - Qiita
はじめに 読んでいてストックしておきたいなと思ったので、初めて翻訳記事を書きます。 私（@shimonosatoru）が加えたものに関しては斜体で記載しています。 以下、翻訳です。 本文 私たちがJavaScriptを書くとき、私たちは他人のコード、ウェブサイト、そして私たちが使ったチュートリアル以外の場所で見つけたコーディングを効率化するトリックリストを作成しました。 それ以来、私たちはこのリストにトリックを追加してきました。この記事は初心者にも役立つように書かれていますが、JavaScriptを扱えるデザイナーでさえこのリストの中から何か新しいものがないか見つけようとしています。 これらのコードの多くはどのような状況でも役に立ちますが、簡潔さよりも一貫性が重要であることが多いプロダクションレベルのコードにはふさわしくない場合があります。 みなさんにはそれを判断して欲しいと思っています。
SPAじゃないプロジェクトのための控えめなJavaScriptフレームワーク「Stimulus」 - yuhei blog
ReactやAngularのように、アプリ内のすべてのHTMLをJavaScript側で管理して描画するアプローチは大げさすぎる。ほとんどの場合において。 もちろん一定以上の複雑さがあればその辺のJavaScriptフレームワークを使った方が良い。が、それがやり過ぎになるプロジェクトは多い。というかその方が多い。それでも、それらのアプローチではやり過ぎになってしまう場合でも、秩序のあるコードを書き続けられないと当然苦しい状態へ向かう。 この微妙な（そして多数派であるはずの）環境を適度に管理できる枠組みが必要だ。これまでちょうどいい解決策を見つけられずに苦労してきた。Web Componentsは課題を解決するかもしれないがまだ来ない。そこで出会ったのがStimulusだ。 いわく、Stimulusは既存のHTMLのための控えめなJavaScriptフレームワーク。サーバーサイドレンダリング
騙されるな。JavaScript の function は関数じゃない。コンストラクタだ。 - Qiita
といった書き方を目にしたことがあると思います。また、普段から「関数」として使っている人も多いと思います。 しかし、結論から言うと、JavaScript の function は普通の「関数」ではなく「コンストラクタ」です。JavaScriptの構文・キーワードに騙されてはいけません。(私自身、少し勘違いをしていて、以前書いた記事(JavaScript初心者にはfunctionよりも、まずアロー関数を教えるべき)では function は「メソッド」だと主張していました。) 「newができるからコンストラクタって言いたいだけなんでしょう」と思った方、とりあえずブラウザバックしようとする手を止めて最後までお読みください。 function を「関数」として使用すると、状況によってはパフォーマンスに影響する可能性があります(若干誇張表現です。最適化の度合いによります)。 以下、function
alertを出したいんだ俺たちは - 葉っぱ日記
利用者に対してメッセージを意識的に伝えたり、あるいは何かしらの行動を促すために、ダイアログボックスを表示するための機能がブラウザーには複数実装されている。alertの聖地、兵庫県出身者として、その手の機能を以下にまとめた。 機能 UIの占有など 機能、特徴 javascriptの window.alert メソッド タブモーダル 任意のメッセージが表示可能。繰り返し表示される場合にそれを抑止する機能がほとんどのブラウザーに実装されている。 javascriptの window.prompt メソッド タブモーダル 任意のメッセージが表示可能。任意の１行テキストが入力できる。繰り返し表示される場合にそれを抑止する機能がほとんどのブラウザーに実装されている。 javascriptの window.confirm メソッド タブモーダル 任意のメッセージが表示可能。OK、キャンセルのボタンを持つ
ページ読み込み中に setTimeout() や setInterval() が先送りされるようになりました (影響あり) | Firefox サイト互換性情報
Firefox 66 以降、ページ読み込み中に window.setTimeout や window.setInterval メソッドで追加されたタイマーは低い優先度をつけられ、空き時間が得られるか読み込みが完了するまで先送りされるようになります。 この変更は Google Docs のような複雑なウェブアプリケーションのパフォーマンス向上を意図したものですが、初期化コードが適切に設計されていない場合、予期せぬ競合状態が起きる可能性があります。Best Buy のサイトで 1 件のリグレッションが報告され、後にサイト側で修正されましたが、Mozilla の開発者によれば、この問題はおそらくリソースアクセス順が変わったことが原因と思われます。 ウェブ上のタイマーはそれほど正確ではないということを忘れずにいましょう。ブラウザーのタブが背面にある場合など、様々な理由で 指定したよりも長く掛かる場
Array.prototype.sortについて、きっと知らないこと - Qiita
これがピタリと正解できた場合には、この記事を読む必要はないかもしれません。なお、この文書はECMA-262 第6版（いわゆる「ES6」）を前提としています。数字だけのリンクは、仕様書の各セクションにつながっています。 ソート関数を指定しない場合 まずは、ソート関数を指定しない場合の挙動について考えていきます。この場合、「中身を文字列化して順に並べ替える」ということはよく知られているかと思います（数値が順にならなかった経験をしたことがある人もいるかと思います）。この中身を掘り下げてみます。 ToString内部操作 よく、値を文字列化するのに、String(value)やvalue + ''のような手法が使われますが、標準で行われるソートの比較時に使われるのは、内部名がToStringとなっている操作です（22.1.3.24.1）。 このToStringは、以下のような値を返します（7.1.
String.lengthの基本的な考え方について | teratail
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
JavaScriptでも単体テストを導入しよう！ってかテストって何？
昔はお遊び程度の使われ方をしていたJavaScriptも、本格的な開発に使われるようになってからだいぶ経ちました。 開発の規模が大きくなってくると、どうしても「テスト」という考え方からは逃れられません。そこで、JavaScriptの開発でもテストを導入してみましょう。 この記事では、「JavaScriptのテストってどうするの」という方や「そもそもテストって何」という方に向けて、JavaScriptにおけるテストについて紹介します。 テストってなんだろう 個人で普通にプログラミングしていると「テスト」という単語にはなかなか触れる機会がないと思います。ですが、プロジェクトがそこそこの規模になってくるとテストは非常に重要になってきます。 まずはテストとはなんなのか、どういった効果があるのかについて説明します。 単体テスト（ユニットテスト） プログラミングにおいて、特に小さな規模の開発においては
Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する
JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に
JavaScriptの「コールバック関数」とは一体なんなのか
近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and flexible JavaScript library to animate the web.
JavaScriptの配列のベターな使い方4点 - Qiita
先日ヘルシオホットクックを衝動買いして、あまりの便利さにメルトダウン中です。 みんなも買おうヘルシオホットクック。 「ヘルシオホットクックでカレー作った」をトゥギャりました。 https://t.co/eWXmMOPIfL — ラナ・クアール (@rana_kualu) 2019年1月3日 以下はpacdivによる記事、Here’s how you can make better use of JavaScript arraysの日本語訳です。 Here’s how you can make better use of JavaScript arrays この記事はさっくりと読めます。本当だよ。 この数ヶ月の間に、私がチェックしているリポジトリで4種類のプルリクエストがやってきていることに気付きました。 これらの間違いは全て自分で作っていたところだったので、この記事を書いています。 配列メ
ESLint導入環境にprettierを追加して運用する - Kenta Katoh's Blog
ESLint導入環境にprettierを追加して運用する July 15, 2017 prettierというコードフォーマッタが最近OSSでよく使われていて、OSSに限らず複数人開発しているプロジェクトなどで非常に有用だと感じたので、導入した。以下はその際の覚え書き・注意点など。 prerrierとは Node.js製のコードフォーマッタ。以下のコードに対応している。 JavaScript, including ES2017 JSX Flow TypeScript CSS, LESS, and SCSS JSON GraphQL ESLintとどう違うのか 似たようなツールでESLintが思い出されると思う。prettier公式のドキュメントにも言及があるが、ESLintのリンティングには大きく分けて二種類あって、 Formatting rules Code-quality rules p
ESLint(あるいはTSLint)とPrettierを併用する - ひと夏の技術
[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではあまりないと思うので、実質この組み合わせは必須のようになってくる気がしている。 それで、Prettierとはなんぞや…JSのコードフォーマッタで、、というPrettierの概要についてはググればめっちゃ出てくるので省略。 この記事は導入したいけどなにをどうすればいいんやという人向け。 と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
eslintの各configの違い - Qiita
