javascriptの「this」は「4種類」？？ この記事ではベースとなる４種類の「this」を紹介します。 実際は４種類ではないのですが、 このベースの４種類を理解できれば他もすぐに理解できます。 thisの４種類のパターン １：メソッド呼び出しパターン ２：関数呼び出しパターン ３：コンストラクタ呼び出しパターン ４：apply,call呼び出しパターン ここで重要なのは「呼び出し元」をみることです。 なぜなら「呼び出し元」に「this」は左右されるからです。 メソッド呼び出しパターン これはもう一番直感的にわかりやすいです。 説明はいらないんじゃないかという感じなのですが、 一応ソースを。。 //メソッド呼び出しパターン var myObject = { value: 10, show: function() { console.log(this.value); } } myObj

JavaScriptの「プロトタイプ入門」 JavaScriptはオブジェクト指向です。 クラスという概念はないため、 擬似的なクラスの表現を使ったパターンがあります。 ただ今回はそちらではなくプロトタイプベースの説明をします。 その前にコンストラクタについて知らない人はこちらへ。 JavaScriptのクラス？コンストラクタ？ プロトタイプって？ そもそもプロトタイプってなに？ 実は、、プロトタイプとは「オブジェクト」のことなんです。 そして感覚としては親だと思って大丈夫です。 親の能力は子にも受け継がれている。。的なニュアンスですね。 （まぁ意味合いはちがいますがw） prototypeプロパティ ここで新規に関数を生成してみましょう。 そうするとprototypeプロパティが自動で作成されます。 このように関数を生成した時点で、 proto.prototypeプロパティが自動で生成さ

索引 ├ 使い方 目次 └ バグノート(1) 1章：jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章：jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章：jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編：研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ cssア

jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert

CONCEPT新しいタイプの日本酒テイスティングバー 「SAKE MARKET」は、 お酒をもっと自由に、 楽しんだり、体験したり、出会ったりできる、 お酒のテーマパーク。 自由な空間で、特別な時間をお過ごしください。 SAKE MARKET" is a To drink more freely, Enjoy, experience and discover new sake. Sake Theme Park Enjoy a special time in a free space. PRICE 日本酒、果実酒、梅酒、焼酎約100種類 飲み比べし放題 料理持ち込み自由 発泡酒（サントリー金麦）・サワー・ソフトドリンクもございます。 You can compare about 100 kinds of sake, fruit wine, plum wine, shochu, etc. Ple

Reactを使い出した時にまず思ったのが「もっと動いている事例を見せてくれんかな？」だった。事例が少なく感じたので、自分で入門者向けに事例集を作った。 初学者が勉強する時はまずは公式サイトのチュートリアルが一番よくできていると思う。それでも誰もがこのチュートリアルだけで十分って訳ではない。 Reactは他の技術とは発想が異なる箇所がいくつかあり、初学者が持っているバックグラウンドによって「なんか引っかかる所」が多い。特にJavaScriptの他のフレームワークに慣れた人にとっては「あれ？そこはそうするの？」となっていちいち手を止めて考えさせられてしまう。すごい難しくて手も足も出ない訳ではない。分かるんだけど、なんか妙に引っかかるところが多いのだ。 そういう引っかかりを取り除いてくれるのは公式サイトにある「○○というのはですね、○○という思想に基づいて、、、と考えて」と懇切丁寧に説明いただく

【地方初出店！梅酒・果実酒「SHUGAR MARKET」の3号店が福岡・天神に3/31（金）オープン！】 「SHUGAR MARKET」の3号店を、2... 世の中にはあまり知られていない美味しい梅酒や果実酒がまだたくさんあります。 そのお酒に出会うことができれば、楽しみ方はあなた次第で無限大に広がります。 例えば、２種類の果実酒をミックスしたり、デザートにかけたり。 その他にもアレンジは様々です。 そんな梅酒・果実酒の「おいしい、楽しい」発見を、 渋谷の「SHUGAR MARKET（シュガーマーケット）」で体験してみませんか？ 過去２回のクラウドファンディングに成功した、日本酒飲み比べし放題の「KURAND SAKE MARKET」。 今回はKURANDの姉妹店となる「SHUGAR MARKET（シュガーマーケット）」を、2月18日（木）渋谷のマークシティーの近くにオープンします。 「S

シュガーマーケットという，渋谷の立ち飲み果実酒の店に行ってきた．人気店なため，随分先まで予約が一杯だという．大学の友人の id:kanata_02 が見事予約成功してくれたので行くことができた．ありがたい． www.makuake.com ラストオーダーの22:00までの時間無制限で，果実酒が飲み放題だった． アイスにかけるお酒は，特製のいちごのやつがオススメらしい．あんず酒美味しい． おつまみなどは，どこかで買って持ち込むスタイル．入店時にディズニーランドみたいに手の甲にスタンプ押されるので，途中で買いに出掛けることもできる． 果実酒というだけあって基本的に甘いので，しょっぱいものを買って行くとよい． 今回は揚げ物セットを買って持って行ったけれど，醤油の味が恋しくなったから握り寿司パックを持って行けばよかった．次回に活かしたい．店内には自由に使える電子レンジもあるので，冬に行くならレンジ

JavaScriptおれおれAdvent Calendar 2014 – 02日目 今日は変数の命名についてのお話その一です。jQueryオブジェクトを格納する変数には”$”を付けろっていうやつ。 先にまとめ 誤解されない、明確な名前を付けよう 必要なら接頭辞も付けよう nameなら文字列、$nameならjQueryで取得した要素、elNameなら生要素 変数の命名からの理解 普通の名前 パッと見でどんな値が格納され（てい）るか想像付くでしょうか。付きますよね。 このnameは名前だからたぶんstring型で、ageはきっと年齢がnumber型で格納されるのだろうなと察しが付く。よね。 意外とそうじゃないかもしれないけど、コード中の意外性は可読性を下げる（正確な理解を妨げる）事になるので、そういう場合は実装なり設計なりを見直した方が良い。 で、その「意外とそうじゃない」奴の例として、要素が

jQueryオブジェクトとは? このエントリーは軽めのjQuery Advent Calendar 2012の20日目のエントリーです。 よくjQueryの解説などを見ていると「jQueryオブジェクト」という単語が出てきますね。今回はjQueryオブジェクトとは何者かを解説をします。読み終える頃には少しだけJavaScriptに詳しくなれるよ。（若干長いです。） そもそもオブジェクトとは? さて、「jQueryオブジェクト」を解説する前にJavaScriptのオブジェクトについて解説します。JavaScriptのオブジェクトは非常に複雑なのですが、基本だけでもわかるとJavaScriptやjQueryの学習効率が全然かわってきます。 まず、ざっくりと解説するとオブジェクトとは「プロパティ」と「メソッド」を持つ構造体のことです。 プロパティとは? ではプロパティとはなんでしょうか?プロパテ

ご無沙汰しております、アシアル笹亀です。 ブログを書くのは、大変久しぶりになります。実はアシアルでは最近、noteもはじめております。アシアルの仕事の取り組み方、考え方、様々なメンバーについて知ることができます！是非、ご興味があるかたはこちらも一読いただけますと嬉しいです。 https://note.asial.co.jp/ 久しぶりにiPhoneアプリをアップデート申請をするときありますよね？ iPhoneのアプリを継続的に保守管理をしていると、申請作業をクライアント様におまかせして、あまりエンジニア自身で長い間、アップデート申請をしてこなかった方々は何気に多いのではないかとおもい（自分もその１人）、ブログにも残しておこうとおもいました。 こまめに改修などを加えており、その度にアップデートの申請をされている場合には、あまり実感はないかもですが、１年振りとかにアップデートの申請をしたりする

アロー関数式は、従来の関数式の簡潔な代替構文ですが、意味的な違いや意図的な使用上の制限もあります。 アロー関数自身には this、arguments、super へのバインドがないので、メソッドとして使用することはできません。 アロー関数はコンストラクターとして使用することはできません。 new をつけて呼び出すと TypeError が発生します。 new.target キーワードにアクセスすることもできません。 アロー関数は本体内で yield を使用することができず、ジェネレーター関数として作成することもできません。

cssのzoomプロパティを使用した状態で、jQueryのoffsetメソッドを使用すると正しい値を取得することができない。 一方で、ネイティブのoffsetTopを使用すれば、cssにzoomを使用していても正しい値を取得することができる。 従って以下のようにコードを書き換えると良い。 jQuery:

『純粋』関数型プログラミング言語といえば関数型プログラミング言語全体のなかでも殊更ラジカルな言語として知られていますが、『すべて純粋』という言語には、『だいたい純粋』という言語にはない利点があります。このテキストは、実感を得やすい具体的な場面を元に『純粋関数型』の利点を紹介していくシリーズです。第一回は言語を純粋にしてモナドで抽象化すると、非同期処理のコールバック地獄をPromise/Generators以上にシンプルかつ優れた方法で解決できるよという話でした。今回は、言語が純粋なら仮想DOMを使うときに純粋性も何も知らなくていいし、レンダリング関数の純粋性が自動的に保証されてとにかく簡単だよ、という話です。 ケース1: 『別に純粋でない』言語～『だいたい純粋な』言語の場合 みなさん仮想DOMは使ってますでしょうか。筆者はもう新しいおもちゃを与えられたイヌのようにハフハフしながら遊んでいて

追記: 情報が色々と古くなったため、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

はじめに 先日、PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips という記事を書きました。 前回は PhantomJS のみを用いてスクレイピングを行なっていましたが、スクレイピングした結果を使って色々やりたい！となると、Node.js の力を借りたくなってきます。単純に取得した HTML を利用するだけなら、PhantomJS の fs モジュールを使って HTML をファイルに書き出し、これを Node.js で読み取って…、なんてことをすれば可能ですが、何かしらの入力を受けて動的にページを遷移したい、となると厳しくなってきます。 そこで、本エントリでは PhantomJS を Node.js から使って色々出来るよ！ということを解説したいと思います。 利用するモジュール PhantomJS をラップした Node モジュールは沢山あります。試

よくコールバック地獄とか耳にして、コードもちらっと見て、なんとなく「ネストは深くしない（関数の中で関数を書き過ぎない）」とか、可読性を高めるために気をつけたほうが良いこと。としての認識はあるものの、そもそもコールバック関数ってなんぞや？ というのが、どうしてもわからなかったので、調べました。 コールバック関数とは？ 引数として渡され、関数の中で所定のタイミングで実行される関数。 わかりやすくするとこんな感じ。 実際に書いてみるとこのような記述になります。 // HTMLを読み込み後、実行 function hou_nyou(callback){ document.write("たかし は おしっこ を すべて はいしゅつ した"); callback(); } function hou_nyou_complete(){ document.write("<br>＼(^o^)／ {　ちょうかん

はじめに JavaScriptのコールバックについて、シンプルに理解できるよう整理してみました。 特に目新しいことはないかと思いますが、何かのお役に立てば幸いです。 目次 コールバック（関数）とは 単純なコールバック関数を実装する より実践的（かもしれない）コールバック関数を実装する おまけ | Promiseに置き換える 終わりに 参考サイト コールバック（関数）とは ひとことで言うと、「引数として渡される関数」です。 他関数の引数として使用し、特定のタイミングで実行させることができます。「あの処理が終わった後に、この関数を実行したい」など。 単純なコールバック関数を実装する 例えばイベント発火時のコールバックは、使い方・動作がイメージしやすいかと思います。 // #triggerをclickしたら、console.log()を実行 $('#trigger').click(functio

Reactの開発をする際、JSXで書くのか、それともJavaScriptベースにするのかと大きく2パターンありますが、コンポーネントの構造が把握しやすい点や、タイプ数も少なくなりそうなので、JSXで書くことにしています。 JSXの場合、JavaScriptのコードの中にHTMLタグが出てくるというものになりますが、Emacsでコーディングする際に、シンタックスハイライトや構文チェックをやりたいなーと思ったので、調べてみました。 ※2015/10/28追記 JSXHintがDeprecatedになったため、ESLintに切り替えました。 umi-uyura.hatenablog.com ※2015/11/7追記 js2-modeがJSXの編集に対応したそうです。 Emacs で React の jsx を js2-mode で書けるようになってたメモ - 牌語備忘録 -pygo 前提 項目

(´-`）.｡oO（秋葉原駅のミルクスタンドにある…） (´-`）.｡oO（みんなの牛乳が大好きです…） (´-`）.｡oO（皆様も秋葉原にお越しいただいたときにはぜひ…） というわけでどうも。 続いてHTML要素の中身を変更したりしなかったりしてみましょう。 当記事でのHTML要素の中身を変更、というのは <p id="test">初めてのJavaScript勉強中だよ！</p> という記述でいうと『初めてのJavaScript勉強中だよ！』という部分を変更するという事を指すこととします。 JavaScriptで要素の中身を変更するプロパティは『innerHTML』(いんなーえいちてぃーえむえる)、『innerText』(いんなーてきすと)、 『textContent』(てきすとこんてんと)の3つがあります。 使い方は同じような感じで以下のようになります。 ※innerHTMLの場合 <

document.getElementById("ID").innerHTML = "HTML-VALUE";

【--- 追記（2015/02/22）---】 2/15に6to5がBabelと名称変更したので、記事の内容もBabelを使うよう変更しました。 Not Born to Die · Babel 【--- 追記ここまで ---】 2/7にnode.js v0.12.0がリリースされました。 Node v0.12.0 (Stable) 安定版のメジャーアップデートでES6構文がいよいよ一般的になるのではないでしょうか。 そして最近良く聞くBabel(旧6to5)。 ES6+のコードをES5に変換してくれるということで、ES6構文を動かせる環境が浸透していないフロントエンドで役立つライブラリです。 Babelはgrunt, gulp, browserifyなど多数のビルドツールで扱えるプラグインが提供されているので、jsのビルド工程があるプロジェクトであれば簡単に導入できると思います。 今回は前

最近、WebpackとかReactとかがイケているらしいので、かじってみたときの備忘録。 環境 $ npm -v 3.3.12 $ node -v v5.4.0 $ uname -o Cygwin $ arch x86_64 プロジェクトの初期化 npm initでpackage.jsonをつくる $ npm init $ tree . sample └── package.json 必要なパッケージをnpmで追加 ## React $ npm install --save react react-dom ## WebpackとReactで使うLoarderたち $ npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react ## Bootstrap $ npm

モジュールバンドラWebpackとJavaScriptコンパイラBabelをインストールし、UIライブラリReactを使ってみる。 環境 Ubuntu 14.04.4 LTS 64bit版 $ uname -a Linux vm-ubuntu64 3.19.0-25-generic #26~14.04.1-Ubuntu SMP Fri Jul 24 21:16:20 UTC 2015 x86_64 x86_64 x86_64 GNU/Linux $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 14.04.4 LTS Release: 14.04 Codename: trusty $ nodejs --version v4.4.2 $ npm --version

Reactを開発するときに、babelやwebpackの設定をしますが、 すでに古い情報が多かったり、結局何のためにどの指定が必要なのかがわかりづらいため、改めて何を何のためにやっているのか整理します。 本記事は基本的にはReactの利用有無にかかわらず参考にできます。 また、セットアップ済みのプロジェクトはgithubに上げてるので試してみたい場合はそちらを。 https://github.com/haradakunihiko/devserver-boilerplate 前提 ES2015ベースで、webアプリ開発をしたいので開発環境を準備します。 ここでは以下のバージョンを使用します。 node@4 npm@2 babel@6 npm@2を利用している場合は特定のライブラリをinstallすると、それが依存しているライブラリは併せてインストールされますが、npm@3の場合は明示的に入れ

はじめに Webアプリケーションを作る手段はLAMPだけではありません。 ちょっとしたものであればnode.js + express + SQLite3を使えば驚くほど簡単に作ることができます。 ここでは例として簡易版twitterのようなミニブログを作ります。 必要となる知識 コマンドラインツールの扱い方 HTML, JavaScript SQL このエントリを読んでできること node.jsを使って短時間でWebアプリケーションを作る このエントリを読んでもできないこと 小規模でないWebサービスを作って運用する WebSocketを使ってリアルタイムWebアプリケーションを作る アウトライン 1.node.jsをインストールする 2.アプリケーションを作って動かしてみる 3.フォームから受け取ったデータを表示する 4.SQLite3を使ってデータを永続化する 1.node.jsをイン

Node界では個性的なWebアプリケーションフレームワークが乱立しており、RubyにおけるRailsのようなデファクトは存在していません。 フレームワーク選びの指針になるように、特徴や基本機能、人気度などを比較してみました。 今回比較対象とするフレームワークは以下の通りです。 Express 軽量なWebアプリケーションフレームワークです。MEANスタックの一角として扱われている通り、最も有名なNode用のフレームワークなのではないでしょうか。 Nodeをあまり隠さないシンプルな設計思想です。 Koa Expressと同等のシンプルな設計のもと、ミドルウェアにES6流の非同期処理を追加したフレームワークです。 開発者はExpressと同じTJ Holowaychuk氏。 Hapi Expressと同等のシンプルな設計のもと、コードを設定ファイルのように記述できるフレームワークです。 Sai

今や Node.js はフロントエンド開発になくてはならない存在です。フロントの特に UI を作成するために JBoss をインストールするとか GrassFish, Tomcat をというのはかなり重量級です。 grunt にしても Node.js を使っていますので「なぜ Node.js なのか」という議論はもはや愚問と言えます。業務アプリケーションを構築するときには無くてはならない存在となっています。 自分も含めですが、Node.js をインストールするにあたり 知っておくべきこと やっておくべきこと がありますのでまとめます。 知っておくべきこと Node.js とは Node.js のサイトによると Node.jsは高速でスケーラブルなネットワークアプリケーションを簡単に構築するためにChrome の JavaScript 実行環境上に構築されたプラットフォームです。 「Chro

de:code 2015 にご参加された皆様、ありがとうございました。ご参加されなかった皆様も、そのうちスライドや動画が公開されると思いますので、ぜひご覧ください。 de:code が終わって、前回の記事の続きで「HTML5 を使ったシンプルな 2 D ゲームの作り方(複数インスタンスの生成)」を書こう、と思ったのですが、このシリーズを書いている間に build 2015 があり、その中で、Windows はもちろん、Mac、Linux 環境でも使用できるコーディングツール Visual Studio Code が発表されました。 そして、そのタイミングで公開された Visual Studio 日本チームブログの記事では、このブログの「「HTML5 を使ったシンプルな 2 D ゲーム…」の記事を紹介してくれているのですが、紹介文にはこう書いてありました。 「(Visual Studio 2

Node.jsを触って勉強してたらWebサイトができました。 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました Youtubeから結婚式の余興の動画を集めてくるサイトです。Web開発は初めてだったので、つくった流れや勉強の方法などをまとめてみます。 9/14追記）スマホ対応をやりました！ 普段はiOSアプリを書いています 普段はiOSアプリ開発者をやっていて、仕事と趣味でObjective-Cを書いてます。とても楽しくて2年くらい続けてるのですが、サーバーサイド書けたら幅が広がっていいな、とずっと思ってました。 普段の週末は個人アプリを作ったりしてるのですが、夏休みだし新しいことやろうと思ってNode.jsを触ってみました。 つくったもの 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました 結婚式の余興動画がまとまっていて、だら見できる

Node.jsではrequire('モジュール')という文法を使って機能拡張を行います。 ブラウザのJSでは<script>タグを使って外部JSを読み込んで利用する事ができますが、 こちらは外部ファイルを読み込んで使用するにはrequireを使用します。 組み込みでいくつかの コアモジュール と呼ばれるモジュール群が提供されています。 コアモジュールはインストール後はビルド済みのバイナリになっており、 いままでの記事で登場したfsやeventsはコアモジュールです。 ソースや一覧を確認する場合はgithubの./libを参照しましょう。 その１：簡単なサンプルモジュールのロード 早速、自作のモジュールを作り、ロードしてみようと思います。 下記のような構成です。main.jsがnode_modules/my_math.jsをロードします。

node.jsを使って、webサーバーを立てるまで方法をメモしておきます。 参考： MEANスタックで始めるWebアプリ開発入門（2）：いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (1/2) - ＠IT Node.js入門 (全16回) - プログラミングならドットインストール いまいちポートやらhttpモジュールやらわからないので後々勉強しておきます。 [Node.js] Webサーバ＋アプリ構築が速すぎる件 〜 JSおくのほそ道 #004 - Qiita 変更が楽なので、別ファイルにport,hostを設定しましょう。 //server.js var http = require('http'); //httpモジュールのインポート var server = http.createServer(); var settings = require('./se

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

第2回フロントエンドかけこみ寺@もくもく会にて行った、フロントエンドかけこみ寺初参加記念 自己紹介LT。Read less

こんにちは！ギャザリーで開発を担当している手塚＠inureoです。 今回はタイトル通りwebpack + babel-loaderでES6デビューしつつ、gulpもES6で書く、というところをやってみたいと思います。 gulpfile.jsをES6で書こうと思った理由 「ES6やりたいなー、しかも業務に直結するところで。」と考えていた時に、こちらの記事のgulpfile.js をES6で書く理由を拝見して「たしかにgulpfileなら実装に頭使わないし慣れるのにはピッタリだ！」と思ったからです。 早速ES6でgulpfileを書いていく gulpfileをES6で書くには、gulp側でES6対応をするか、node.js側でES6対応をするかの2択になります。 gulp側での対応 gulpの3.9.0からbabelを標準サポートするようになりました。ファイル名をgulpfile.babel.

Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 （実際にはIE9以降から使用することを推奨します） 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同

タイトルは釣りです。すいませんほんと。 2015年12月0c8日に行われたAktsk Tech Meetup #1: Elixir & GraphQLで発表した際の資料です。 === Node.js+Koaで開発していたサービスを、なぜリリースせずにElixir+Phoenixに書き換…

ECMAScript6 (ES6, ES2015) で導入された新機能の大半は、読めば便利さが想像くらいはできるけど、自分にとってしばらく訳がわからなかった新機能が「シンボル」（MDNのリファレンス）。これまで文字列だけで上手くやってきたJavaScriptに、急になぜこんなものが導入されたの？　イマイチ分からなかったので、調べたことのまとめ。 シンボルの簡単なおさらい 知ってる人は読み飛ばし推奨。詳しく見たい人は、こことかの他のページを参照。 ES6で導入された、 Symbol() で作成できる特殊な値。 Symbol() は、 typeof すると 'number' でも 'string' でも 'object' でもなくて 'symbol' となる、まったく新しいタイプのプリミティブ値を生成する。 一旦作ったシンボルは、それ自身とのみ等しくなる、ユニークなIDとして機能する。 ===

Private content!This content has been marked as private by the uploader.

ちょっとnode.jsでAPIサーバ作ろうとして express4に上げたらいろいろと使い方が変わっていたので 備忘録的に書いておきます。 expressでのプロジェクトの作り方 ここを見ながらやるのが確実。 https://www.npmjs.org/package/express express3の場合 express3までは $ npm install -g express # グローバルにexpressコマンド入れて $ express appName # expressコマンドでひな形作成 .. $ node app.js # アプリケーション起動 こんな感じでexpressプロジェクトを作れましたが、 express4から結構変更されています。 express4の場合 express4ではひな形を作るコマンドが本体から分離されました。 またアプリケーションの起動方法も変更されて

新卒入社3年目のエンジニア集団。それぞれが広告関連システム、ビデオ関連サービス、地図関連サービスの開発に関わる傍ら、Node.js、MongoDB、HTML5を組み合わせたブラウザ上で動作する社内用メッセンジャーツールを開発や、WebSocketを使った実験的地図サービスの開発をおこなっている。これらを実験場として、ブラウザの最新仕様やNode.jsのノウハウをヤフー社内に普及・啓蒙中。

はじめに Node.jsを触りたいけど、けど、 黒い画面が。。 なんてこと聞いたりするんですよね。 そこで、何も考えずパパっとNode.jsを動かしてみようってのが、 今回の記事です。 とりあえず、やってみてください。 本当に簡単にできちゃいますので。 nodebrewが便利 nodebrew? nodebrewっていうのは、Max/Linux向けのnodeのバージョンを管理してくれる便利toolです。 例えば、v1.0.0を入れてたけど、v1.2.0にあげたいなってときとかに、さっとバージョンの切り替えとかができます。 まずは、インストール。 $ curl -L git.io/nodebrew | perl - setup .. Add path: export PATH=$HOME/.nodebrew/current/bin:$PATH pathを追加してくれと言われます。 pathを

node.js触るのは5ヶ月ぶりくらいなのでリハビリも兼ねて。 まだRESTなAPI作ったこと無いな・・ ということで、アプリケーションサーバとしてnode.jsを選んだときに RESTfulなAPIを返すサーバを作ってみます。 ちなみにほぼ node.jsでREST APIを作るのに最適なexpress-resource | Inhale n' Exhale の内容に沿ってますハイ。 【追記】 express4版はこちら。 express4でRESTful API作る - yutaponのブログ express-resourceをインストール 前回express3でMVCのひな形を作ったので、 それにのっかる形で作っていきます。 express-resourceを使うと簡単にできそうです。 https://github.com/visionmedia/express-resource e

これは Heroku Advent Calendar 2014 の２１日目(12/21)の投稿です。 最近はクライアント(ネィティブアプリ、JavaScriptベースのWEBアプリ)とサーバを RESTful な WEB API でつなぐパターンが増えてきてる気がしています。エンドユーザ向けのサービスだけでなく、管理画面やツールなどでも。 今回は AngularJS Full-Stack（generator-angular-fullstack） を利用して Node.js(Express) と MongoDB ベースの RESTful な API サーバ を作り Heroku へデプロイするまでやってみます。（AngularJS の環境は、今回は使いません。フロントエンドは AngularJS をそのまま使ってもいいし、それ以外にしてもOK。） 『AngularJS Full-Stack』

「node.jsを使って簡単にWebアプリが作れる！」みたいな記事で紹介されているサンプルコードは、だいたいそのまま使いものにならないことが多い。実際のアプリ開発では、いろいろなモジュールをNPMでインストールして、ソースコードツリーの階層なんかにも気を配ったりするものだ。DBへのアクセスも一元化して、O/Rマッパーも使えるようにしたい。国際化対応も考えなければならない。デバッガも必要だ。アプリを作りながら後付していくのもいいが、最初の段階である程度は固めておきたいと思う人も多いだろう。 すべてを一気に紹介すると相当長くなりそうなので、今回はREST APIを作る上で欠かせないexpressとexpress-resourceに焦点を当てる。node.jsとNPMをまだインストールしていなかったらnvmでインストールしておこう。 node.jsでMVCアーキテクチャのアプリを作ろうと思ったら