Temporalについてまとめています。 Meguro.es #19のLTでトークした際のスライドです。

先日、Facebookは 膨大なプルリクエスト をReactにマージして、既存のビルドシステムを Rollup ベースのシステムに移行しました。 その結果 、 何人もの人々 から「なぜwebpackではなくRollupを選んだのか」という質問が寄せられました。 これは、もっともな疑問でしょう。 webpack は、近年JavaScriptコミュニティで最も評価されているツールの1つです。毎月のダウンロード数は何百万件にもおよび、何万個ものウェブサイトやアプリケーションに使用されています。巨大なエコシステムがあり、コントリビュータも多くいます。さらにオープンソースプロジェクトとしては珍しく、 かなりの寄付金 が集まっています。 それに比べるとRollupは小規模です。しかしReact以外にも、Vue、Ember、Preact、D3、Three.js、Momentなど、数々の有名なライブラリに

Intro 脆弱性の原因となる DOM 操作の代表例として elem.innerHTML や location.href などが既に知られている。 こうした操作対象(sink) に対して、文字列ベースの代入処理を行う際に、一律して検証をかけることができれば、脆弱性の発見や防止に役立つだろう。 そこで処理前の文字列に対し、処理後の文字列を安全であるとして明示的に型付ける TrustedTypes という提案がされている。 まだ未解決の部分が多い提案だが、現時点での仕様と実装を元に、このアイデアについて解説する。 WICG/trusted-types Intent to Experiment: Trusted Types Sink XSS などの原因となる DOM 操作として、 DOM に直接文字列を展開する処理がある。 element.innerHTML location.href scri

この記事は、社内向けに書いた資料を公開の許可を得て加筆修正したものです。 記事中の具体例やサンプルコードはJavaScript/TypeScriptで書かれていますが、内容自体は言語にかかわらず使えます。 同僚の @shisama にも手伝っていただきました。 はじめに 命名について 条件式について 関数について 変数・定数について コメントについて 2020/11/02 ついに完結！ はじめに 読みやすいコードは、コメントがなくても文章を読むように理解できます。 逆に、読みにくいコードはコメントがあってもさっぱり意味がわかりません。 文章を読むように理解できるコードを書くために普段気をつけていることや、コードレビューの際に重点的に見ているところをまとめました。 普段から読みやすいコードを心がけている方にとっては何も目新しい物はなく、当たり前に意識しているであろうことばかりです。 特にプロ

kyotojs.connpass.com 表題のとおり、Kyoto.js 15で登壇してきました。 speakerdeck.com off-the-main-threadについては昨年のNode学園30時限目で@kosamariさんが発表していたあたりから関心はありました。 speakerdeck.com Kyoto.jsの翌日に開催された次世代Webカンファレンスでもoff-the-main-threadに関しては何回か言及されていましたし、注目されていると思います。フロントエンドのセッションでは「2、3年後には当たり前になっているかもしれない」とも話されていました。 Frontend - 次世代Webカンファレンス #nwc_front WorkerDOMに関しては、社内のインターン生から「AMPページでスクロールしたらでこういうバナーを差し込みたいのですが・・・」って質問されて「am

2019/01/12 に #kyotojs で発表したスライドです

Kyoto.js #15( https://kyotojs.connpass.com/event/113442/ )の発表資料です。 WebWorkerの基本やWorkerDOM( https://github.com/ampproject/worker-dom )の紹介をしました。 WorkerD…

Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up

名称: obniz（おぶないず） 価格: ¥5,980（公式サイト） Wi-Fi/BLE対応 モータ直差し、過電流保護、全ピンUART対応などいろいろ優しい SDKはPython、Ruby、モバイル系にも対応しているみたいです。 obniz公式 - obnizの仕組み これまでのJavaScript Roboticsのツラミ Johnny-Five（NodeBots） PC上でNode.jsを実行し、Firmataプロトコル（PC-マイコン間通信）で通信させてArduinoを制御する方法です。 セットアップや制御はわりとサクッとやれるのですが、Firmataプロトコル通信が必要なためスタンドアロンで実行できないのがあまりお手軽じゃないなあと思っていました。（ちゃんとく所感） JSボード Tessel2という海外で人気のJSボードがあるのですが、技適が通っていないため日本では使えません。 ※

The HTML DOM APINavigatorInstance propertiesactiveVRDisplays Non-standard Deprecated appCodeName Deprecated appName Deprecated appVersion Deprecated bluetooth Experimental buildID Non-standard clipboardconnectioncontacts Experimental cookieEnabledcredentialsdeviceMemorydevicePosture Experimental doNotTrack Non-standard Deprecated geolocationglobalPrivacyControl Experimental gpu Experimental hardwa

はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から来るバグはほとんど無くなるでしょう。 ここではこの変数や式を極力減らせるTipsを紹介したいと思います。 1. dataを極力定義しない Vue.jsでコンポーネントを定義する際ついdata()に沢山変数を定義しちゃいますよね。

Happy Xmas, JavaScripters! クリスマスですが、QiitaにWorkerDOMに関する記事を書きました。 記事ではworker-domの使い方の解説を中心にしているためHello, Worldしているだけですが、他にもreactを動かしたりして遊んでみてるのでもう少し色々触ってみてworker-domでreact動かす記事も書きたいと思います。 qiita.com Qiitaで紹介しているコードはGistにも置いているので興味があればコピペして実行してみてください。 Hello, WorkerDOM! - create element to show 'Hello, ...

会社で「AMPページ内でこういう操作したときにこういうDOMを差し込むことってできるんですか？」って質問されて、「それworker-domがAMP使えるようになったらできそうですね」ってなったのでworker-domを触ってみました。 ※この記事でやってることはamp-bindとか既存のAMPコンポーネントでも実装可能ですが、worker-domの素振りログなのでご了承ください。 今回出てくるコードはgistに置いています。 worker-domとは GitHub - ampproject/worker-dom: The same DOM API and Frameworks you know, but in a Web Worker. AMPプロジェクトが開発しているWorker内でDOM操作をするライブラリです。現時点(2018年12月)ではalpha版です。 Workerっていうのは

会社で「AMPページ内でこういう操作したときにこういうDOMを差し込むことってできるんですか？」って質問されて、「それworker-domがAMP使えるようになったらできそうですね」ってなったのでworker-domを触ってみました。 ※この記事でやってることはamp-bindとか既存のAMPコンポーネントでも実装可能ですが、worker-domの素振りログなのでご了承ください。 今回出てくるコードはgistに置いています。 worker-domとは GitHub - ampproject/worker-dom: The same DOM API and Frameworks you know, but in a Web Worker. AMPプロジェクトが開発しているWorker内でDOM操作をするライブラリです。現時点(2018年12月)ではalpha版です。 Workerっていうのは

はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大

qiita.com この記事はNode.js Advent Calendar 2018の16日目の記事です。 また、ここ数年チャレンジしている@kjunichiのパーソナルアドベントカレンダーの16日目の記事も兼ねてます。 まえがき Node.jsとは直接関係ないが、V8をPostgreSQLで動かせるplv8にWindows対応のプルリク投げた前科がある。 github.com このプルリクは残念がらマージに至らなかったが、作者の方が、対応して現在、少し頑張れば、Windowsでも 新しいplv8がビルドできるハズ。 v8以外のエンジンのnode.jsに切り替えられるバージョン管理ツールの導入 とりあえず、macOS mojaveで試す。 node.jsではnvmがメジャーなバージョン管理ツールですが、chakracoreなnode.jsを試すには、以下のnvsが 便利です。 githu

この記事はNode.js Advent Calendar 2018の2日目の記事です。 ちょっとしたネタですが、Node.js v10.10から入ったfs.readdirのwithFileTypesオプションとfs.Direntについて紹介したいと思います。 TL;DR 特定のディレクトリ配下のファイル一覧を表示する方法を紹介 読み込んだディレクトリのファイル種別がファイルかディレクトリか判定する方法を紹介 fs.statを使った従来の方法 Node.js v10.10.0から使えるfs.readdir(またはfs.readdirSync)のwithFileTypesとfs.Direntを使った方法 fs.statを使った判定方法 例えばNode.jsを使ってディレクトリ配下のファイル一覧を表示したいとき以下のようにfs.readdirとfs.statを使って書くことができます。 cons

Discover the most popular JavaScript technologies of the year.