これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.jsの特徴 Sal.jsのデモ Sal.jsの使い方 Sal.jsの特徴 vanilla JavaScript vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。 超軽量 2.26KBの超軽量スクリプト。 パフォーマンス パフォーマンスにフォーカスして設計。 実装が簡単 外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。 ライセンス MITライセンスで、個人でも商用でも利用できます。 Sal.jsのデモ デモでは、S
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方Read less
キャバ男コードレシピ
首都圏のキャバクラは地域によって色が全然違う こんにちは！ 皆さん、キャバクラって行ったことはありますか？w 俺はしょっちゅう行ってるんすけど、いや〜、これが沼で通い出したら止まらないww だからお金ができるたびに首都圏のキャバクラを回ってるんすけど、よく調べてみると、キャバクラって地域によって全然毛色が違うんですよ！ そこに通う人のニーズだったり、好みだったりがお店に反映されてんのかな？w だからキャバクラにハマる人って、初めて行った店の雰囲気とかキャバ嬢の見た目とかでどハマりする人と、そんなにハマらない人がいるんですよね。 俺はその前者wどハマりして今では抜け出せないところに来てるっすww じゃあ、首都圏、特に東京のキャバクラには地域によってどんな特徴があるのか、紹介していきたいと思います！ 新宿歌舞伎町のキャバクラの特徴と必要な予算 キャバクラって言ったらまず新宿歌舞伎町を思い浮かべ
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです（→学会論文）。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表示し
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう！～ ①環境構築＆サーバ側の実装編 ～ - Tech-Sketch
HTML5の普及によりWebアプリは急速に進化しています。しかし、Webアプリを作成する際のデファクトスタンダードは存在していないのが現状です。そこで、比較的導入実績の多いJavaScriptフレームワークである「Backbone.js」と「jQuery Mobile」を用いてネイティブに近いWebアプリを作成してみました。今回から4回に分けて上記手法を用いたWebアプリの作成方法についてご紹介します。 本連載ではサーバの実装からクライアントの実装までWebアプリを作成するために必要なことをひととおり解説します。 まず、初回である今回は環境構築とサーバ側の実装を見ていきたいと思います。 はじめに 「スマートフォンやタブレット用のWebアプリを作りたい！！...でも、なにで作ればいいのかわからない。。」 こんなこと思ったことありませんか？ 最近は、HTML5 + JavaScript +
TEST CORDING » node.js 怒濤の50サンプル!! – socket.io編
This domain may be for sale!
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
[JAZUG青森 今から始めるMicrosoft Azure ～すぐに使えるクラウド活用術～ - Japan Azure User Group | Doorkeeper](https://jazug.doorkeeper.jp/events/20654) で話しました。 各スライドのサンプルコードは以下にて公開しています。 https://github.com/nnasaki/JAZUG-AOMORI/pulls?q=is%3Apr+is%3Aclosed （APIキー込みなので、皆さんチェックアウトしてすぐ動くはず） また、作ったアプリは皆さんのAndroidにインストールして動かせますのでお試しください。 https://dply.me/3qkwyp
【デブサミ2012】17-A-3 レポート HTML5でどこまでできる？ その実力とスマホ向けアプリ開発のポイント
「王道」も「邪道」も使ってJavaScriptのメモリ消費を抑える また、紀平氏は、JavaScriptの速度の問題についても説明。JavaScriptが重い理由としては、主にアルゴリズム、JIT（Just In Time）、GC（ガベージコレクション）の3つがあるという。 アルゴリズムが重いのは設計が悪いということなので、黙って設計を直すしかない。次に、本来は速くするための技術であるはずのJITが重いという場合、考えられるのはevalを使ったり、クロージャを生成していることだ。毎回JITのコンパイルを呼び出すようなコードを書いてしまうと、こうした問題が起こり得る。ただし、これはツールを使って容易に検出できるし、直すのもそう難しくはない。 「アルゴリズムやJITが重いという状況は、それほど問題にはならない。もっとも厄介で、JavaScriptが重くなる最大の原因は、GCにある」（紀平氏）
RPGを作るのに便利なアルゴリズムを提供する「rot.js」
rot.js: ROguelike Toolkit in JavaScript 「rot.js」はローグライクゲームを作成するのに便利なライブラリです。 “ローグライクゲーム”とは、ダンジョンが自動作成されるタイプのRPG(トルネコの不思議なダンジョン、風来のシレン等）のことですが、rot.jsによって提供される機能は、通常のRPGやシュミレーションゲームなどを作るのにも便利そうです。 ■ マップ自動作成 さまざまなタイプのマップを自動で作成することができます。 HEXタイプのマップも作成できます。 ■ 最短距離探索 ２点間で、障害物をよけながら最短の経路を検出します。 ■ FOV プレイキャラクターの現在位置から見えるエリア(視界)を検出します。 その他、ターンを管理する機能などがあります。
や...やっと理解できた！(2) JavaScriptのスコープチェーン - maeharinの日記
前回はJavaScriptのプロトタイプチェーンについて、図解を用いることでなんとか理解できました。今回はスコープチェーンに挑戦してみます。前回と同じく「1. 図解を用いる」「2. 用語を明確に定義する」「3. Standard ECMA-262 3rd editionを情報ソースとする」というアプローチで紐解いて行きます。 用語の定義 ・本エントリの文章における表記は、以下の表の「ECMA-262 3rd」に統一する ・本エントリの図における表記は、以下の表の「本エントリの略称」に統一する ・本エントリ内におけるES3とは、Standard ECMA-262 3rd editionを指す ECMA-262 3rd 本エントリの略称 JavaScript（サイ本）第5版（日本語） Execution Contexts EC 実行コンテキスト Variable Object VO 変数定義の
スマホアプリ開発の最前線で使われている、UIデザインメソッド20(4) デベロッパーに聞く、今日から使えるJavaScript 高速化術(後編)
中国・上海のWeb制作会社訪問ツアーなど、総額約150万円の豪華賞品が当たるアプリアワードを行う「TapApp(タップ＊アップ)プロジェクト」と連動した本連載。4回目では、前回に引き続き、サイバーエージェント(以下、CA)のデベロッパー・平木聡氏に、CAが運営する「Ameba」上で提供されているゲーム「ULTIMATE RACER」を例に、JavaScript高速化テクニックの一部を解説してもらった。また今回も、本誌開発者向け技術動向記事の執筆でおなじみ、後藤大地氏が技術監修を担当している。 平木聡 Ameba事業本部スマートフォンDiv.ディベロップメントグループ ディベロッパー。DTPオペレーターからWebデベロッパーへの転身を経てCAに入社。 Session C 既存スクリプト最適化作業の実際 実際のプロジェクトにおいては、ゼロからの開発よりも既存コードの改良作業のほうがむしろ頻繁に
Pinterest風のデザイン 「jQuery Masonry」を試してみた
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。 基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。 ダウンロードはこちらから JSなどの必要なファイルは以下からダウンロードします。 jQuery Masonry 設置の仕方 設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。 サンプルは以下から サンプルサイト JavaScriptの記述例 <script type="text/javascript" src="https://ajax.googleapis.com/ajax
Break Free of Code Deadlocks in Critical Sections Under Windows
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Create Advanced Web Applications With Object-Oriented Techniques Ray Djajadinata Recently I interviewed a software developer with five years experience in developing Web applications. She’d been doing JavaScript for four and a half years, she rated her J
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHP と JavaScript の噺
JavaScriptをまじめに考えました+
