フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜 // Speaker Deck東京Node学園祭2015
オブジェクト
オブジェクトは JavaScript のデータ型のひとつで、複数のプロパティを管理することができます。プロパティはキーと値のペアで構成されており、キーを指定することで値を取り出すことができます。オブジェクトは一般的には連想配列とも呼ばれます。ここでは JavaScript におけるオブジェクトの使い方について解説します。
ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン
タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。 ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。 まずは呼び出し 基本の呼び出し。 まずはページのどっかに書いて読み込みましょう。 <script src="javascripts/jquery.js"></script> <script type="text/javascript" src="//www.google.fr/jsapi"></script> <script type="text/
やはり、お前らのJavaScriptでのリダイレクト実装は間違っている
一見簡単に見えるJavaScriptでのリダイレクト(URL転送)ですが、よく知られた方法にはある落とし穴があり、Googleアナリティクスで正常な解析が行えなくなります。どんな落とし穴があるかと、その回避策について解説します。 なお、こちらの記事は、 SEM Technology - Googleアナリティクスに悪影響を与えずにJavaScriptでリダイレクトする方法 と同じ内容となっています。 はじめに モバイルサイトとPCサイト間のリダイレクトであったり、URL変更に伴うリダイレクトにおいて, .htaccessなどを用いたサーバー側でのリダイレクトが技術上できず、JavaScriptを利用してリダイレクトしているケースをたまに見かけます。 こうしたサイトでは、見た目上は問題なく動作しているものの、実はGoogleアナリティクスなどを用いてアクセス解析を行うと致命的な問題点がみつか
夏のインターン講義「1営業日で書くJavaScriptコンパイラ」の設計と実装 - クックパッド開発者ブログ
今年、クックパッドでは夏のインターンと題して20名弱のインターンを受け入れました。 このインターンは前半と後半に大きく分かれており、 後半が社員に混じって業務をするいわゆる普通のインターンで、 前半は7日間にわたってプログラミング関連の講義を受けるという仕組みです。 わたし（青木）はその前半の過程において、「プログラミングパラダイム」という 1 日の講義を担当し、 JavaScriptの処理系を書くという、ツッコミどころの多い課題を実施しました。 本稿では、その講義を開発する際に考慮したこと、特に難易度調整についてお話しします。 また講義のために開発したJavaScript処理系「JetSpider」についても軽くふれます。 ▼講義資料 Cookpad Summer Intern 2015 - Programming Paradigm from Minero Aoki JetSpiderコ
ecmascript-paper
ECMAScriptのカンペ ECMAScript関係についてざっとみるカンニングペーパー。 2015年10月18日の次世代 Web カンファレンスでstandardizationのセッションで議論に参加するらしいのでそれのカンペです。 ここに書かれている情報は2015年10月17日現在のものです。 追記: 縦に長い記事読むのが面倒な人向けにスライド形式にしたものも置いておきます。 Introduction | ECMAScriptとは何か？ ECMAScriptとは? Ecma Internationalによって標準化されてるJavaScriptの仕様の事。 仕様: ECMAScript 実装: JavaScript 2015年10月18日のStableな最新版はECMAScript 2015(aka. ES6)。 ECMAScript® 2015 Language Specificat
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
リファレンスマニュアルをインクリメンタル検索するやつを Electron で実装した | tech - 氾濫原
https://github.com/cho45/Chemrtron 機能 インデックス用のクローラ 作ったインデックスのインクリメンタル検索と表示 できるだけ雑にインデックス作成用のクローラを実装できるようにしたかったので、そのようになっている。 オフライン閲覧はあんまり考慮してないが、file:// でインデックス登録すればオフラインでも使えると思う (ネットワークよりもディスクサイズのほうが厳しいのでオフラインにあまり興味がない…) 動かしかた レポジトリをクローンする場合 electron-prebuilt が必要。 npm -g install electron-prebuilt git clone https://github.com/cho45/Chemrtron.git cd Chemrtron electron . または https://github.com/cho45
型付きJavaScriptの将来についての最高のシナリオ - mizchi's blog
typescriptが独自AST捨ててEcma準拠して今のflowと同じTypeCheckerだけの存在になって、Babel が TypeScript の型アノテーション互換になり、ESNextで型アノテーションが仕様化されるのがフロントエンド界最良のシナリオ。そうならんだろうが— Dvorak対応型人類 (@mizchi) 2015, 10月 14 実際はFacebookとGoogleとMSのメンツが掛かっててややこしくなってる— Dvorak対応型人類 (@mizchi) 2015, 10月 14 babelのsebmck(18歳)がfacebookに入ったのは吉と出るかどうか 実際外部に依存しないならflowとtypescriptの両方のサブセットでどっちでも動くコードを書くのは難しくない。castとnullable が使えないが— Dvorak対応型人類 (@mizchi) 201
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
JavaScriptは如何にしてAsync/Awaitを獲得したのか: がおさんち 技術部屋
日記(2) 音声処理(0) ActionScript(1) Brainf*ck(0) C(0) C++(0) C#(3) Javascript(5) Lua(0) PHP(1) Pascal(0) VerilogHDL(0) Dart(1) Kuin(2) JavaScriptを記述する上で、避けて通れないのが非同期処理。 人類は、長い年月、この非同期的な処理を「如何にして書きやすく、読みやすく記述するか」について探求してきました。 要するに†闇†の塊なのですね。（闇に飲まれよ！！！！） この物語は、そんな†闇†の存在だった非同期処理を、人類がどのように苦しみ、そしてどのように解決していったかを書いていくポエムである。 補足：厳密には、JSはシングルスレッドで動くため、非同期処理は存在しない！と言ってしまえばそこまでなのですが、今回はsetTimeoutやaja
OSS についてあれこれ
unassert - encourage reliable programming by writing assertions in production
さよなら CoffeeScript - mizchi's blog
prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
NGINX、WebサーバNGINX上で利用できるJavaScript「nginScript」を公開
米NGINXは、同社が開発するWebサーバNGINX上で動作するJavaScript仮想マシン「nginScript」の最初のプレビュー版を、サンフランシスコで開催中のNGINXの開発者向けカンファレンス「nginx.conf 2015」において9月23日（現地時間）に公開した。 nginScriptは、NGINXの設定に役立つ機能を追加したJavaScriptの実装で、NGINXの設定を簡単に修正または作成でき、アプリケーションレベルで動作するため既存アプリケーションの安定性やセキュリティ、拡張性を保ったままでのリファクタリングを可能にする。 全体的には、仮想マシンとバイトコード・コンパイラ、および組み込み向けの文法を備えたJavaScriptで構成されている。また、仮想マシンはWebブラウザ経由での使用に最適化されており、リクエストごとに個々の仮想マシンが動作するためガベージコレクショ
HTML5 Drag and Drop Example - Web Code Geeks - 2025
In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format! To achieve drag and drop functionality with traditional HTML4, developers would have to use complex Javascript code. HTML 5 provides a Drag and Drop API that brings support to the browser making
Parse an HTML string with JS
I want to parse a string which contains HTML text. I want to do it in JavaScript. I tried the Pure JavaScript HTML Parser library but it seems that it parses the HTML of my current page, not from a string. Because when I try the code below, it changes the title of my page: var parser = new HTMLtoDOM("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02<
CSSのパースにはJSCSSP - Qiita
var cssText = 'body {background: #000 url(image/hoge.gif) no-repeat fixed right bottom;}'; var parser = new CSSParser(); var parsed = parser.parse(cssText, false, false); JSON.stringify( parsed.cssRules[0].declarations[0], null, " " ); /* "{ "type": 1000, "property": "background-color", "values": [ { "value": "#000", "type": 1, "name": null, "parentRule": null, "parentStyleSheet": null } ], "value
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
