一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Developers Blog
宿泊事業本部の宇都宮です。 一休.com スマホサイトのホテルページパフォーマンス改善プロジェクトでは、フロントエンドには以下のような要件がありました。 デザイン面は既存を踏襲する 機能はほぼ従来通り 日付等を変更した際の再検索は、画面遷移を挟まず、画面内で行えるようにする パフォーマンスをできるだけ改善する 要するに、従来と同様の機能+αを実現し、かつ、従来と同等以上のパフォーマンスを実現する、というミッションです。 このために、どのような取り組みを行ったか、紹介します。 パフォーマンス目標値の設定 まず、パフォーマンスの目標値を設定する必要があります。モバイルでは、ユーザの帯域幅は回線や時間帯によって大きな変動があります。多少回線状況が悪くても、閲覧を妨げない程度のパフォーマンスを実現する必要があります。 一休へアクセスするユーザのモニタリングを見ると、極端に遅い回線を使っているユーザ
js-primer(JavaScript入門本)がオフラインで読めるようになりました
現在開発中のjs-primer(JavaScript入門本)がServiceWorkerを使ってオフラインでも読めるようになりました。 Service Workersに対応しているブラウザ(IE以外)なら一度開いた後はキャッシュを使ってオフラインでも読めるようになっています。 また、ただのウェブページでもあるので書籍の内容が更新されれば最新の内容に更新されます。 js-primer workboxを使ってオフライン表示に対応しました。 モバイルでもオフラインで読めるようになってます。 “JavaScriptの入門書 #jsprimer” https://t.co/gyX5MqW4r8 pic.twitter.com/CVSAV325sV — azu (@azu_re) May 19, 2018 iPhoneやAndroidなどホームにアプリとして追加もできます。 サイト: [WIP] Ja
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
PDF.js の導入方法と苦労した話
こんにちは。 島根支社の原田です。 JavaScript で PDF を表示する際にライブラリとして PDF.js が話題にあがると思います。 PDF.js は名前の通り JavaScript で実装されているライブラリです。 HTML5 の技術を使っているため、最新のブラウザであればほぼ問題無く使うことができます。 本稿では、PDF.js を利用した PDF の表示までの導入部分と、実装で苦労した話をしていきます。 下準備 最初に、プロジェクトのディレクトリを作成し、npm init します。 $ mkdir fenrir-pdfjs $ cd fenrir-pdfjs $ npm init 次に、最低限必要なパッケージをインストールします。 $ npm install --save-dev browserify $ npm install --save-dev pdfjs-dist こ
JavaScriptをめぐるパラレルワールド 〜Webデザイナーから見た今どきのフロントエンド事情〜｜dwango creators' blog（ドワンゴクリエイターズブログ）
どうも、ほそだです。ゴールデンウィークも終わり、暖かい空気を感じる季節になりました。 さてちょっと前に、こんな記事が話題になっていました。 You Don’t Need jQuery – Qiita （旧題：もうjQueryは必要ない） 元々は海外の方が書かれたものを日本語訳してくださったものですが、あらかた網羅されていて感服しました。実は今回、これと全く同じようなことをこのブログのネタにしようと考えていたのですが（jQueryでやってたことをjQueryを使わずにやってみた的な）、締切間近になってさあ書くぞってタイミングでここまで完璧なものを先に出されちゃったので、こりゃ勝てねえと泣く泣く断念したのですよね。。 それで急遽新たにネタを考えなきゃいけなくなったのですが、これに対するネット上での反応がけっこう興味深いなと思って見ていました。 「もうjQueryは必要ない」に関するみんなの反応
t_wadaさんが提案するJavaScript速習コースを実際に履修してみた - WEB SALAD
はじめに もう2ヶ月前の話なのですが、日本のTDD第一人者で、最近はpower-assert-jsの開発などJS界隈でも活躍されている@t_wadaさんが、Twitterでこんな提案をされていました。 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7— Takuto Wada (@t_wada) 2015, 8月 10 ちょうどこの頃、初めてのgemを作り終え、Ruby以外の言語に対する学習欲が高まっていたので、この提案に乗っかってみることにしました。 本エントリでは、この速習コースを実際に履修した感想と、結果どうなったのかを書きたいと思います。 履修前の状態 ずっと
JavaScript の過去と現在、ガチな JS アプリケーション設計
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
ダイナミックなJS開発環境 Bird 開発中! – Mechanic Note
おはようございます！PILOT神山ラボの山下です。今回は久々にラボらしい投稿です。 コンピューターサイエンス的に面白い開発環境を作っています。今回は、開発に至った背景を中心にお届けします。 動機 − JSは動的言語じゃないか 2015年、Webは衰えを知らず、JavaScriptは隆盛を誇り、FLUXアーキテクチャが浸透し、なのに僕らは未だエディタとブラウザを行ったり来たりしています。 のみくま2 by PILOT みなさん忘れてるかも知れないけど、JavaScriptは動的言語なんですよ！エディタでシコシコ文字並べて⌘-SなりC-x C-sなり:wなりして、ブラウザ開いて確認なんてしてたら静的言語と一緒じゃないですか。ランタイムで開発して、動的言語のポテンシャルを引き出さなきゃもったいないですよ。 ランタイムで開発するってどういうこと 要するに、生きたインタプリタにエディタが繋がっていれ
ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
Timesheet.jsVisualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customi
kuromoji.js使って構文解析した - Qiita
こんにちは、らこです。先日から話題になってるJavaScriptの形態素解析器kuromoji.jsを使って、確率自由文脈文法で構文解析してみました。(注意:アルゴリズムの解説記事 ではない です) 結論 kuromoji.js遊びまくれるのでみんな使おう kuromoji.d.ts書いた 私は型大好き人間なのでTypeScript使ってkuromoji.js使いました。型定義ファイルは自分が使う部分だけエイヤっと自作しました(laco0416/kuromoji.d.ts)。 あと、プロジェクトに↑の自作型定義ファイルを読み込むのにdtsm使いました。tsd使ってたのが馬鹿らしくなるくらい便利です。作者のvvakameさんによるわかりやすい紹介はこちら 確率自由文脈文法とは ちゃんと説明すると長くなりますしうまく説明できる自信もないので、ばっさりカットします。 雰囲気つかむにはここらへんを
Ractive.js の紹介 — KaoriYa
HTML の DOM 操作を良い感じで隠蔽してくれる Ractive.js というライブラリを紹介します。 本記事は VirtualDOM Advent Calendar 2014 の13日目の記事です。 VirtualDOM といえば React だ、と言わんばかりの流れですが、本記事では敢えて Ractive.js を取り上げます。Ractive.js が VirtualDOM かって? 確かめてみましょう。 良し、大丈夫。VirtualDOMです。 Ractive.js とは? Ractive.js は本家サイトの説明を借りれば、テンプレートドリブンなUIライブラリです。なんのこっちゃわからないでしょうね。 まずVirtualDOMのメリットとは 生のDOMを直接操作しなくても、JavaScriptのオブジェクトだけを操作すれば、上手いこと自動的に書き換えてくれる ことだと言えます。
JavaScript フレームワーク - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
小さいライブラリを採用する - mizchi's blog
僕がJavaScriptでライブラリを選定する際、迷ったら小さいものを使う。その理由について。 前提 前提として、枯れた環境で大きいフレームワークができるのは理解できるし、メリットも大きい。あるいは言語それ自身と区別できないぐらいに発達したフレームワークに依存するのも理解できる。RubyにとってのRailsとか、ErlangのOTPとか(いや、これは詳しくないけどそうなんだろうなっていう予想なんだけど)。 危険信号 今のJS界隈は動きが早すぎて、何に依存するのも危ない。とくにフレームワークと銘打たれたものは、でかすぎてどれも危険信号を放っている。 数年後、廃れてしまったフレームワークで開発し続けるのは、僕個人としてもあまり関わりたくないし、現場の離職リスクとして数字に出るだろうし、採用後の教育コストの問題になる。だいたいそういうものは元の設計者もいなくなるものだ。プロダクトの死を意味する。
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
CodeMirrorでカーソル位置が常に中央になるアドオンを書いた
azu/codemirror-typewriter-scrolling azu/codemirror-typewriter-scrolling という CodeMirrorのアドオンを書きました。 typewriter-scrolling? Typewriter Scrolling というのはタイトルのように入力行が中央になる機能の事らしいです。 FoldingTextに同じ名前の機能があります(これでこの名前を知った) FoldingText 入力位置が中央になる機能がちゃんとある。 TypeWriter Scrollingというのか http://t.co/zAjrlVzrpc — azu (@azu_re) August 16, 2014 また、JetBrains IDEにはShow virtual space at file bottomという名前で同じような機能があります。 要は
Himera Synonym
// JavaScript "hoists" variables to the top of // their scope. So the following function: function printName() { console.log('Hello, ' + name); var name = 'Bob'; } // is equivalent to this function: function printName() { var name; console.log('Hello, ' + name); name = 'Bob'; } printName(); // Hello, undefined
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - okashoi/vue-js-handson: 2017/04/24 開催の勉強会「Vue.js からはじめる JS フレームワーク（ハンズオン形式）」用の資料です
PixiJS v4
GitHub - mitsuruog/SPA-with-Backbone: Backbone.jsでsingle pageアプリケーションを作る方法
