javascriptでバイナリを扱うために - Qiita
html5の時代になってjsでバイナリデータを扱うことが増えてきている. そんななかで覚えておくべきことをいくつかメモしておく. C言語におけるintやshortなどの型ついて知っておくと楽になる. 具体的なことはあまり書いてないので実際にそういったプログラムを作るには, 出てきた単語をぐぐって欲しい. そもそもバイナリデータをどうやって扱う? jsでは主にUint8Arrayという配列を使って扱うことが多いだろう. このUint8Arrayというのは数値しか記録できず,値が0から255までの初期化時に長さが決まる配列である. Uint8Arrayというのはつまり,負の数なし(Unsigned)の整数(int)で,要素一つあたり1バイト(8bit = 1byte)の配列(Array)ということである. C言語におけるunsigned char[]に相当する. この配列は連想配列ではなく純粋
新言語『TypoScript』を作った - Qiita
この記事は、クソアプリAdvent Calendar2021の20日目(ホノルル時間)の記事であると同時に、GMOペパボエンジニア Advent Calendar 2021の21日目(日本時間)の記事でもあります。 みなさん、TypeScript使ってますか？TypeScriptはJavaScriptの世界に秩序をもたらす素晴らしい言語ですね。 しかし世界には光の秩序だけでなく闇の混沌も必要です。 という訳で、JavaScriptに闇の混沌をもたらす新言語を作ってみました。 その名も『TypoScript』です。 TypoScript is 何 TypoScriptとは何か。まずはこちらのコードをご覧ください。 function fizz_buzz(count) { for (var i = 1; i <= caunt; i++) { if (i % 3 === 0 && i % 5 ==
【IE限定】JavaScriptからCOMを呼び出す - Qiita
IEからCOMを呼び出す方法です。 最近やったので、ノウハウをまとめます。 IE離れが進む中で今更こんなことする機会は滅多にないと思いますが、やるとなるとレガシー過ぎて情報が少なく、苦労すると思います。 開発環境 開発環境は以下の通りです。 Windows10 Visual Studio 2019 IE11 C++ インストール Visual Studio 2019をインストールします。 今回は個人の勉強用として、Visual Studio Community 2019をインストールしました。 基本、インストーラに従って、デフォルトのまま、インストールすればよいですが、「ワークロード」で「C++ によるデスクトップ開発」を選んでください。 プロジェクト作成 Visual Studio Community 2019のインストールが終わったら、プロジェクトを作成します。 Windowsの検索窓
JWT・Cookieそれぞれの認証方式のメリデメ比較 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JWTとは JSON Web Tokenの略。ジョットと読むらしい。 ざっくりいうとJsonに電子署名を加え、URL-Safeな文字列にしたTokenのこと 正確にいうと、電子署名を使用する方式はJWS（JSON Web Signature）と呼ばれ、別途暗号化を使用するJWE（JSON Web Encryption）も存在する。よく見かける説明はJWS方式のほう。 JWS方式の場合、電子署名であり暗号化ではないため、中身を見ることは可能。但し改ざんはできない、という仕組み。 実際のユースケースで言うと、サーバ側で認証情報が入ったJso
【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita
「な、なんじゃこりゃあああぁあっtっt！！！！」 ・・・ ・・・ ・・・ 非同期処理を"ちゃんと"理解して使いたい 『非同期処理なんとなくの理解で書いている...』 『動いてるし、ヨシ！』 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついついなんとなくで書いてしまいそうになります。 （*1: 令和になってからプログラミングを知った人。初心者のこと。） ちなみに冒頭のコードは、「並列でいける処理をつい直列でやってしまっている」 例です。 実際に手を動かしながら非同期処理の理解を深める 本記事は以下の構成で、順を追って非同期処理を学習し、明日から自信を持って非同期処理が書けるようになるためのハンズオンです。 JSの非同期処理について知る Promise について知る Async / Await を使えるようにする 冒頭のコードがリファクタリングできるようになる 実際
![【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4bf449aecedd4337da846b0aadc121a2a1f5652e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTM4MCZ0eHQ2ND00NENRU21GMllWTmpjbWx3ZE9PQWtlYWNyT2FYcGVhY3F1YVlqdU9BZ1ZzZ1lYTjVibU1nTFNCaGQyRnBkQ0JkNDRHVjQ0S1Q0NEdNNXEyNzVMMlQ0NEduNTVtNjZLYUw0NEdWNDRLTUxpNHUmdHh0LWNvbG9yPSUyMzMzMyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NCZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249Y2VudGVyJTJDbWlkZGxlJnM9MDQxOGFmOThjYjQ3NmY0NTJjNzNkMWUyZThmNmQxOWU%26mark-align%3Dcenter%252Cmiddle%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTUwMCZ0eHQ2ND1RR2x0Y0d4ZmN3JnR4dC1jb2xvcj0lMjMzMzMmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NDUmdHh0LWFsaWduPXJpZ2h0JTJDYm90dG9tJnM9NTYzMWFlYzJkN2M0MWMwYTI1MDRiZWZhOTk2OTliNGU%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Db39e38892a91f7de69ef1909da2cf5f1)
Firebase AuthなどJavaScriptでAPIセッション用のトークンを得ることについて - Qiita
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう （※ こちらの参照記事の内容自体に不備があるとか甘いとか指摘するものではないんですが、勝手に枕として使わせてもらいます） 上記記事は、Firebase Authenticationが提供するJavaScript APIを使ってJWTのトークンを取得し、自前のサーバにHTTPのヘッダで送りつけて検証をさせることで、認証の仕組みをセキュアかつかんたんに実現しよう、という内容です。 このようにJavaScriptのAPIでトークンを発行して自前バックエンドのAPI認証につかう方法はAuth0のSDKなどでも行われていますので、IDaaSをつかってSPAを開発する場合には一般的なのかもしれません。 話は変わりますが、SPAの開発に携わっている方は「localStorageにはセッション用のトー
ESLint v7.0.0 の変更点まとめ - Qiita
overrides: - files: "*.js" extends: my-config-js - files: "*.ts" extends: my-config-ts のような設定がある場合、eslint lib コマンドは lib ディレクトリ内の *.ts ファイルもチェックします。 なお、eslint lib/** のように Glob パターンを指定した場合は今まで通りに動作しますのでご注意ください。overrides 設定にかかわらず Glob パターンにマッチする全てのファイルをチェックします。 プラグイン開発者へ: あなたが管理するプラグインが *.js 以外のファイルを対象にするルールを提供する場合、recommended設定に overrides を追加すると利用者は便利かもしれません。 動作を元に戻したい場合: 今まで通り overrides 設定にかかわらず *.
仮想DOMの作りかた - Qiita
どうもこんにちは、ウマシバ(@UMASHIBA)といいます！ 先日、仮想DOMを個人的に実装してみまして、その際に得た知見を記事という形で共有したいと思います。 仮想DOMを作成するという内容上とても長い記事になってしまっていました。時間がある時や何日かに分けたりして読んでくださるとうれしいです。 それでは記事本文です。どうぞ、 はじめに この記事はReactやVue, Angular等のモダンなフロントエンドフレームワークの基礎部分となっている仮想DOMを作ってみようという記事です。 形式は、先日私が作成した仮想DOMと同じモノを順を追って実装してみるという形でやります。 完成形はここ(https://github.com/UMASHIBA1/UMASHIBAVirtualDOM) にあります。 ※もしよければスターください。すごくよろこびます。 この記事を読むには TypeScript
TypeScript(JavaScript)で関数型言語の機能をつまみ食いする - Qiita
関数型言語のことなんて知らなくても、ただそこに便利な関数があるので使っていきましょうというお話です。 LodashやRamdaには、リスト操作やオブジェクト操作に関する便利な関数がたくさんあります。 ["a", "b"] と [1, 2] から { a: 1, b: 2 } を作る処理を思い浮かべてください。 何も知らなければforループを使って書いたりしそうですが、_.zipObjectやR.zipObjを知っていればこれを使うだけでできてしまいます。 以下で、Clojureのclojure.coreにあるよく使う関数を中心に、Lodash, Ramdaを使ったときにどうやって実現できるのか調べてみました。 調べてみた感想としては以下のとおりです。 JavaScript標準の関数ではまだまだ不足している部分が多く、LodashとRamdaは一長一短 Lodashは副作用がある関数（対象オ
【JavaScript】JavaScript、その前に〜Webサイトが表示されるまで・レンダリング - Qiita
JavaScriptの勉強に必要な事前知識です。追求すると底がありませんが、最低限必要な内容をまとめました。 Webページが表示されるまでの流れ ブラウザの役割 JavaScriptの役割 Webサイトが表示されるまで アドレスバーにURLを入力し、画面上にWebページが表示されるまでの流れです。通信でどのようなデータがやり取りされているか、確認しておきます。 図解 ブラウザ 上図のクライアントに該当するアプリケーションがブラウザです。動作の結果は「Webページを表示する」ですが、内部では様々なことが行われています。 ブラウザの構成については、意外とネット上の情報が少なかったです。 自分は下記サイトを参考にしました。 ブラウザの仕組み: 最新ウェブブラウザの内部構造 ウェブサイトが表示されるまでにブラウザはどういった仕事を行っているのか？ 明確に構造が分かれているかは分かりませんが、少なく
Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
お知らせ（2021/05/26 追記） 以前はeslint --fixなどで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLint で Prettier を実行するためには、ESLint の Plugin が必要でしたが、これを利用することが公式で推奨されなくなりました（詳細はこちら）。 そのため、記事を更新して Prettier と ESLint をそれぞれ実行させるような内容に変更しました（ついでに husky のバージョンも上げており、それに関する内容も更新しています）。 更新前のコードや記事は以下にありますので、必要に応じてご確認ください。 はじめに Prettier（v.2.3.0） に関しての備忘録です。 「Prettier の何が便利なのかよくわからない」 「ESLint
npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita
npmとはNode.jsインストール時に付属するパッケージマネージャーで、Node.jsのパッケージの管理や実行を取り扱うものです。 npmのバージョン5.2.0で導入された「npx」を用いると、下記のようにローカルにインストールしたnpmパッケージを、npxコマンドだけで実行できるようになります。 npxはnpmにバンドルされているため、npxの個別インストールは不要です。 次のようにしてモジュールを実行できます。 従来のnpmの実行方法との比較 従来では、ローカルのnpmパッケージを使用するには、次のような方法が必要でした。 方法1: ./node_modules/.bin/(パッケージ名)で実行する 方法2: $(npm bin)/(パッケージ名)で実行する 方法3: package.jsonにnpm-scriptsを記述して実行する npxはいずれの方法よりも簡潔なコマンドで、パッ
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
敗北者のTypeScript - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScriptはJavaScriptに静的型を導入したプログラミング言語で、登場から現在までその人気を増し続けています。 動的型付き言語であるJavaScriptに静的型の安全性（コンパイル時にバグ・間違いを発見することができる能力）を与えることで、TypeScriptはJavaScriptによる開発の効率を上げてくれます。 裏にJavaScriptがあるという特性もあり、TypeScriptは「部分的に静的型チェックをする」というような挙動をサポートしています1。詳しくは後述しますが、これによりJavaScriptからTypeS
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ES6〜ES13(es2015〜es2022)まとめ - Qiita
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd012de25b70691c33af879e24161878bd017409/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY1Mjg1MjYlMkZkZTFjOTBmNmE3MjJhODY1ZDI3ZmFkODk4N2RhNTU0ZDhhODY1ZGJmJTJGbGFyZ2UucG5nJTNGMTU4MjI2MzEwMj9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz1lNDMwM2E1MmY5YjQyOWZlYTUyNTI2MzcyZjhlMGRiYg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D665c9263d8fde7538f5a183884a145e5%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjYyNDg4MTg3OWIwZmRkYzgzYjZmYTZiNzUxYTExOTc%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MjlhYjk2ZGU2MDY4ZTQwZTI4YjM3ZTExNWI2MWQ1NQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4921f7432a9b21f0593f66774c8857d0)
この TypeScript が Hello, world! のくせに慎重すぎる - Qiita
フロントエンドカンファレンス福岡 2019 登壇資料まとめ - Qiita
