All slide content and descriptions are owned by their creators.
basic.jsを作ろうとしてる話 // Speaker Deck
All slide content and descriptions are owned by their creators.
実装して理解する遅延評価の仕組み 〜 thunkを絵に描いて理解しよう・JavaScriptでHaskellを実装！？ - プログラムモグモグ
この記事では, Haskellに用いられる「遅延評価」の仕組みを, 図に描いて説明します. 更に, 遅延評価版のフィボナッチ数の無限列を, JavaScriptで実装します. 遅延評価とはどのように動くのか, 考えて行きましょう. HaskellのコードとJavaScriptのコードの比較 Haskellでの x = y y = 10 と, JavaScriptの var x = y; var y = 10; というコードを考えてください. Haskellのコードは, これだけでは何も起こりません. print xとすると, x = y = 10 となって 10 が表示されます. 一方, JavaScriptのコードは var x = y; を評価した瞬間, ｢ReferenceError: y is not defined｣というエラーが出ます. 更に, main = let x = 1
ストリーム表現とその変換 - ✘╹◡╹✘
データをストリームとして表現する方法と、ストリームを変換する方法を紹介する。 ストリームはメッセージが流れる川である Pub/Subメッセージングモデルでメッセージを流すためのオブジェクトのことをストリームと呼ぶことにする。ストリームにはメッセージをPublishでき、またメッセージを受け取ったときの処理をSubscribeできる。例えばキーボードからの入力をPublishして、内容をコンソールに出力するような処理をSubscribeできる。 kamo.jsでストリームを表現する ストリームについて説明するために、kamo.jsというストリームを表現するためのライブラリをつくった。kamo.jsは、ストリームを作成するためのkamo.Streamというコンストラクタ関数を提供する。このコンストラクタ関数から作成されたオブジェクトは、publishとsubscribeというメソッド(※プロパ
Vue.js概要？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Vue.js とは 原作者である Evan You氏 が中心となって開発中のクライアント サイドJavaScirpt(JS)フレームワークです。 MVC の派生種である、GUIライブラリに適した MVVM を設計基盤と して採用し、構築されています。 MVVM を採用していること が、構文の理解しやすさに繋がって います。 MVVM を採用したフレームワークでは、表示そのものであるView、 表示するデータ 及び データを操作する手続き をひとまとめにした View Model(VM)、が舞台上の役者です、それらを管理する コントローラ
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
昔ながらの「片手間に書くJavaScript」の限界 - mizchi's blog
Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 - Qiita この記事は、全体的に自分の業務以外の評価基準やトレンドを知らないんだなという感じで、わざわざ付き合うと精神的に消耗する感じがした。ただ、それが彼らの本職でない以上、自分もこの結論に至るのは仕方ないと感じている部分はある。 真の問題は、自分がレガシーなJavaScriptを書いているという自覚がない人間が、ここ数年の技術トレンドから乖離したコードを書き続けることで他のエンジニアやエコシステムそのものに悪影響を及ぼしているケースが散見されている。一行書く毎にグローバル汚染するスクリプトを見せられてもメンテ出来んと言われても、はいそうですねとしか言えないし、そういう人に最近のライブラリを触らせると遅くなるというのは、画面全体を一つのMustacheテンプレートにしてBackbone.Modelのパラメー
メンテナブルなJsってなんだろう
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
Angular.jsとTypeScript - pirosikick's diary
Angular.jsでaltJSを使う場合、CoffeeScriptが一般的（たぶん）だが、TypeScriptはあんまり聞かない。TypeScriptの方が好きな自分としてはどうにかならんかねとずっと考えていて、こうやったらいいんじゃないかというのを思いついたのでメモ。 controller定義の基本 Angular.jsでcontrollerを定義する場合、だいたいはangular.module.controllerの第１引数にcontroller名、第２引数にcontrollerのコンストラクタ関数を渡す。 var app = angular.module('app', []); // 'MainCtrl'という名前のcontrollerを定義 app.controller('MainCtrl', function ($scope) { }); このままだとminiyした時にinje
ayapi.github.io
Hackers Barってなに？ Hackers Bar 六本木にハッカーがおもてなしをするバーが誕生します。 「Hackers Bar」は、ハッカーのプログラミングライブや ビジネスメイキングを楽しむ空間です。 ぁゃしすぎだし、まじで営業してんの！？って半信半疑で行ってみたら、 まじで営業してたｗ 存在してたｗｗｗｗ ぉ店自体のくゎしぃレポゎねとらぼにも載ったみたぃ カクテル名が「ブルースクリーン」「スパゲッティ」って不吉すぎるでしょ！ 六本木にできた「Hackers Bar」行ってきた - ねとらぼ ゃってもらったライブコーディング 弟が、ぁゃぴにソファーをくれるって言ってて、 ゃったーってかんじなんだけど、③人掛けでまじデカぃっぽぃ！ ぉ部屋の㊥ゎだぃじょぶっぽぃんだけど、 運ばれてくる時、マンションのエレベーターにちゃんと入るのかな？ …ってことで、それを計算したくて／(^o^)＼
kintoneのJSユニットテスト最新事情 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チームの天野 (@ama_ch) です。 最近はJavaScriptのテストツールが著しく進歩し、日々新しいツールが登場しています。kintoneの開発もこれらのツールによって支えられています。 kintone開発チームでは、昨年末頃からテスト環境の改善に取り組み、モダンなツールセットに乗り換えました。今回は、現在のkintoneのJSユニットテスト環境について紹介します。 kintoneとJSユニットテスト 数年前からユニットテストと自動化の仕組みはあったのですが、ごく一部のユーティリティ関数に書かれているのみで、普段の開発には活用されていませんでした。 ここ1,2年ほどで テストスケルトンを生成するジェネレータスクリプトを作る テストの書き方をまとめたドキュメントを用意する MTGで「ユニットテストを書かなくていいのは小学生まで」などと煽る コードレビュー
Node.jsのコールバック地獄をPromiseやGeneratorを使って解消する - HackerNews翻訳してみた
「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 () { }) }) }) この状態がコールバック地獄かどうかは、意見の分かれるところでしょう。ネストがいくら深くても全く問題がないコードもあるからで
Ractive.js入門 - lxyuma BLOG
これは、jsCafe18で話したSlideです。 概要 これから、「Ractive.js」という js上でReactiveなUIを とてもsimpleにbuildするためのlibraryの話をします 目次 reactive programming ractive.js 他のframeworkとの比較 Backboneに入れてみる そもそもReactive Programmingとは？ 古くは、2003年頃から日本のblogでも幾つか言及されてる模様 去年、更に色々と動きが出てきた。 2013/7 ガートナーの2013年のreportで扱われてる 2013/9 リアクティブマニフェストが出た。これ訳されてる方がいた。 2013/9 infoQの記事見ると大体の流れや概要が分かる バズりと意味の広がり なんか徐々にバズり感がある 他のバズりワード(cloud等)と同じように意味が広義に、より抽
Web Application の validation はどのレイヤーでかけるべきか - tokuhirom's blog
Web Application の validation はどのレイヤーでかけるべきか 数年前にも同じことかいた気がするけど、最近の状況にあわせてかいてみる。 途中で面倒になってきて説明が雑になっている点をご容赦ください。 言いたいことは「結局、昔はサーバサイドで懇切丁寧なエラーメッセージを出すためにModelではなくControllerでバリデーションに関する知識が必要だったけど 今はJavaScriptでやるから不要だよね１１１」ってことです。 この表題は、よく話題にあがるところなのだが、理想論としては Model, Controller, Client side のいずれにおいてもきっちりと validation を行うことがのぞましい。 しかし、実際にはなかなか面倒である。ということで、どこをはぶくかというと Controller における Validation であろう。 ユーザ
MutationObserverを使った高速setImmediate/nextTick - 素人がプログラミングを勉強していたブログ
MessageChannel / setTimeout / requestAnimationFrame / postMessageを使ったものより異様に速い。 というのも、setTimeout等は、次のサイクル（すなわちnextTick）の開始時に実行する関数を登録し、DOMや画面の更新後に実行されるのだが、 MutationObserverのコールバックは、現在の(同期的な)JS実行が完了した時点でコードを走らせるためである。さらに、MutationObserverは同じ実行サイクルでのDOM上の変更を次回のサイクルにすべてまとめてrecordsとしてコールバックに渡すので、これもsetImmediateの実装には非常に都合が良い。 MutationObserverのような実行タイミングをmicrotaskといい、setTimeout / postMessage / MessageCha
grunt-contrib-watch が重いので grunt-este-watch を試したら幸せになった
最近、Grunt と grunt-contrib-watch を使っているのだけど、grunt-contrib-watch が CPU を消費しがちである。 watch 対象のファイルが少ないうちは grunt-contrib-watch は問題なく動くんだけども、ファイル数が増えてくると CPU の消費量が増えてくる。自分の環境では、1,000 個ぐらいのファイルを監視していると、常時 10% 程度 CPU を消費している。 この問題は既知であり、FAQ には次のように書いている。 たくさんのファイルを監視している場合、デフォルトの interval の値が小さすぎるかもしれない。options: { interval: 5007 } のようにして増やしてみてほしい。詳しくは issues #35 と #145 を参照のこと (※日本語訳は私によるもの) Another reason i
RequireJSをプロジェクトで使ってみての所感 - ダーシマ・ヱンヂニヤリング
JavaScriptのモジュール定義・読み込みをAMD (Asynchronous Module Definition) でできるライブラリであるRequireJSをプロジェクトで使ってみた。 プロジェクトの規模感を簡単に説明しておくと、まず単画面アプリケーションではなく、従来通りテンプレートが複数あるウェブサイトだ。よくあるウェブサイトとはいえ、JavaScriptで動く機能やUIがたくさんあり、テンプレートのパターンが100枚以上ある。カルーセルと画像切り替えが動けばヨシ、みたいなそこらのコーポレートサイトよりは遥かに規模の大きいウェブサイトとなっている。 導入を決めたのは、今回のプロジェクトで必ず現出するであろう懸念点を、あらかじめ潰しておきたかったという動機から。その懸念点というのは主にファイルサイズの問題。ウェブサイト内で使われている全JSファイルを全て結合圧縮すると、最終的に1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ripple.js(とcomponent関連)の話
Vue.js
捗るかもしれないフロントエンド開発環境
Node-OS