Vue.js 2.0 の createElement で Props と Events を静的に検証できたらいいなーという妄想です。 Nominal Typing するためのイディオムについてのページは https://basarat.gitbooks.io/typescript/content/docs/tips/nominalTyping.html#using-interfaces スライド内のコードは http://bit.ly/2aAogpB

こんにちは。また新卒エンジニアの@nekobatoです。 Vueと闇の話します。 Vueが闇ってことじゃなくて、Vueで闇を作る話です。 テンプレートではなく、HTMLを読み込んでVueに繋ぎたい 用意するHTMLにv-**みたいなdirectiveは用意できるが、<script type="x-template">では囲えない。 なぜならそのHTML自体は他で使っていて、見た目に影響を出したくないから。 SPAにしろよという話でもあるのですが、今すぐ既にあるSPAに他所のHTMLを適用させたい、という場合に手っ取り早い方法を考えた所、こういうことになりました。 前提条件 JSファイルは一つ コンテンツはXHRでHTMLを受け取る さもSPAのように振る舞わせたい 読み込んだHTMLはVueで操作するのでbindingが効いている必要がある できないこと Vueのcomponent内へ単純

モバイルファクトリー Advent Calendar一日目担当の@nekobatoです。 フロントエンドなので、ナウなフロントエンドっぽいライブラリ紹介でもします。 はじめに 周りに「フロントエンドでXHRライブラリ何使ってる？」と聞くと フレームワークに生えてるのを使ってるよ（Angularなど）　←一番多い superagentだよ ←二番目に多い require('http')だよ　←！？ JQueryだよ　←最近少ない 素のXHRだよ　←マジかよ 程度に大別される印象です。 私が普段使っているVue.jsだと、request周りは標準で生えていないのでsuperagentを使うことが多いのですが、最近場面によってはaxiosを使うこともあったりします。 axiosとは、Angularの$http serviceに影響を受けたXHRライブラリで、書き方が似たようなものになっています。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.

天下一クライアントサイドJS MV*フレームワーク武道会 - connpass に参加してきたのでメモ。 Chaplin - mizchi Chaplin.jsの話 #ten1club // Speaker Deck 仕事で使ってる Chaplin paulmillr作のBackbone拡張系のMVC Rail風の構成 Chaplinの設計 Rails風のルーター インスタンスの管理するComposer Controllerと強調してインスタンスを管理 差分管理できるので早い 逆にインスタンスを引き継ぐので意識しないと辛い スキャフォールディング paulmillr/scaffolt Generator MV*だとやたらファイルが増える scaffolt はChaplinとは関係なく使える Brunch ウェブアプリに特化したビルドランナー CommonJS風の展開 npmで拡張子に応じた

jsのconsoleまわりのテクニックはいろいろありますが、個人的に有用だと思ったものにしぼって紹介します。 chromeなら、command + option + jでconsoleを開いて下記のコードを貼りつければ実際に動きを確認できます(1分でできます!!)。 console.logの出力結果をcssで装飾する 出力例 サンプルコード console.log("%csuccess", "background-color:#5bb75b;color:white"); console.log("%cfail", "background-color:#da4f49;color:white;font-size:30px");

概要 Object.observeとは、オブジェクトの変更を監視するためのAPIであった。 ES2015,2016の候補として挙げられており、V8でデフォルトで有効にされるまでに至っていたが、 実装コストがかかる上、世のニーズとそれほど合っていないということで結局廃止された。 改めて注意勧告 これは廃止された仕様です APIの概要 提供されるメソッド Object.observe(target, callback, acceptList = defaultAcceptTypes) // targetオブジェクトを監視する // 監視するオブジェクト、変更があった時に呼ばれる関数、監視するタイプの配列を指定する // defaultAcceptTypes = ['add', 'update', 'delete', 'setPrototype', // 'reconfigure', 'prev

「HackerNews翻訳してみた」が POSTD (ポスト・ディー) としてリニューアルしました！ この記事はここでも公開されています。 Original article: Managing Node.js Callback Hell with Promises, Generators and Other Approaches by Marc Harter 下のようなコードが、親しみをこめて「コールバック地獄」とか「死のピラミッド」とか呼ばれているのはご存じですよね。 doAsync1(function () { doAsync2(function () { doAsync3(function () { doAsync4(function () { }) }) }) この状態がコールバック地獄かどうかは、意見の分かれるところでしょう。ネストがいくら深くても全く問題がないコードもあるからで

使い所皆無なんだけど、このプログラムは JavaScript だと "JavaScript" と評価されて CoffeeScript だと "CoffeeScript" と評価される。 { JavaScript: ["CoffeeScript"] }["JavaScript"][0] 検証用コード code = '{ JavaScript: ["CoffeeScript"] }["JavaScript"][0]'; // "CoffeeScript" と評価される eval(CoffeeScript.compile(code, {bare:true})); // "JavaScript" と評価される eval(code); こうしてしまうと、観察者効果でどちらでも "CoffeeScript" と評価されてしまう。 a = { JavaScript: ["CoffeeScript"] }

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。前回のコールバック地獄に関する記事では、複雑な入れ子になりやすい非同期処理でも、GeneratorやjQuery.Deferredを使うことで、同期的な見た目に変形できることを示しました。 ところで、非同期処理においてはもう一つ「 エラー処理に例外が使えない 」という問題があります。今回はエラー処理について考えてみたいと思います。 例外を使ったエラー処理 非同期処理の話の前に、一度「例外」についておさらいしておきましょう。JavaScriptに限らず、エラーと言えばよく例外を使って記述されます。 「Web APIから500が返ってきた」とか「入力された値が期待する型

7 principles for rich web apps And how next.js achieves these principles

直近で、新規案件に関わることになりそうなので、ライブラリ選定やタスクランナー、そして今回の依存管理のようにベーシックな話が続いてます。次第に、具体的な実装やコード設計のポストが多くなる･･･はず。 今回はVue.jsでも触れましたが、改めてcomponent - modular javascript frameworkについて。 概要 Componentはパッケージマネージャー兼、依存解決込みのビルドツールです。クライアントサイドについて、JSのパッケージマネージャーやビルダーは既にありますが、Componentは HTML/CSS/JSをセットにして扱うことができます。 npmでいうpackage.jsonと同様に、component.jsonという定義ファイルによって、パッケージの依存関係やリポジトリなどの各種情報を示します。 component/component コア部分のリポジト

最近Marionette.jsを使っているのでその話を社内勉強会でやった資料です。 https://speakerdeck.com/koba04/marionette-dot-js-in-single-page-application SinglePageAppをBackbone.jsでつくろうとするとどうしてもView周りで独自実装をせざるを得なくて、でもオレオレフレームワークは作りたくないなぁと思ってたところ、Marionette.jsがいい感じにやってくれたのでその辺りについて書いています。 蛇足(Marionette.jsとAngular.js) Marionette.js 前のプロジェクトではAngular.jsを使っていて今回Backbone系なMarionette.jsを使ってみての感想としては、Marionette.jsはView周りも含め構造化して書くことが出来てメモリ管

この記事は Grunt Plugins Advent Calendar 2013 23日目の記事です。 Gruntタスクを並列で実行するプラグイン grunt-parallelize を紹介します。 ある程度プロジェクトが大きくなるとJavaScriptが1500ファイルとか超えてきてJSHintにくっそ時間かかるみたいなことがよくあります。JSHintを含む多くのNode製ツールはシングルプロセスなので、普通に実行しちゃうとマルチコアなCPUが遊んでてもったいないわけです。 そんなときにgrunt-parallelizeを使うと、指定のプロセス数にファイルリストを分割してマルチプロセスでタスクを実行してくれます。 まずはもとになるタスクのGruntfile.jsの定義。grunt-contrib-jshintを使った普通のタスクですね。 grunt.initConfig({ jshint