【FileAPI, readAsText】JavaScriptで文字コードを判別して文字化けを倒す - setchi’s blog
HTML5で追加されたFileAPIで、ローカルファイルをJavaScriptで扱えるようになりました。ファイルの中身をテキストと見なして読み込むreadAsTextメソッドでは、第二引数で文字コードを指定できますが、そもそも文字コードが分からなかったり自動判別したいときの対処法です。 結論としては、readAsArrayBufferでバイナリのまま読み込んでライブラリにデコードしてもらいます。 今回 encoding.js を使いました。 数値配列をもとに、文字コードの判別や変換をしてくれるマッチョなライブラリです。 var file = // 文字コードの分からないテキストファイル var reader = new FileReader(); reader.onload = function (e) { // 8ビット符号なし整数値配列と見なす var array = new Uint
Awesome JavaScript : 素晴らしい JavaScript のライブラリ・リソースの数々 - Qiita
元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージマネージャ. component - より良い Web アプリケーションを構築するためのクライアントパッケージマネージャ. spm - 新しい静的パッケージマネージャ. jam - RequireJS のレポジトリと互換性があり, ブラウザーに焦点を当てたパ
セミコロンをつけ忘れただけなのに...【JavaScript】 - Qiita
はじめに 某小説っぽいタイトルにしちゃいましたが、 JavaScriptでコードを書いていた後輩が二つのコードの挙動の差に困っていたので、 原因究明をしようとしたら、最初は全然わからなかったのですが、いろいろ試してみたところ、どうやらいろんなJavaScriptの仕様が絡み合ってできた罠だったぽいので、 せっかくなので、今回でわかったことを記していこうと思います。 原因のコードのサンプル function foo() { let point = {} try { const lat = 35 const lng = 132 [point.lat, point.lng] = [lat, lng] } catch (e) { console.error(e) } } foo() みた感じ、tryブロックの中で、latとlngにセットされた値をpointオブジェクトに追加しているように見えると思
Array.prototype.sort について
JavaScriptの配列にはsortメソッドがあり配列のソートを実行することができるけど、この配列のソートの中の実装はどうなっているのかという話。v8における配列ソートについての記事が大変参考になりました。 Chrome(V8)の実装はarray.jsにあり、配列の要素数が10以下の場合はInsertion sortを使い、それ以上の場合はQuicksortを利用する。Insersion sortの計算量はO(n^2)であるけど、少ない要素数の場合はQuicksortなどより高速になるらしい。直近のcommmitを見る限りだと、Chrome 69か70あたりでTimsortに置き換えるつもりらしい。TimsortはaverageがO(n log n)で、最悪でもO(n log n)の計算量で済む。QuicksortをTimSortに置き換えるつもりに至った経緯などは調べてない（ので間違っ
JavaScriptでもLINQを使って集計処理を簡単に実装しよう！ | DevelopersIO
[ { "event_code": "deviocafe_wt-test", "person_id": 76, "transaction_no": "019" }, { "event_code": "deviocafe_wt-test", "person_id": 74, "transaction_no": "019" }, { "event_code": "deviocafe_wt-test", "person_id": 75, "transaction_no": "018" } ] というデータをtransaction_noでグルーピング&person_idをマージして [ { "transaction_no": "019", "event_code": "deviocafe_wt-test", "person_id": [76, 74] }, { "transaction_no":
Async/await
“async/await” と呼ばれる、より快適に promise を利用する特別な構文があります。驚くほど簡単に理解し、使用することができます。 Async 関数async キーワードから始めましょう。次のように関数の前に置くことができます:
async / await / Promiseにおけるエラー(例外とreject)の扱いについて考察
ES2016(ES7)では非同期プログラミングが策定されました。各JavaScriptエンジンもPromiseから対応が始まり、Can I useを参照すると2018/1現在ではIE11以外のデスクトップ、スマホとも主要ブラウザはほぼ対応が完了していて利用出来る状態が進んでいるようです。 非同期関数からのエラーをどう返すべきか？ node.jsを開発を行っていて非同期プログラミングをしているとPromise配下では例外とrejectがあって何を使って良いのか考えていました。辿り付いた結論は、 rejectはシステムでは極力使わずどうしても必要な場合は例外を利用する エラーハンドリングを行う必要がある想定可能なエラーはasync functionのreturnで結果を返す ということになりました。どうしてこういう方針になったのかをそもそもエラーとは何かを考察しながら説明します。 システムが想
配列から条件に合うものはfind()で見つけよう。（配列とかおれおれAdvent Calendar2018 – 04日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 04日目 その名の通り find() で見つける (find) ことができます。 オブジェクトの配列相手に使うのが普通。 基本的な使い方 引数に真偽値を返す関数を与えます。 const users = [ { id: '101', name: 'Alice' }, { id: '102', name: 'Bob' }, { id: '103', name: 'Charlie' }, ]; const id = '102'; const targetUser = users.find((v) => v.id === id); console.log(targetUser); // => { id: '102', name: 'Bob' } この例だと (v) => v.name === id の部分が find() の第1引数「真偽
Promiseの使い方、それに代わるasync/awaitの使い方 - Qiita
JavaScriptのasync/awaitはPromiseを使った非同期感たっぷりのコードを同期処理っぽくしてくれるが、async/awaitを理解するには、Promiseも知る必要がある。そこで、Promiseからおさらいしておこうと思う。 構文 まず基本的な構文。どうやってPromiseを作成するのか？ function 非同期的な関数(成功時コールバック, 失敗時コールバック) { if (...) { 成功時コールバック(成果) } else { 失敗時コールバック(問題) } } // ↓executor new Promise(function (resolve, reject) { 非同期的な関数( (成果) => resolve(成果), // 成功時コールバック関数 (問題) => reject(問題), // 失敗時コールバック関数 ) }) Promiseクラスをn
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
navigator.hardwareConcurrency - Web API | MDN
論理プロセッサのコア数を示すNumberです。 現代のコンピューターはCPUに複数の物理プロセッサのコアを持っています（通常は2コアか4コア）。しかし、通常それぞれの物理コアは高度なスケジューリング技術を用いて一度に複数スレッドを実行することができます。 したがって、例えば4コアのCPUは8個の論理プロセッサコアを提供することができます。論理プロセッサのコア数は、コンテキストスイッチを必要とせずに一度に効果的に実行できるスレッドの数を測定するために使用できます。 しかしながら、ブラウザはより少ない論理コア数を報告することを選択することで、一度に実行できるWorkerの数をより正確に表すことがあります。したがって、この数値をユーザーのシステムのコア数の絶対的な測定値として扱わないようにしてください。 この例では、ブラウザが報告した論理プロセッサごとにWorkerが1つ作られ、新しいWorke
JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js) | 勉強したことのメモ
JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった。調べてみるとJavaScriptはIEEE754とかいう規格にそって実装されており、そのせいで誤差が生まれるらしい。自作関数とかで何とかする方法とライブラリで対応する方法があり、ライブラリの方が楽そうだったので使用方法のメモ。 ライブラリの用意自サーバにアップロードする場合以下からdecimal.jsをダウンロードし、適当なディレクトリにアップロードする。 https://github.com/MikeMcl/decimal.js/ CDNで利用する場合以下を記述する。 <script src="https://cdnjs.cloudflare.com/ajax/libs/decimal.js/9.0.0/decimal.min.js"></script>バージョンを変更したい場合は以下から探す。 https
Papa Parse - Powerful CSV Parser for JavaScript
The powerful, in-browser CSV parser for big boys and girls Download Demo Documentation // Parse CSV string var data = Papa.parse(csv); // Convert back to CSV var csv = Papa.unparse(data); // Parse local CSV file Papa.parse(file, { complete: function(results) { console.log("Finished:", results.data); } }); // Stream big file in worker thread Papa.parse(bigFile, { worker: true, step: function(result
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. How to select files, read file metadata and content, and monitor read progress. Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, uploading photos
[Vue.js] ファイルアップロード＆バリデーション ( use bootstrap-vue )
See the Pen vue.js(bootstrap-vue) File Upload by Tenderfeel (@Tenderfeel) on CodePen. なんでか初回はonchangeが反応しない挙動があった。 プレビュー表示ならwatchでv-model監視する手もあるな🤔と思った。 draganddropの判別にmodernizr使おうとしたら存在しなかったんだけど消えたんですかね。 ないものは仕方ないからisMobileでPCだけドラッグドロップUIになるようにしてます。 Fileが色々と情報をくれるのを利用して違反がないかチェックする。 error変数にエラーメッセージを入れるとします。 error: [] 画像ファイル容量 if (val.size / 1000 > 200) { this.error.push(`ファイルサイズが大きすぎます（${Math.r
![[Vue.js] ファイルアップロード＆バリデーション ( use bootstrap-vue )](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
File APIを使ってローカルのファイルを読み込んでみる ｜ Tips Note by TAM
HTML5のFile APIについて少し調べる機会がありましたので、JavaScriptを使ってローカルからファイルを読み込んで、ブラウザ上に表示するところまでを試してみます。 画像の読み込み ローカルの画像を読み込んで、ブラウザ上に表示させてみます。 <input type="file">でファイルの読み込みを行い、読み込んだ結果を#resultに出力します。 ■HTML <input type="file" name="file" id="file"> <div id="result"></div> ■JavaScript var file = document.getElementById('file'); var result = document.getElementById('result'); // File APIに対応しているか確認 if(window.File && w
PromiseによるJavaScript非同期処理レシピ集
Promiseの概念はずいぶん浸透してきました。Promiseは単なる「新機能」のひとつから、もはや非同期処理における基本となりました。有志のライブラリなどもPromiseを返すのが当たり前になってきていて、コールバックでの処理はオプションであることが多くなりました。 さて、そうなってくるとPromiseの概念がどうこうというよりも、実用的なケースに対するコードスニペットがほしくなってきます。そこで今回の記事では、よくあるケースに対しての具体的解決策をいくつか提示します。 この記事について この記事では、JavaScript初心者に向けた、実用的な観点に焦点をあてて説明します。よっていつもの記事ほど正確性や厳密性はありません。 Promiseの「仕様」について詳しく知りたい場合は、MDNを読むなり、仕様書を読むなりしてください。 世界はPromiseに染まった Promise！Promis
Web Workersを用いてJavaScriptをマルチスレッド化する
長らくの間、JavaScriptはシングルスレッドな言語でした。重い処理を実行するたびにUI処理はブロックされ、マルチコアCPUは上手に使えない、それがJavaScriptの常識でした。ですが、Web Workersがあればそれが変わります。 Web Workersとは JavaScriptは、Workerという処理単位を持ちます。Workerはバックグラウンドで非同期に処理を行うための最も簡単な手法であり、JavaScriptに他の処理を妨げないタスクを実行する手段をもたらします。 しかしなぜWorkerという名前なのでしょうか。プログラマにとってなじみ深い「スレッド」ではいけなかったのでしょうか。 独立したメモリ空間 事実、Workerはスレッドのようなものと言えます。しかしながら、Workerにはプログラマが一般的に想像するスレッドとは少し違う点があります。スレッドというよりかは、ど
なぜ昨今のJavaScriptではイミュータブルであるべきと言えるのか歴史的背景を踏まえて言語化する - Qiita
先日JavaScriptに慣れていない人のコードをレビューする機会があり、constで宣言されたオブジェクト内部に副作用を与えている記述がありました。 その時に「今の動作に問題ないけど、今風のJSならイミュータブルの方が良いかも」と指摘したものの、JSに疎い人からすれば背景が分からないはずで、理由を自分なりに説明したものの案外言語化が難しかったことがありました。 難しい理由として、イミュータブルであることは実利面と同時に、Facebook発祥のトレンドという側面も多分に含んでおり、JavaScript自体の潮流も踏まえておく必要があるからです。 今回は実利面に加えてトレンド面も交えて、なぜイミュータブル性がJavaScriptで重宝されるのかを見ていきましょう。 フロントエンドの世界では状態を持ち、時間やインタラクションと共に変化するから サーバーサイドの世界から見た場合、HTTPはステー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
async関数においてtry/catchではなくawait/catchパターンを活用する - Qiita
