JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020(ES2020)は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining(オプショナルチェーンやオプショナルチェーニングと呼ばれています)とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
Send feedback V8 Runtime Overview Stay organized with collections Save and categorize content based on your preferences. In Apps Script and JavaScript, a runtime or runtime environment contains the JavaScript engine that parses and executes script code. The runtime provides rules for how memory is accessed, how the program can interact with the computer's operating system, and what program syntax
Hi everyone! After exactly 365 days of very intensive development, I'm extremely happy to unveil the first stable release of Yarn 2. In this post I will explain what this release will mean for our community. Buckle up! If you're interested to know more about what will happen to Yarn 1, keep reading as we detail our plans later down this post: Future Plans. If you just want to start right now with
My previous post included this paragraph: let vs const vs var: Usually you want let. If you want to forbid assignment to this variable, you can use const. (Some codebases and coworkers are pedantic and force you to use const when there is only one assignment.) This turned out to be very controversial, sparking conversations on Twitter and Reddit. It seems that the majority view (or at least, the m
最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。メモを置いておく。 https://nextjs.org/docs/routing/introduction#dynamic-route-segments pages/post/[…all] → /post/* (/post/2020/id/title) こんなことできるのか!ただ全部吸い込まれるのは使いづらそう https://nextjs.org/docs/routing/shallow-routing router.pushにshallowオプションを加えると、getInitialPropsを実行しないレンダリングができる。ページ内でクエリやハッシュフラグメントを変えるなどで便利に使えそう import { useEffect } from 'react' imp
結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLとJavaScript(TypeScript)を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS(Angular系の1.x系)の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳 | Note: This post is mainly based on the V8 eng
プラコレアドベントカレンダーもラストスパート!こんにちは、森です! 仕組みをちゃんと理解するには実装してみることが一番!ということで、N-gramの中でも一番実装が簡単なuni-gramをjsで実装してみました! 目次 全文検索とは uni-gram インデックスの作成 文章にdocument IDを振る 文字列の分割 文字位置付与 トークンごとに位置情報をまとめる トークンをキーに引けるように保存 インデックスから検索 検索文字列をトークンに分割 インデックスからトークンのデータを取得 取得したデータをつなぎ合わせる 実装 動かし方 インデックスの作成 インデックスから文字列を検索 コード 参考文献 最後に 全文検索とは まず最初に全文検索とはなにかってことですが、Wikipediaで調べてみました「コンピュータにおいて、複数の文書(ファイル)から特定の文字列を検索すること。「ファイル名
Series: AST JavaScriptAST Understand the grammar Implementing the parser Handling the unexpected input Unexpected token Unexpected end of string Going the extra mile Error code and standard error message A better view of what went wrong Suggestions for error recovery Summary The interview question of the week for this week on Cassidoo's weekly newsletter is, Write a function that takes in a string
2019 Javascriptエンジン俯瞰 こんにちは 2019 Javascript Advent Calendarの11日目です 2019はJSエンジンが新たに2つもリリースされた まずFacebook産のhermes もう一つがFFMPEG作者のbellardが実装したquickjs この2つを見ていこうと思う ちなみにhermesは以前にも書いたので正直あまり書くことは無い http://abcdef.gets.b6n.ch/entry/2019/07/22/142510 特徴 hermes C++ FacebookがReact Nativeの高速化用に実装したエンジン レジスタマシンのバイトコードインタプリタを搭載 flowを解釈できる commonjsを解釈して実行できる バイトコードのexportとimportも可能でスタートアップタイムを高速化することが可能 JITはx86
Michael Gooding (@Michael_G_81) is a performance Geek at Akamai, working with customers, staff and basically anyone that will listen. A premature grumpy old man, slow websites just add to the grumpiness and grey hairs. Read any performance blog or attend any performance talk and everyone will advise you that optimising images is the best place to start (insert the ever present low hanging fruit ph
JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加 JavaScriptのPromiseについて学ぶ書籍であるJavaScript Promiseの本 v2をリリースしました。 Promise本 1.0.0をリリースしたのは2014年6月ですが、そこから少しづつアップデートしていました。 JavaScript Promiseの本を書きました | Web Scratch ES6がリリースされたのでPromiseについて学びましょう | Web Scratch 今回のメジャーアップデートとなる2.0.0では、サンプルコードのコードベースをES2015前提のものへと変更しています。 1.x系からの主な変更点としては次のものがあります。 ES6をES2015に表記を変更 コードベースをES5からES2015+(ES2015以降ベース
経緯や理由はわかりませんが、日本のビデオゲームとポーカーミニゲームは切っても切り離せない関係にあります。RPGのカジノコーナーに行けば、多くの場合はポーカーと出会うことができるでしょう。 さてそんなポーカーですが、自分で作ってみたくなったことはありませんか?今回は、JavaScriptを使って、簡単なポーカーを作ってみましょう。 ビデオゲームポーカー 日本におけるポーカーは、一般的に古典的で素朴なポーカーが採用されることがほとんどです。テキサス・ホールデムも有名ですが、特にビデオゲーム内のミニゲームにおいては、多くの場合、最もシンプルなものが採用され、対戦相手はおらず、1人で役を作って遊ぶものに仕上がっています。 ルールとしては、プレイヤーにカードが5枚配られ、プレイヤーは保持したいカードを複数選びます。1度きりの交換後、手札の役を見て、強い役ほど報酬が多くもらえる、という作りになっていま
こんにちは。開発者ツールネタです。 ChromeでもFirefoxでもSafariでも使える便利な関数が色々あります。 その中の1つcopy関数について紹介したいと思います。 copy関数とは? クリップボードに渡した文字列をコピーする関数です。 開発者ツールを起動し、コンソールタブを開く。 と実行した後にペーストしてみてください。xxxがコピーされてると思います。 一点注意なのが、 このcopy関数は開発者ツール以外では使用できない特殊な関数 です。 なので.jsファイルとかにcopyと記述しても「そんな関数無いよ」と言われてしまいます。 便利な使い方 jsでごにょった値をコピーして使う、と言ってしまえばそれまでなんですが、 具体的にどんなケースに使えるんだろうという具体例を考えてみます。 他のブラウザではわかりませんが、少なくともChromeではES6のメソッド群が色々使えるので、それ
Manage the Cost of Javascript - by Paipo Tang (Front-end engineer @ Mercari) Tech talk given on the Mercari Global Engineers Meetup on Jan 25, 2019.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く