カジュアルJavaScript AST
今日の概要 実は使われてるJavaScript AST JavaScript AST(Abstract Syntax Tree)とは? JavaScript ASTを使ったツール紹介 使うだけじゃなくて書いてみよう browserify Node.jsで書かれたものをブラウザ向けに変換するツール Node環境で開発 -> browserifyでビルド -> ブラウザで動く JavaScriptのコードを 変換 する ≒ JavaScript ASTを見て変換 する 本体の色々な部分、transform pluginなどでASTを使ってる
や...やっと理解できた！(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 変数定義の
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
GitHub - faisalman/ua-parser-js: UAParser.js - The Essential Tool for User-Agent Detection in JavaScript & Web Development.
import { UAParser } from 'ua-parser-js'; // 1. Problem: // Imagine getting this wild user-agent string from a visitor: const ua = `Mozilla/5.0 (Linux; Android 10; STK-LX1 Build/HONORSTK-LX1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/110.0.5481.153 Mobile Safari/537.36 musical_ly_2022803040 JsSdk/1.0 NetType/WIFI Channel/huaweiadsglobal_int AppName/musical_ly app_version/28.3.4
依存するモジュールも解決できる Node/AMD (サーバ／クライアント) 共通化モジュールを書く
このエントリは、 東京Node学園祭 2012 アドベントカレンダー 5日目の記事です。 ■ 前置き - AMD とは AMD (Asynchronous Module Definition) は、Javascript のコードをモジュールとして定義して、非同期ないし遅延ロードするための仕組みです。 http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition (現在、接続が遅い模様) CommonJS により提唱されたものですが、昨年あたりからクライアントサイド (ブラウザ) で JavaScript モジュールを構築する仕組みとして各所で一気に取り上げられ、現在ではクライアントサイドの主要なライブラリでもサポートされてきている（AMD によるモジュールとして利用できる）状態にあります。 モジュールに依存性を指定する仕組みも用意
jshintでjavascriptコードチェックしながら開発する - aolog
最近はjavascriptを書いています。 javascriptとしてはそれなりに大規模になってきました（2万行ぐらい？）。 最近のjavascriptトレンドのやり方は、コードチェッカを通して、信頼性を向上させるのがプロ技らしいです。 僕も早くプロの仲間に入りたいです。 コードチェッカには「JSLint」というのがあるらしいのですが、使ってみればわかりますが、さすがに警告が細かすぎてウザいです。 （「varは関数トップに一つ」とか特に。C言語じゃないんだから･･･。） そういった部分をある程度柔軟にしたものに「JSHint」というのがあるみたいです。「JSLint」のフォークらしいです。 あまりに堅いスタイルを強要されたくなかったので、僕はこれを使ってみました。 そのまま使えるわけじゃないのでやったことをメモっておきます。 1.JSHintをダウンロードしてくる http://jshin
勉強会資料シェア Getting Started with RequireJS
げりんぐすたーてっど うぃず りくわぃあーじぇーぇす ということで、社内勉強会でRequireJSの入門資料をこさえたのでシェア。 利用したデモファイルセット http://d.aho.mu/S4mh なんとなくRequireJSが動くセットです。スライド中のr.jsによるビルドコマンドや、gruntを利用したビルドも試せるようになっています。 おさえるべき要点 いくつかの要点だけ記事内に文字列でおこしておきまする。 モジュラーと依存関係 Webサイト → Webアプリ への流れが明確になってきてフロントエンドが複雑化してきている今、1つのJSファイルにつらつらとCSSのようなノリで書き連ねる時代は終わりつつあります。 ParisJS #10 : RequireJS このあたりについては、上記の素晴らしいスライドから、Figureを拝借しました。個々のJavaScriptの粒度が揃えてモジ
Underscore.js について纏めてみた
each ～ listの要素をイテレートする。すべての要素はiterator関数にyieldされる。 iteratorには(element, index, list)の3つの引数が渡される。 もしlistがJavascript Objectだった場合は(value, key, list)になる。 _.each([1, 2, 3], function(num){ alert(num); }); => alerts each number in turn... _.each({one : 1, two : 2, three : 3}, function(num, key){ alert(num); }); => alerts each number in turn...
高度な JavaScript 技集
JavaScript で作って意味があるのかどうか分かりませんが、作ってみました。 応用編 入力したテキストをページ上に書き出し、個々の文字をドラッグ＆ドロップ で動かせるようにする ソースを読んでも中身が分からない HTML を作成する パスワードチェックの部屋 (パスワードは「開けごま」ですが、HTML のソースや JavaScript を解析しても、絶対にパスワードが分からない仕組みになっています。) バー ライブラリ編 こんなの JavaScript で作るかよってな代物です。 できてしまったものはしょうがないでしょう。 utf.js (UTF-8 <-> UTF16 変換) base64.js (Base64 encode/decode) md5.js (MD5) des.js (DES 暗号化/復号化) zlib.js (JavaScript による zlib 実装、zlib
Javascript/論理演算子による選択的代入 - 俺の基地
OR演算子による選択的代入 OR演算子「||」を使うと、変数の中身によって代入を選択的に行うことができます var a; var b = {}; var c = a || b; //bが代入される この c には b の内容が代入されます。aが何かオブジェクトが入っていた場合はaが代入されます。 このように数値チェック、分岐、代入を1行で書ける。 ▲ ▼ AND演算子によるオブジェクト存在チェックとプロパティの抜き出し あるオブジェクト中のあるプロパティが欲しい場合があり、普通ならオブジェクトチェックの後、プロパティのチェックをして取り出す流れになるが、AND演算子「&&」を使うと1行で書くことができる var a = {}; a.b = 1; var hoge = a && a.b || a && a.c; この場合は a と a.b が両方存在していた場合に限り、左辺（今回ならa.b）
java-ja.js #2 RequireJS実践編 - monjudoh’s diary
java-ja.js #2 : ATND 自己紹介 文殊堂といいます。 BePROUDという会社のリーダーです ↑はロケタッチの話です(ロケタッチ知らない人は4SQでMayorになったみたいな話だと思っといてください)。 弊社では今(2010年12月現在)人材募集中らしいですよ。 今の仕事はUIがリッチな業務システムを作るとかそんな感じで、 そこでRequireJSを使っています。 RequireJSって何? 公式サイト RequireJS スライド jQueryRequireJS.pdf 日本語記事だとこの辺? http://zudolab.net/blog/?p=451 要はJavaScriptの依存性解決をしてくれるライブラリです。 以前RequireJS moduleについてって記事書きました。 あらためてRequireJS moduleについて まず最初に、一般的な言語と同じよう
Take it easy- RequireJSについてまとめてみた
REQUIRE JS JSの非同期ローディングとモジュール化を行うライブラリ 公式サイト 詳しくは、RequireJS実践編を参照 下記順番で読み込み(config-require.jsは自作。名前はなんでも良い) ＜script src="config-require.js"> ＜script data-main="main" src="require.js"> 非同期ローディングについて 下記を参考にconfig-require.jsを作成 設定値の詳細はこちらを参照 var require = { deps: ["some/module1", "my/module2", "a.js", "b.js"], callback: function(module1, module2) { //This function will be called when all the dependen
【JavaScript】Backbone.jsとUnderscore.jsのtemplateメモ – T2
【JavaScript】Backbone.jsとUnderscore.jsのtemplateメモ 12月 5, 2012 admin JST 第4回 JavaScriptTemplates（JST）入門！ 概要 JavaScript用テンプレートエンジン「JavaScript Templates（JST）」 TrimPathというJavaScript用フレームワークの中で使用されているテンプレートエンジン デメリット ・SEO的にどうなのか。 ・JSオフすると微妙だよね ・テンプレートエンジンだから重い？ 例 試しに適当なものを作成しました。 <!-- window.onload = function(){ var contents = document.getElementById('contents'); var temp = contents.innerHTML; var data
Backbone.js Advent Calendar 2012 - Adventar
Backbone.jsのTIPSとかパターンとか、他のライブラリとの連携などなど。 フルスタック感がない分、各自でいろいろ編み出しながら使いこなしていると思うので、そのあたりの共有がてら書きましょう！
[HTML5] アプリケーションキャッシュの使い方
アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、 表示の高速化やオフラインでの動作を可能にするものです。 ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。 特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。 導入方法 あちこちで語られまくってて今更感あるけど一応…。 マニフェストファイルの作成 まずは何をキャッシュするのか指定するマニフェストファイルを作ります。 UTF-8のテキストファイルを開いたら、拡張子を “.appcache” にして適当な名前を付けて保存。 保存する場所はアプリケーションのルートでいいと思います。 保存したらテキストファイルの先頭に CACHE MANIFEST と追加。目印なので忘れずに。 その後にキャッシュするものとしないものの設定を書きます。 ま
![[HTML5] アプリケーションキャッシュの使い方](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
zepto.js — the aerogel-weight mobile javascript framework
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting
Backbone.js の記事一覧 | DevelopersIO
# Backbone.js の記事一覧【後編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 山形 孝造2013.04.01 01:53【前編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 山形 孝造2013.04.01 01:49Backbone.jsでつくるMVPなUIパターン【リスト】 山形 孝造2013.03.04 03:59Backbone.jsでつくるMVPなUIパターン【タブ】 山形 孝造2013.02.27 11:06Backbone.jsにおけるModel-View-Presenterアーキテクチャパターン 山形 孝造2013.02.26 07:05Backbone.jsでPOSTでXMLを返す 深澤 豪2012.10.02 05:53backbone.jsとcoffee scriptを組み合わせた小さいサンプル 中村 修
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイト・フロントエンドの高速化とgrunt.jsについて
http://eightmedia.github.io/hammer.js/
デブハゲ