You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Intro ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。 これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。 提案されている構文や、挙動について解説する。 Class Field Declaration まず前提として、現状の Class の フィールドはコンストラクタで定義する必要がある。 例えば count フィールドを持つ Counter クラスを定義した場合、以下のようになる。 class Counter { constructor() { this.count = 0 } increment() { this.count ++ } display() { console.log(this.count) } } const c = new Counter() c.in
『我が名は神龍……どんなテストもひとつだけ自動化してやろう』 じゃ、じゃあ!このブラウザテストを自動化してください! Chromeで https://kids.yahoo.co.jp/ にアクセスして 検索ワードに ねこ と入力して さがすをクリックして 検索結果にネコ - Wikipedia が含まれていることを確認して 検索結果に 買い方 を追加して さがすをクリックして 探しているのは「猫の飼い方」?と表示されることを確認して クリックすると猫の飼い方で再検索されて 検索ボックスを不倫で上書きして さがすをクリックして このページは表示できませんと出ていることを確認 『よかろう……たやすい願いだ』 まずはライブラリのインストールと初期設定をしてやろう…… # [ライブラリのインストール] # CodeceptJSとPuppeteerをインストールします。nodeとnpmが必要ですので
2019年3月4日、兵庫県警察はインターネット掲示板に不正プログラムのURLを書き込んだとして未成年者を含む3名を不正指令電磁的記録供用未遂の疑いで児童相談所への通告や書類送検を行う方針と報じられました。ここでは関連する情報をまとめます。 不正プログラムはfor文無限ループか NHK報道から、張り付けられたURLで動作する「不正プログラム」はfor文無限ループとみられる。*1 JavaScriptを見る限り、特殊な実装や脆弱性を用いたものではなく、for文の条件式などを記述せずに無限ループさせたもの。顔文字やメッセージはalertダイアログを使って表示させている。 当該URLを開いたタブを閉じるなどの操作が必要な場合もあるが、最新のブラウザ(Chrome、Firefoxなど)では開いただけで落ちることはない。 URL投稿で摘発された3人 次の3人が問題となったURLを書き込んだとして児童相
フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします(yarn global add codecrumbs)。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか? 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。(絶対に違う) 仮想スクロールの仕組み イカれたメンバーを紹介するぜ! 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ! ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数(あるいは
The type signature notation used in this document is described below:1 :: "is a member of". e :: t can be read as: "the expression e is a member of type t". true :: Boolean - "true is a member of type Boolean". 42 :: Integer, Number - "42 is a member of the Integer and Number types". New types can be created via type constructors. Type constructors can take zero or more type arguments. Array is a
"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 SSRをすることはSEOのためだと思われがちですが、個人的にはSEOのためにしているわけではなく、 First View を向上するため(特に First Meaningful Paint を向上するため)にやっています。 First View SEOとSSRに関しては Google が最近出したこの記事の SEO Considerations 節が詳しいです。ここでは説明しません。 SSRをしない、Client S
2019/05/28 追記: Wake Lock APIの仕様が大幅に変更されたので、この記事は役に立たなくなりました。改稿をお待ちください。 近頃、PWAに代表されるような、ブラウザアプリのモバイル端末への進出が進んでいることは皆さんご存知かと思います。とはいえ、ネイティブアプリに比べると、ブラウザ上で動くJavaScriptにできることは限られています。現在、それを補うために、JavaScriptから使用することができる様々なAPIが次々と策定されています。この記事で紹介するWake Lock APIもその1つです。 Wake Lockという言葉は、ネイティブアプリ開発をしている方なら知っている言葉かもしれません。これは、要するにほっといても画面が勝手に消えない機能です。 スマートフォンのような端末は、一定時間触らないでいると画面が消えてアプリ等の動作も止まるのが普通です。しかし例えば
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓(スマートフォンで開いてください) https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
皆さんこんにちは。今回の記事ではJavaScriptの等値比較について見ていこうと思います。 「どうせ==と===の違いとかだろ? 今さらそんな記事書くなよバーカw」と思った人はぜひ期待せずに読み進めてみてください。 「じゃあObject.isでしょ? 知ってる知ってる、使ったことないけど」と思った人はまあ読まなくても大丈夫です。 さて、等値比較というのは、2つの値が等しいかどうか判定することです。JavaScriptにおいて等値比較はどのように行うのか、そしてどのような場面で等値比較が発生するのかをこの記事では余すことなく紹介します。 以降、この記事で仕様書という場合はECMAScript® 2018 Language Specificationを指すものとします。 ==と=== とはいえ、まずは==と===の話をしないことには始まりません。==はJavaScript初心者がとりあえず習
ポエムです。 自分の今の立場としては「Elm の人」ということになってるんだけど、どういう変遷でここまできて今どういうスタンスなのかっていうのはあんまり話す機会がない。だから整理のために考えてることを書いていくよ、というのがこの記事の趣旨。 非 Web の立場から そもそも自分は「Web 系」の出身ではない。新卒入社したワークスでは ERP パッケージを提供するのに画面を Web 技術で作ってるというだけで、別に SEO の順位を競ったり広告をどうという話ではないし、瞬時に画面が表示されないと離脱率が〜という話でもない。ただ、画面はとにかく複雑で設定項目とががうじゃうじゃある。 あと、学生時代に PC に触れたのが Windows で「黒画面なにそれ美味しいの?」くらいに GUI に染まりきってたというのがある。工学系の研究を効率化するために C# で GUI を作ってたら、なんかソフトウ
Intro 脆弱性の原因となる DOM 操作の代表例として elem.innerHTML や location.href などが既に知られている。 こうした操作対象(sink) に対して、文字列ベースの代入処理を行う際に、一律して検証をかけることができれば、脆弱性の発見や防止に役立つだろう。 そこで処理前の文字列に対し、処理後の文字列を安全であるとして明示的に型付ける TrustedTypes という提案がされている。 まだ未解決の部分が多い提案だが、現時点での仕様と実装を元に、このアイデアについて解説する。 WICG/trusted-types Intent to Experiment: Trusted Types Sink XSS などの原因となる DOM 操作として、DOM に直接文字列を展開する処理がある。 element.innerHTML location.href scrip
2019年1月16日でJSer.infoが8周年を迎えました。 8周年以外では、今年度はJSer.info 400回記念イベントを行ないました。 最近のJavaScriptは変化が早いとも、変化はあまりしてないとも言われます。 MSEdgeがChromiumベースへ移行することを発表したり、webpackに求められる役割が変化しています。 一方、ここ数年で主要となるフロントエンドフレームワークはあまり変化していません。 その分Create React App、Vue CLI、Angular CLIなどのCLIや関連エコシステムが集中することで充実しています。 エコシステムが充実することで出来ることのベースラインは上がっていきます。 一方で多くのエコシステムは何かしらの技術をうまく隠蔽するため、基礎的な部分を知らなくても動かすことができるようになり、それには良い点も悪い点もあります。 (特に
開発効率のために型チェックを望む JavaScript が動的型言語なので、静的型言語にしてしまえば開発効率があがる、というアイデアがあって、それは確かなことかとも思います。プログラムを書いていて、ある変数の型がよくわからなければ正確な処理を行わせるのって、難しいですよね。 確かに開発効率、あがると思います。 実際に自分も開発効率をあげています。しかし、型チェックは行っていますが、TypeScript や Flow とかは使っていません。 TypeScript や Flow が人気を得てきていますが、そこで行う型チェックは、素のJavaScriptにやらせてしまうこともできるので、導入前に検討してみるのもよいかもしれません。 チーム開発の場合には、型チェックを自前で行わないエンジニアにも型チェックを行ってもらうという意味で、TypeScript 等を導入する価値はたしかに大きくあると思いま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く