先日、異なる2つの型システム「公称型」と「構造的部分型」という投稿をして、TypeScriptの型システムは、JavaやPHPと全然違うという話をしました。 TypeScriptは「構造的部分型」と言って、オブジェクトの構造が同じなら互換したものとしてみなされるので、意味的に全く関係ないオブジェクト同士を入れ替えて扱うこともできるわけです。 例えば、たまたま同じnameプロパティを持っているBook型とPerson型があったとき、
公称型をTypeScriptで実現するための基礎 - Qiita
先日、異なる2つの型システム「公称型」と「構造的部分型」という投稿をして、TypeScriptの型システムは、JavaやPHPと全然違うという話をしました。 TypeScriptは「構造的部分型」と言って、オブジェクトの構造が同じなら互換したものとしてみなされるので、意味的に全く関係ないオブジェクト同士を入れ替えて扱うこともできるわけです。 例えば、たまたま同じnameプロパティを持っているBook型とPerson型があったとき、
React's diff algorithm
Christopher Chedeau (@vjeux) is a Facebook Software Engineer in the Photos Team. Before that, he went to EPITA, a 5-year Computer Science school and majored in its R&D lab LRDE. He also worked for Curse during the nights and week-ends. React is a JavaScript library for building user interfaces developed by Facebook. It has been designed from the ground up with performance in mind. In this article
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
Best React Open-Source Projects
Katarina Harbuzava for Flatlogic Posted on Jan 31, 2020 • Edited on Mar 29, 2021 • Originally published at flatlogic.com It is no secret that every great developer should be committed to open source projects. It is useful for personal professional development, as well as for the technology ecosystem. But how do you choose the right project for your spare time efforts? In this article, we will give
JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです（私はそう思います）が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
そろそろJavaScriptに採用されそうなOptional Chainingを今さら徹底解説 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? みなさん、Optional Chaining使ってますか？ 私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。 例によって、Optional ChainingはECMAScriptに対するプロポーザルの一つです。つまり、もうすぐ入りそうなJavaScriptの新機能です。プロポーザルはたくさんの種類がありますが、その中でもOptional Chainingはその高い有用性からこれまで多くの注目を集めてきました。Optional Chainingは2019年6月のTC3
フロントエンドエンジニア御用達の MDN web docs を網羅した
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり
Rules Reference - ESLint - Pluggable JavaScript Linter
Selecting a version will take you to the chosen version of the ESLint docs.
すべての新米フロントエンドエンジニアに読んでほしい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技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
パフォーマンスJavaScriptHTMLフロントエンドcssdomcssom こんにちは、羽山です。 今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか？ 昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100～300msほどで生成してブラウザに転送できたとしても、ページ表示が完全に完了するのに4～5秒かかるということも珍しくありません。 「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」と諦めないでください。ブラウザがどのようにHTMLを解釈して、CS
![フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e392d4350342045b699dea4e2a6421740d16647/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2018%2F04%2Fphoto_47592_20151013_min.jpg)
2019年版: JavaScriptのループの考察 - Qiita
JavaScript いつの間にかずいぶん違う言語になったなぁ、と思うけど、 for(let i = 0; i < 100; i++) { /.../ } これはまだこう書くしかないのかな？const使えない？ — Takuo Kihira (@tkihira) June 6, 2019 このツイートを起点に、パフォーマンスの話が出て、紀平さんも計測されていたんですが自分でも思うところがあって計測して考察してみました。 実測前の僕の予想（というか過去の経験）は 普通のforが最速 for-inは速度以前に使ってはいけない for-ofとforEachは関数呼び出しがループごとに挟まるのでどちらも遅いが同じ水準 for ofは言語標準なので最適化が行われる期待！ でした。さて、結果はいかに？ それぞれのループの解説 伝統的なfor 伝統的なループが一番軽いというのはみんなが認めるところです。
GitHub - jquense/yup: Dead simple Object schema validation
Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformation. You are viewing docs for the v1.0.0 of yup, pre-v1 docs are available: here Killer Features: Concise yet expressive schema i
JavaScriptのES2018で追加された正規表現の新機能の検証 - Qiita
はじめに 正規表現を使ったソースの修正をしているときにexec()やmatch()の実行結果に見慣れないプロパティgroupsを見つけました。 いつの間にかJavaScriptにも名前付きグループが実装されていたようです。 そこで軽く調べてみましたら、それ以外にもES2018において色々と追加されていたようです。 何番煎じか分かりませんが、この記事では、簡単にES2018の正規表現に関する新機能の動作を検証してみたいと思います。 厳密な定義等は、ほかの記事等を見てください。 正規表現の新機能 Named Capture Groups 従来は、 (pattern) のようにpatternにマッチしたキャプチャにアクセスするには、$1などキャプチャが現れた順番に対応する数値でしかアクセスできませんでした。 ES2018以降では、 (?<name>pattern) と書くとキャプチャに名前$<n
脆弱性のあるJavaScriptライブラリの使用を防ぐには / #sec_kansai 14
総関西サイバーセキュリティＬＴ大会（第14回） ( https://sec-kansai.connpass.com/event/122914/ ) でJavaScriptライブラリの脆弱性に関する発表を行いました。
TypeScript + Reduxはもうぼちぼちサードライブラリに頼らなくてもある程度はいい感じに補完してくれる - Qiita
import { createStore, Reducer, Action, combineReducers, ActionCreatorsMapObject, ReducersMapObject, ActionCreator } from "redux" //// State全体の定義 export type AppState = { counter: number } //// ActionとActionCreatorの定義 // type CounterAction = Action<"INCREMENT" | "DECREMENT"> でも可 type CounterActionType = "INCREMENT" | "DECREMENT" type CounterAction = Action<CounterActionType> // これだけだるいが利用側のために二重定義し
オリジン間リソース共有 (CORS) - HTTP | MDN
HTTPガイドHTTP の概要HTTP の進化典型的な HTTP セッションHTTP メッセージMIME タイプ（IANA メディア種別）よくある MIME タイプHTTP の圧縮HTTP キャッシュHTTP 認証HTTP Cookie の使用HTTP のリダイレクトHTTP 条件付きリクエストHTTP 範囲リクエストHTTP クライアントヒントCompression Dictionary Transport Experimental Network Error Logging Experimental コンテンツネゴシエーション既定の Accept 値の一覧ユーザーエージェント文字列を用いたブラウザーの判定HTTP/1.x のコネクション管理プロトコルのアップグレードの仕組みプロキシーサーバーとトンネリングプロキシー自動設定ファイルHTTP セキュリティHTTP Observatory実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - goldbergyoni/javascript-testing-best-practices: 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron
React製のSPAのパフォーマンスチューニング実例
rollup.js
