Object.entries() を使ってObject → 配列変換 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Javascriptで動的にファイルを読み込む - Qiita
はじめに ウェブサイトで外部ライブラリを読み込むというのはよくやる行為だが、それが多くなってきたり、外部ライブラリを踏み台に自作ライブラリを作る(＆同じサイト内で使い回す）となると読み込みの管理も大変になってくる。 ので、その辺を自動化する関数を作ってみた。 headに読み込みリンクを生成する 二重読み込みの防止装置もつけてある。 function insert_link(tagname, obj, raw_url){ // 差し込む要素の生成 var target_tag = document.createElement(tagname); var keylist = Object.keys(obj); var currentkey; for(let int = 0; int < keylist.length; int++){ currentkey = keylist[int]; tar
2021年に学ぶべきJavaScriptフレームワークは何かね？ - Qiita
Discussion Threads dev.toではDiscussion Threadsという、議論やコメントが前提の記事を立てることができます。 まあ見てのとおり、大半のスレッドは閑古鳥が鳴いてますが。 最近盛り上がったスレッドとしてはShow off your Workspace、日本でいうところの環境晒しスレがあります。 みんな格好いい環境ばかりで驚きですね。 これはもう私も自分の環境を晒して世界を絶望と混乱の渦に落とし入れなくては。 そんなわけで以下は、dev.toに先日投稿されたDiscussion Threadsのひとつ、Which JavaScript frameworks are worth learning in 2021?のコメントを軽く抜き出してみたものです。 スレ主もI am sure there are no right answersと言っているように、決して
npmとyarnのコマンド早見表
2019/12/24追記 npmとyarnの脆弱性が報告されています。 [npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ] (https://blog.cybozu.io/entry/npm-vulnerabilities-and-postinstall) npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる 概要 npmとyarnの「よく使う」から「ときどき使う」くらいまでのコマンド早見表です。 環境 Windows 10 Professional Nodist 0.8.8 参考 [npm Documentation] (https://docs.npmjs.com/cli) [CLI の紹介 | Yarn] (https://yarn
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
Javascriptで巨大なテキストファイルを少しずつ読み込む - Qiita
stack overflowのコードをアレンジして実現。 chunk_sizeずつファイルを読み込み、読み込んだファイルを一文字ずつ変数に追加、改行を見つけたら callbackを適用して変数のメモリを解放する。なお、全ての改行コードに対応しているが、出力時には \n に統一される。 残念ながら改行のないテキストデータには使えない。javascriptの変数に格納できる文字数の最大値（Chromeであれば268,435,440文字）を超えた時点でエラーが起きる（その前にタブが落ちる可能性もあるが）。 readBigTextForEachLine = (file, callback, chunk_size = 1024) => { let offset = 0; let text = ""; let slice = ""; let fr = new FileReader(); fr.onlo
もう一度理解する、JavaScriptの配列とコピー - Qiita
この記事はKobe University Advent Calendar 2019の23日の記事です。一日の遅刻です。いい加減に遅刻癖がつきそうな感じなので本当によくないですね、申し訳ないです。 みなさんは配列をコピーするとき、array.slice()を使っていますか？それとも、[...array]でしょうか。1 本記事では、なんとなく曖昧になっているかもしれないJavaScriptでの配列のコピーについて、もう一度おさらいして理解を深めなおすことを目指します。 「配列」の「コピー」とは？ そもそも、配列をコピーする、とは、どのような操作のことを指すのでしょうか。 これはコピーではない、というのは、みなさんもご存知の通りのことと思います。2 記事に入るにあたって、まずはJavaScriptの配列とはどのようなものなのか、コピーするとはどういうことかを、ここでおさらいしてみることにしましょ
JavaScriptでファイルダウンロード処理を実現する - Qiita
はじめに モダンブラウザならJavaScriptでファイルダウンロード処理を実現することができます。SPA(シングルページアプリケーション)など、クライアント側にデータを持つようなアプリケーションであればサーバアクセスなしにメモリの内容からファイルを生成してダウンロードさせることができます。 実装方法 やり方は リンクのHTML5のdownload属性を使用してダウンロードファイル名を設定 File APIのBlobを使用してデータを作成 window.URL.createObjectURLでBlobからURLを生成しそれをリンク先に設定 とするだけです。これでChromeとFireFoxはいけます(download属性のブラウザ実装状況を見るとを見ると、試せていないですがEdgeとOperaもいけそう)。加えてIEをサポートする場合は、IE10/11であればwindow.navigato
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
TypeScriptの型におけるJSXサポートが100%分かる記事 - Qiita
TypeScriptはJavaScriptに静的型を付けることができるAltJSです。2015年9月に登場したTypeScript 1.6ではJSXのサポートが搭載され、.tsxという拡張子を用いることでJSXを含むコードを書いたり型チェックしたりすることができます。 JSXはJavaScriptに対してHTML（あるいはXML）のタグのような構文を導入する拡張記法です。以下の例のようにJavaScriptプログラム中に式としてタグを書くことができます（https://facebook.github.io/jsx/ から引用）： // Using JSX to express UI components. var dropdown = <Dropdown> A dropdown list <Menu> <MenuItem>Do Something</MenuItem> <MenuItem>
セミコロンに関する ESLint ルール - Qiita
まえがき ESLint seems like the light saber of the ASI Wars these days. — Nicholas C. Zakas (@slicknet) 2018年1月12日 JavaScript の言語仕様に ASI 利用に関する警告を追加しようという動きがあって、セミコロン スタイルに関する議論が再燃しているようです。その中で「スタイルに関わらず避けられない落とし穴はあるので Linter ツールを利用すべき」というお話もあったので、セミコロンに関する ESLint ルールをまとめました。 ASI とは Automatic Semicolon Insertion (自動セミコロン挿入) の略。改行のある場所で構文エラーが検出されたときに自動的にセミコロンを挿入して再解釈する JavaScript の言語機能のこと。 セミコロン関連ルール 書式
JavaScript Standard Styleのススメ - Qiita
みなさんは、JavaScriptのコードを書くときに文字列は何で囲みますか？シングルクォート？ダブルクォート？ インデントに使用する文字はスペース？それともタブ？ JavaScript Standard Styleは、そのように千差万別なコーディングスタイルを統一するためのスタイルガイドの一つです。1 JavaScript Standard Styleのルール JavaScript Standard Styleには、次のようなルールがあります。 インデントはスペース2個 文字列はシングルクォートで囲む 未使用の変数は禁止 文末のセミコロンは禁止 キーワードの後にスペースを入れる 関数名の後にスペースを入れる 値の比較に==ではなく===を使用 ただしobj == nullはnull || undefinedをチェックするために許容される 常にNode.jsのerr引数をハンドル ファイルの
ソースマップの自作は割とコワくない。 - Qiita
「めんどくさそう」先入観で敬遠していたのですが、仕様を見たらそんなでもなかったので書き残しておきます。手っ取り早くコードを見たい方はこちらをどうぞ。 ユーザとして、ソースマップに接する機会は多いですが、AltJSを作るとかでもない限り、あまり提供側に回ることはないかもしれません。私自身、次のような疑問というか誤解を抱えたまま、深入りしなかったクチです...。 誤解1: ソースマップを作るにはASTを作る必要がある → 実際はもっとシンプル 誤解2: なんかすごいエンコード(AAAA;AACA;AACA;AACA...)がされてる → ただのBase64 よく見かけるソースマップの説明記事(というほど、記事自体ないけれど)では、「ソースを構文解析してASTを構築して...」という手順が出てくるのですが、 ソースマップにASTは必要ありません。 もちろん、実際にAltJSを作るならASTの作成
脱TSLintして、ESLint TypeScript Plugin に移行する - Qiita
なぜ脱 TSLint するのか いままで TypeScript の Linter として TSLint を使っていました。 ですが、TSLint は開発コミュニティが活発とはいえないことが以前から指摘されていました。 TSLint is dead - Klaus Meinhardt - Medium そんな中で、TSLint 開発チームは ESLint のプラグインとして TSLint の機能を統合していく typescript-eslint プロジェクトを開始し、TSLint は 2019年中に非推奨となる予定である ことが発表されました。 Roadmap: TSLint -> ESLint · Issue #4534 · palantir/tslint typescript-eslint/typescript-eslint: Monorepo for all the tooling w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSのスプレッド構文を理解する - Qiita
export defaultってなんだろう - Qiita
JavaScriptのsliceとspliceがややこしいので解説 - Qiita
JavaScriptで配列のコピー（値渡し） - Qiita
ES6のexportについて詳しく調べた - Qiita
if文はJSXの中で書け - Qiita
