モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
colorsなどのnpmパッケージに悪意あるコードが含まれている問題について
追記: 2022年1月11日 2:29 JSTにDoS脆弱性としてセキュリティアドバイザーが出されて、悪意あるバージョン(1.4.1や1.4.2)はnpmからunpublishされ、npmの最新は安全なバージョンである1.4.0へと変更されました。 Infinite loop causing Denial of Service in colors · GHSA-5rqg-jm4f-cqx7 · GitHub Advisory Database 2022-01-08 に colors というnpmパッケージにDoS攻撃のコードが含まれたバージョンが1.4.44-liberty-2として公開されました。 GitHub: https://github.com/Marak/colors.js npm: https://www.npmjs.com/package/colors 問題についてのIssu
【React.js】SPAでのリビジョンアップ対策 - Qiita
11月からエイチームライフスタイルにJoinした奥山です。 本稿ではReactでWEBサービスなどを運用されている方で、同様の問題で苦労されていることの解決に役に立ってもらえればと思います。 ReactはWEBに新しいUXをもたらし開発するのも非常に楽しいものですが、同時に従来のWEB運用では想定し得なかった問題も出てきます。今後はこういった現場のノウハウ的なものを定期的にアップしていけたらと思います。 ReactなどでSPAを構築するメリットは高速動作する優れたUIがあると思います。 SPAの実態であるJavascriptファイルを最初にブラウザ側に読み込むことで、後はAPI通信のみとなるためHTMLページを都度読み込む従来のWEBサイトと比べ、不要な情報の読み込みや再レンダリングのオーバーヘッドが軽減され、高速なUIを実現できるようになります。 リビジョンアップ時の問題 WEBサービス
React.useEffectで非同期処理をする場合の注意点2つ（変更あり） - Qiita
はじめに React 16.8から導入されたhooksにはuseEffectがあります。 詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。 以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea
JavaScriptのIterator / Generatorの整理
目的と対象読者 IteratorとIterableとGeneratorとGenerator Functionの区別が曖昧な人 (記事前半) Generatorの制御フローを完全理解したい人 (記事後半) の理解を深めるための記事です。 まとめ IteratorとIterableの関係 Iteratorは狭義には呼び出し元の next 呼び出しに応じて要素を出力するインターフェースである。 IterableはIteratorを生成するインターフェースである。 IterableだからといってIteratorとは限らず、IteratorだからといってIterableとは限らない。しかし実際には多くのIteratorはIterableのインターフェースも実装している。 Iterableとコレクションは相互変換可能である。 Iterableは for-of ループで処理できる。 IteratorとG
React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた
Reactのhooks、すごいですよね。関数コンポーネントの自由度があがって色々実現できそうです。 私はReactについては2年ぐらい知識止まってるので、かなり衝撃的でした。ContextとかSuspenseとかいろいろ増えてて今更追いつくのは難しいけど、hooksはちょっと使ってみたいなーと感じました。 そんなhooksですが、使い方はそこそこわかるけど動作原理がさっぱりわからなかったので、ちょっと調べてみました。 そもそもHooksってなに hooksは関数コンポーネントからReactのいろいろな機能をフックでき、自分で汚く実装するんじゃなくてReactが面倒見てくれるよーってやつです。useStateで状態を持たせることができ、useEffectでcomponentDidMountみたいなことを実現、あとほかにもuseXXX系がいろいろ、という感じです。 useStateを例に見てみ
2020年のウェブフロントエンドエンジニアが学び実践すべきこと｜erukiti
先日、ウェブフロントエンドについて理解するためのただ一つの方法を記事にしました。それは「古い知識に頼るな。公式を読め」でした。たった一つの方法です。これをできない人は必ず行き詰まります。公式をひたすら読み込むことができる人は、たぶん大丈夫でしょう。 今回の記事は、その先にあるものです。 モダンフロントエンドの重要性ここでは少し前回の記事のおさらいをしておきます。 2020年のソフトウェアエンジニアリングの世界ではウェブ技術の重要度は増すばかりです。もちろんウェブ技術というのは広い分野です。ウェブ（HTTP/HTML/JS/CSSその他）によるサーバー・クライアント型のソフトウェアは、莫大な市場を背景にどんどか技術が投入されています。 ウェブ技術の中でも、ここ数年はフロントエンド技術の比重がとても大きくなりました。前回の記事にも書いた通り、少なくとも50%以上の影響力を持っています。 ソフト
Flow | A static type checker for JavaScript
Code Faster. Tired of having to run your code to find bugs? Flow identifies problems as you code. Stop wasting your time guessing and checking. Code Smarter. It's hard to build smart tools for dynamic languages like JavaScript. Flow understands your code and makes its knowledge available, enabling other smart tools to be built on top of Flow. Code Confidently. Making major changes to large codebas
JSで CodePoint 数えたい
ここで一句 JSで文字列を16bit単位ではなくUnicode Code Point単位で数える方法はいくつかあるが、結局2017年5月時点で(IE11のようなブラウザも含めて)ほとんどの環境で動作する方法はどれなんだろう。調べたのでまとめておきます、ご指摘あればどしどし(ง ‘-’ )ง 参考 JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io Unicode のサロゲートペアとは何か - ひだまりソケットは壊れない JavaScriptでのサロゲートペア文字列のメモ - Qiita ECMAScript 6 compatibility table Unicode コードポイント Unicode では全ての文字にID(コードポイント)(0 ~ 0x10FFFF)をふっている。 コードポイントを表す時は U+{16進数} と書く。 UTF-16 では
6日目：TypeScript の型システムについて | 立命館コンピュータクラブ
はじめまして、Kodai (Twitter @0918nobita) です。 普段は Web フロントエンドや言語処理系 (レキサ, パーサ, 型検査器) の開発について独学で勉強したり、そこで学んだことを活かして作品を制作したりしています。 型システム と TypeScript Web フロントエンドとは、要はブラウザ上で動作するアプリの開発を指しているので、必然的に JavaScript というプログラミング言語を扱うことになります。 …ただ、直に JavaScript を記述するのはいろいろな問題があります。 ブラウザ間の互換性の問題は今回は触れないとして、JavaScript という言語自体の問題を考えると、「型システム」の恩恵を受けられないことが挙げられます。 型システムとは、「プログラムの各部分を、それが計算する値の種類に沿って分類することによって、プログラムの振る舞いを保証す
テストフレームワーク mocha - hokaccha memo
JavaScript Advent Calendar 2011 (Node.js/WebSocketsコース)3日目のhokacchaです。Node.jsのテストフレームワーク、mochaについて書きます。 mochaはTJが新しく作り始めているテストフレームワークです。ドキュメントを見ればできることは大体書いてありますので、ドキュメントを元にどういうことができるのかを解説していきます。現時点でのバージョンは0.2.0です。 http://visionmedia.github.com/mocha/ shouldについて まずmochaでどういうことができるかの前にshouldについて解説しておきます。mochaのドキュメントには特に説明もなくshouldが使われていて、shouldでどういうことができるかわかってないと、ドキュメントを読んだときにmochaの機能なのかshouldの機能なの
setAttribute
name 値を設定する属性名を指定する文字列です。HTML 文書内の HTML 要素で setAttribute() を呼び出すと、属性名は自動的にすべて小文字に変換されます。 value 属性に割り当てる値を含む文字列です。文字列以外の値が指定された場合は、自動的に文字列に変換されます。 論理属性は要素に存在すれば true とみなされます。value には、空文字列または属性名を、前後にホワイトスペースを置かずに指定してください。実践的ななデモは以下の例を参照してください。 指定された value は文字列に変換されるため、null を指定しても必ずしも期待通りになるとは限りません。属性を削除したり、その値を null に設定する代わりに、属性の値を文字列 "null" に設定します。属性を削除したい場合は、removeAttribute()を呼び出してください。
Introduction | このリポジトリについて
このリポジトリについて JavaScriptステップアップ勉強会で利用するサンプルコードと説明の時に利用してる資料一式になります License The MIT License (MIT) Copyright (c) 2016 Hiroshi Oyamada Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish,
JSON.stringifyを改めて調べる。 - Qiita
var obj = { a: 1, b: "Moji", c: [1, 2, 3, 4], d: { "A": 1, "B": 2 } }; console.log(JSON.stringify(obj)); console.log(JSON.stringify(obj,undefined,1)); {"a":1,"b":"Moji","c":[1,2,3,4],"d":{"A":1,"B":2}} { "a": 1, "b": "Moji", "c": [ 1, 2, 3, 4 ], "d": { "A": 1, "B": 2 } } でも、(obj,undefined,1)ってなんだろ？ 何の気なしにundefinedって指定してたんですが、これってホントはなんなんでしょ？ 仕様を調べてみます。 mozillaのサイトを見てみると... https://developer.mozill
ユニットテストって何?って人向けのmochaとchaiの使い方 - Qiita
自動テストって意識高そうで恰好良いですよね! 普段ブラウザ用のJavaScriptしか書かない人なのですが、テストについて調べても、難しい話から始まる記事ばかりで「アサーションって何?」とか「何で通常のファイルとは別のjsが必要なの?」みたいな気持でした。この記事では簡単な前提条件から、mocha/chaiの使い方の概要が分かる部分までを説明したいと思います。 そもそもテストとは何? ソフトウェア開発におけるテストとは、ソフトウェアの振舞いが想定した通りであるかを検証することです。ソフトウェアのサブルーチンを取り出してテストする「単体テスト／ユニットテスト」と、ソフトウェア全体の挙動をテストする「結合テスト」があります。mocha・chaiはこのうちの「単体テスト」を対象としたツールです。 じゃあ単体テストって何をすることなの? 単体テストとは、ある特定の関数を対象に、入力値と出力値が仕様
Highlights from the TensorFlow Developer Summit, 2018
https://blog.tensorflow.org/2018/03/highlights-from-tensorflow-developer-summit-2018.html https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitqaFjISllEzFNoO7VVhHI_z7EYFMmhXtLKYLVW1OE_7NSGqE9fwvGebGK45wsRR92nqPUJKTxQ5yu9tZS2J3JAW7Kka-oIWi09NCGaegqDTQBgX0YRzTSBFi4-X-UBG8lsqLqOJ6pS4Y/s1600/tfdevsummit.png March 30, 2018 — Posted by Sandeep Gupta, Product Manager for TensorFlow, on behalf of
WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！
WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、東京理科大学4年の石井翔さんです。 石井さんのセッション「WebGLの今とこれから ~今のWeb開発で使うからこそ知っておきたい周辺技術~」に関するスライド資料は、こちらで公開されています。 スライド資料 （注: 重いのとモバイルから見えないのはご容赦ください by 石井翔さん） 白石: 本日は取材をお受けいた
Promiseについて0から勉強してみた - Qiita
ES6を使う機会がありそうで、Promiseについて全然知らなかったので、実際に書きながら勉強してみたときのメモ。 なお、以下を参考にさせて頂きました。 0から勉強する時でもとても分かりやすかったです。 JavaScript Promiseの本 環境 Node.js v4.2.2 Promiseとは 非同期処理を操作できる 非同期処理の成功時(resolve)、失敗時(reject)の処理を明示的に書くことが出来る 非同期処理を平行・直列に実行させることが出来る とりあえずやってみる とりあえず、参考にさせて頂いたサイトのコードを書いてみました。 function asyncFunction() { // Promiseオブジェクトを返却する.処理成功時にはresolveが呼ばれる return new Promise(function (resolve, reject) { setTim
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://tugawa.github.io/files/jssst-ss-2021.pdf
beforeEachとspyOnについて | このリポジトリについて