AMP/PWA をどこで/いつ使うか - Qiita
某所で使った資料の公開版 用語整理 PWA: ネイティブアプリのようなUXを提供するための機能群 SPA: JSで遷移するシングルページアプリケーション AMP: 後述 PWAMP: AMPで流入させてPWAを起動する形式 MFI: モバイルファーストインデックス いまさら聞けないPWAとAMP アメブロ2017: Isomorphic Web Appの進化編 AMP とは イニシャルビューのためのHTMLの特殊なサブセット GoogleにホワイトリストされたHTML属性しか使えない GoogleにホワイトリストされたJSプラグインしか使えない CSSはHEADに全部書く AMP仕様を満たすと、Googleがキャッシュして、モバイルの検索流入ではそのキャッシュを使う HTTPS必須 必ずしも全ページをAMPに対応する必要はない PWA: ServiceWorker の機能 リソースの先読み
async await に書き換えて、Promiseと 同期による例外の区別でハマった - Qiita
// async function の中 try { load().then(data => { console.log(data) }).catch(e => { // ... }) } catch (e) { // ... 例外処理 } わかりやすく簡単にしている。実際にはもっと複雑なコードだった。Promise にすれば try と catch を一本化して綺麗にできるやん！と思っていた。最初は。 書き換えた // async function の中 try { const data = await load() console.log(data) } catch (e) { // ... 例外処理 } catch が一個減ってリファクタできたーと思っていた。確かに異なる例外処理のブロックが減ってしまっていたが、どうせ何かしらのデッドコードだろと思って消してしまった。 注: 意味的に
facebook の Reason という言語を調べていた - Qiita
また facebook 製の名前空間を考慮しないシリーズが増えていた。半年ぐらい前から存在は知られていたリポジトリだけど、最近ドキュメントが新しく、わかりやすくなっていた。https://facebook.github.io/reason/ Approachable syntax. Powerful, automatic source code formatting. Adopt incrementally with JavaScript/C interop. Ahead-of-time compilation to assembly - without a language level VM. Rapidly develop and share projects. Why OCaml?OCaml is a great tool for writing highly expressive,
フロントエンドエンジニア(mizchi)が暇な時にやること - Qiita
暇というか日常的にやってること https://news.ycombinator.com/ と http://www.echojs.com/ と http://b.hatena.ne.jp/efcl/ をフィードリーダーに突っ込んでいて、面白そうなのをメモっておく 暇なとき 日頃メモってたライブラリの試し切りをする 面白かったら紹介記事を書く 多少やる気リソースが多めだと新しい言語(最近はRustかElixir)の勉強を進める http://codepen.io/ で面白い動きするやつのコードを探してコード読む とくにCodePenがオススメで、割とゲラゲラ笑いながら読めるやつが多いので楽しい。CodePenのテクニックはそのまま自分の業務に持ち込むと悪目立ちするので控えているが、Webでもこういう演出ができる、と頭の片隅にいれておくことで、いずれ何かに役立ったりする。たとえば昨日読んだ奴
春からはじめるモダンJavaScript / ES2015 - Qiita
春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ
テストがないJS環境にモダンなテスト環境を導入していく - Qiita
Qiita:Teamに投げた社内ドキュメントだったけど、特に問題ないのでQiitaにも投げる。 前提として browserify-rails とbabelify が導入されている状況を想定してる。 基本方針 新規コードはES2015で書く 本番はbrowserify(-rails)でコンパイルする。 単体テストは node 環境下で走らせる テスト環境下では jsdom で window, document をモックする 単体テストでは ブラウザ特有の挙動はテストしない 裏側の環境(browserifyやspec-helper)は難しくして良いが、利用者からみえる範囲は複雑にしない(npm install; npm testで走る) Universal JavaScript に寄せることでコードのポータビリティを上げる 事前準備 browserify-railsを導入する。 .babelr
今一番JSで熱いゲームエンジン、RPGツクールMVのランタイムコードを読んでみた - Qiita
一昔前にCanvasが実用段階になった頃、JSのゲームエンジンが大量に出てきたことがありました。それらは大抵DOM/CanvasのFallbackを持っていたのですが、今現在の状況は、実際には非効率なメモリ消費やモバイルのブラウザのフラグメント化で実用に足るものがなかった、という辛い現状があります。 そんな中pixi.jsという描画ライブラリが台頭してきました。このエンジンは webglとcanvasの fallbackを持ち、(いくらかのバグはありつつも)DOMを切ったことで現実的なパフォーマンスの課題をクリアできるのでは？という期待感が高まっています。 Pixi.js - 2D webGL renderer with canvas fallback http://www.pixijs.com/ そして 2015年、RPGツクールMVが発表され、ブラウザ吐き出し対応がアナウンスされました
Babelのasync/await試してみた(+中の処理をちょっと追ってみた) - Qiita
npm install babel -g experimentalオプション必須なので コンパイルは babel -e foo.es6 > foo.js みたいな感じ 適当に試してみた。 import "babel/polyfill"; let wait = function(n: number){ return new Promise(done => setTimeout(() => done(n), n)); }; let main = async function(){ await wait(50); console.log('await done'); } // async promise nomally wait(100).then(() => console.log('promise normaly done')); // await main(); 最初awaitブロックがa
リアルタイムウェブな観点からElixir / Phoenix について - Qiita
ここ最近、 [翻訳] Elixir - 次に来る大物Web言語 - Qiita とか 超高速なJSON APIをElixirフレームワークのPhoenixでビルドしてテストしよう | POSTD を読んで気になっていたので、勉強していた。 前提: 自分はシングルページアプリケーションに特化したフロントエンドエンジニアであり、サーバサイドのプロダクション運用にはそこまで強くない。あとこれはここ2日の勉強した日記でもあり誤解や勘違いも多々あると思う。 リアルタイムウェブアプリケーションのためのサーバー Railsの次の時代、リアルタイムウェブの為のウェブフレームワークがあるとしたら、次のような特長をもつと思う。 HTTP, HTTP/2. WebSocket等のプロトコル対応と抽象化 JSON APIに特化 認証系 キャッシュ管理 Viewに関心がない リアルタイムウェブは、その言葉をどう定義
Immutable.jsでJSでも不変データ構造を扱う - Qiita
ClojureやHaskellのような不変データ構造体のJS実装です。facebook製。 不変データ構造の特徴として、元のデータ構造は不変です。 Immutable = require 'immutable' map1 = Immutable.Map a: 1, b: 2 # => Map {a: 1, b: 2} map2 = map1.set a: 3 #=> Map {a: 3, b: 2} map3 = map1.update (val) -> {foo: val.a} #=> Map {foo: 1} Mapの他に、List, OrderedMap, Set, OrederedSet, Seq, Range, Record, Stack等があります。内部的にはトライ木になっています。 面白いのはSeqやRangeで、filter関数やmap関数を与えても、getで呼ばれるまで遅
JavaScriptのモジュールシステムの歴史と現状 - Qiita
社内向け資料。自分が書いたコードを説明するために資料作る羽目になった。 昔のことはうろ覚えで雰囲気で書いてる部分もあるので、そこらへん勘弁。 古の時代(~2010) 前提としてJavaScriptは名前空間がwindowの一つしかない。 昔Prototype.jsがあった。もうみんな忘れたけどあの時期はプリミティブなオブジェクトのprototypeを生やしまくって、それが衝突しまくってprototype良くない的な雰囲気が生まれたり生まれなかったりした。 その反省があってか(歴史的に若干微妙な気がするが) jQueryは名前空間を一つに集約した。いわゆる jQueryPlugin は、jQueryのプロトタイプにヘルパを生やしまくっていた。グローバルを汚すのは駄目だけどjQueryの名前空間を汚すのはいいよね、ぐらいの考え。 jQuery非依存なライブラリは、「GoodParts」として、
TypeScript/ES6のダサいswitch文を克服する - Qiita
この記事はTypeScript Advent Calendar 2014 - Qiitaのやつです。他にネタがないんで未来に向けて投げます。 switch break… coffeeやrubyやscalaをやってると、なんでjavascript/typescriptはswitchとifが式じゃなくて文なんだ！！！ちくしょう！！！という気分になりますよね。 というわけでtypescript/es6用にscalaのmatch式っぽいのを自作しました。ご査収ください。 マッチャーの仕様 === の比較 bool値を返す関数 クラス こう書けます。 class A {} var ret = match(new A(), 'foo' , ()=> 'this is foo', A , ()=> 'this is instance of A', (v) => v === 1, ()=> 'this i
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
facebook/flowファーストインプレッション - Qiita
前々から出すよ出すよ詐欺してたflowがやっと出た。大雑把にはfacebook製のTypeScriptだと思っていれば良いです。 まだnpmで提供されてなくて、 Flow | Getting started with Flow で実行バイナリが配られてる。 npmで提供されてない理由は、たぶんocamlで書かれてるから。Future Planにjs_of_ocamlでコンパイルされたものが提供されると書いてあった。 DLして適当なパス通った場所に置いてつかう。 TypeScriptとの比較 思想はTypeScriptと同じなので、大枠は一緒だといってよい。 ぱっと見気になったのは、Nullableの書式が違うのとかあるけど、もっと大きな違いもたくさんある。 FlowとTypeScriptにあるもの declareキーワードによるアノテーション ES6 classes Generics ここ
AltJSの選び方フローチャート - Qiita
JavaScriptわかる - YES 型がほしい - YES Flash/ActionScript3が青春だった - YES Haxe - NO DeNAに勤めている - YES JSX - NO TypeScript - NO Ruby or Python が好き - YES coffee-script - NO クラスはほしい - YES EcmaScript6(Traceur Compiler) or CoffeeScript - NO JavaScriptの文法に不満がある - YES https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS - NO JavaScript書けよ - NO 関数型わかる - YES 自分の好きな言語に深く精通している - YES 好きな言
JS非同期脳だってclojure-script/core.asyncを理解したい - Qiita
最近、ClojureScriptに手を出してる。coffeeは手に馴染みすぎて飽きたし、TypeScriptはただのJS+ただの静的型付けで驚きがなくて刺激が足りない。 clojure-scriptが凄いのは、clojureプロジェクトとして開発されているということだ。clojureのコードが基本的にはそのまま動く。厳密にはまったく同じではないのだが、clojureサブセットだと思えば問題ない。 JVMが実装してあるわけではないので、clojure-scriptコンパイラはclojure-script -> javascriptの変換をしているわけだ。 僕は仕事で一番最初に使ったサーバー言語は実はclojureで、それなりに思い入れがあるのだが、とはいえちょっとの期間だったし、Lispに造詣が深いとも言えない。なので、勉強しながら使っている。 で、やってみたら色々問題があって、core.a
明日から使えるasm.js - Low Level JavaScript - 「LLJS」 マイナー言語アドベントカレンダー・一日目 - Qiita
明日から使えるasm.js - Low Level JavaScript - 「LLJS」 マイナー言語アドベントカレンダー・一日目JavaScript この記事は、マイナー言語 Advent Calendar 2013 - Qiita [キータ] の1日目です。 今日は、当初 Terraを予定していたのですが、昨日時点の最新版がLLVM3.3でビルドできなかったので面倒くさくなって、趣味と実益を兼ねて Low Level JavaScript, LLJSの話をしたいと思います。 LLJSとは JavaScriptにコンパイルされるAltjsの一種ですが、ただのJSトランスレータとは一線を画します。名前の通りローレベルの操作を行えます。 LLJS : Low-Level JavaScript 何を持ってローレベルなのか？というのは公式ページから引っ張ってきた次のサンプルコードを見たほうが早
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Github pages に 特定のディレクトリだけデプロイする - Qiita