タグ

ブックマーク / blog.h13i32maru.jp (14)

  • ESDocというJavaScript向けのAPIドキュメントツールを作りました - maru source

    こんにちは丸山@h13i32maruです。 昨日、ESDocというツールをリリースしました。GW中になんとかリリースできて一息ついているところです。今回はそのESDocというツールについて紹介します。あと最後に雑談と宣伝があります。 ESDocとは? ESDocとはJavaScript(ES6)向けのAPIドキュメントツールです。JavaScript界隈ではJSDocがデファクトスタンダードであり、ESDocもJSDocに触発されて作りました。なのでタグの使い方はなるべく互換性を持たせています。とはいえ不要だなと思うタグもかなりあったのでそれらは実装していません。 ESDocの特徴(主にJSDocに比べて)としてはこんな感じです。 詳細なドキュメントを生成する ドキュメントカバレッジを計測する テストコードとドキュメントを関連付ける ES6のclass, import/exportを使った

    ESDocというJavaScript向けのAPIドキュメントツールを作りました - maru source
    efcl
    efcl 2015/05/07
    Class構文からの推論のしやすさを活用したES6のコードからドキュメントを生成するツール
  • AirbnbのES6スタイルガイドを読んで - maru source

    こんにちは丸山@h13i32maruです。 ES6の仕様がRC4になっており、正式リリースを今か今かと待ちわびている。とはいえもう個人で書くコードはES6一択。ES5には戻れない(それにしてもBabelの勢いがすごい)。 そんな感じでES6を書いてるわけだけど、つい先日にAirbnbがES6のスタイルガイドを公開したというのを見かけたので、ざっくり読んでみた。 Airbnb JavaScript Style Guide() {} ほとんどの内容はすでにES5で一般的になっているものだったけど、一部ES6ならではのものがあった。賛成できるものもあったり、できないものもあったので、気になる項目だけ軽く紹介してみる。 constを使う References ES5まではvar fooというように変数を宣言してきたけど、このvarが曲者で他の言語とはちょっと異質な存在である。「ブロックスコープでは

    AirbnbのES6スタイルガイドを読んで - maru source
    efcl
    efcl 2015/04/16
    ES6のガイドについて
  • WHATWG Streams APIについてのメモ - maru source

    こんにちは丸山@h13i32maruです。 WHATWG Streams APIを少し触ってみたので、そのメモです。 ドキュメント WHATWG Streams このメモはLast Updated 21 January 2015を元に書いた whatwg/streams サンプルやリファレンス実装などがある このメモはcommit 879902を元に書いた Stream APIがブラウザにやってくる @jxckさんがnodeのStream APIと絡めてWHATWGのStreams APIを紹介している 概念 JavaScriptのプログラム中で処理する(大きめな)データの読み書きを統一的に扱うためのインターフェースをStreams APIとしてWHATWGが策定している。例えばXHRで大きなファイルを読み込んだ時にはすべてのデータを読み込んだあとにコールバックが呼ばれる*1。これだと読み

    WHATWG Streams APIについてのメモ - maru source
    efcl
    efcl 2015/02/11
    Stream APIの概念をモデルについての解説
  • ES6 Generatorを使ってasync/awaitを実装するメモ - maru source

    こんにちは丸山@h13i32maruです。 ES6のGeneratorを勉強する題材としてasync/awaitを実装してみたので、そのメモです。 Genratorとは ES6のGeneratorとは「任意の時点で処理を中断/再開することができる関数」というもの。一般的にはコルーチン(coroutine)と呼ばれるもので、サブルーチン(通常の関数)を一般化したもの。ES6でGeneratorを理解するには3つのキーワードがある。 Generator Function 処理の中断/再開が行われる特殊な関数 function* generatorFunction(){}のようにfunction*を使って定義する Generator Object 中断された処理を再開したり、値を取得し対するオブジェクト var generatorObject = generatorFunction()のように取

    ES6 Generatorを使ってasync/awaitを実装するメモ - maru source
    efcl
    efcl 2015/01/06
    ES6 GeneratorとPromiseを使ってcoライクな実装をするまでをステップ・バイ・ステップで
  • モダンぽいJavaScriptテスト環境の構築メモ - maru source

    こんにちは丸山@h13i32maruです。 ES6でアプリコード、テストコードを書いてテストをするための環境を作ったので、そのメモです。 目標 ES6で書いたアプリコードとテストコードをnpm run testでテストする 最終的な環境 最終的にはこんな環境になった。リポジトリ ECMAScript6 Google Chrome Travis CI npm traceur-compiler mocha espower-cli karma karma-cli karma-mocha karma-chrome-launcher bower power-assert 今回はgrunt/gulpのようなビルドシステムは入れていない。npm runをタスク実行のフロントとすることでタスク自体はお手軽にshで書いた。shだとwindowsが厳しいけど、まあとりあえず自分の環境用だしいいかなと。 以降で

    モダンぽいJavaScriptテスト環境の構築メモ - maru source
    efcl
    efcl 2014/12/30
    ES6 + traceur + mocha + power-assert + karmaの構成
  • なぜBTreeがIndexに使われているのか - maru source

    ※この内容は個人的な考察なので、間違っている箇所もあると思います。そういう部分を見つけた際はぜひ教えて下さい。 RDBMSの検索を早くするためにIndexって使いますよね。例えばこんなテーブル CREATE TABLE user ( id INT UNSIGNED NOT NULL, name VARCHAR(255) NOT NULL, UNIQUE INDEX (id) ); idカラムにIndexを張っています。これはidでの検索を高速にするためです。ここでidカラムにIndexが貼っていない場合と比べると検索時間が大幅に変わってきてしまいます(特にレコードが多くなった時) ではなぜIndexを貼ると検索が早くなるんでしょう?? Indexとはその名の通り索引を意味します。特定のカラムの索引を作成しておくことで検索を高速化します。 (の最後によみがな順で単語が並べられたりしています

    なぜBTreeがIndexに使われているのか - maru source
    efcl
    efcl 2014/03/28
    二分探索、二分探索木、BTreeについて。 計算量の考え方やBTreeはHDDとの相性が良いとされるため使われてる話等分かりやすい
  • WebStormによるJavaScript開発のすすめ - maru source

    Qiita JavaScript - Client Side - Advent Calendar 2013 12月20日の記事です。 みなさんはJavaScriptをどんなエディタで書いていますか?僕はこれまでVimで開発していたんですが、最近はもっぱらWebStorm(PhpStorm)を使ってJavaScriptを書いています。 というわけで今日はWebStorm使ったJavaScript開発における便利な機能をいくつか紹介していきます。 Inspections Code Completion JSDoc File Watchers Deployment(Automatic Upload) REST Client Directoies JavaScript Libraies Code Style ファイル検索 Vim Plugin Look and Feel WebStormとは? J

    WebStormによるJavaScript開発のすすめ - maru source
    efcl
    efcl 2013/12/21
    WebStormの機能紹介まとめ
  • JavaScriptプロトタイプマップ - maru source

    最近JavaScriptを触ることが多いのですが、JavaScriptのプロトタイプについて調べてもすぐに忘れてしまうので、ちょっとまとめてみました。 プロトタイプベース プロトタイプベースってそもそも何だろうと。僕の理解ではこんな感じです。 オブジェクトの振る舞いはそのオブジェクト自身とそのオブジェクトが保持するプロトタイプオブジェクトによって決定される またプロトタイプオブジェクトもオブジェクトなので、その振る舞いも1.に従う 1.と2.よりオブジェクトの振る舞いはプロトタイプを連鎖的にたどることとなる(プロトタイプチェーン) オブジェクトは静的な構造と関連せず、自由にプロパティを上書き/追加/削除することができる 同じコンストラクタから生成されたとしても、プロパティが同じとは限らない 以下のリンクが参考になるかと。 http://sumim.no-ip.com:8080/wiki/4

    JavaScriptプロトタイプマップ - maru source
    efcl
    efcl 2013/04/26
    prototypeの図解
  • Sphinxを使ってプログラムドキュメントを楽しく書こう - maru source

    efcl
    efcl 2012/06/03
    SphinxとreSTについてのスライド
  • CoffeeScript言語リファレンスを日本語訳しました - maru source

    最近CoffeeScriptというものを知って少し調べてみたら、家の言語リファレンスがそんなに多くなかったので日語訳に挑戦してみました。 http://coffeescript.org/ CoffeeScriptとはJavaScriptにコンパイル可能なシンプルな言語です。クラスベースのオブジェクト指向、Python/Rubyを参考にした内包表記、文字列内変数展開、スタティックスコープなどなどがあります。 先にネタバラシをしておくと日語訳は既に別の方がしていました\(^o^)/ http://sites.google.com/site/sappariwiki/coffeescript しかも僕の日語訳より全然わかりやすい!ぶっちゃけ英語は大の苦手なので、翻訳したはいいけど間違ってるところは色々あるはずです。 でもまあ技術的なドキュメントの翻訳に挑戦したのは、数年前に前職でRDP(R

    CoffeeScript言語リファレンスを日本語訳しました - maru source
    efcl
    efcl 2012/01/20
    CoffeeScript(1.2.0)のリファレンス日本語訳
  • vim再入門 - maru source

    僕はかれこれ5年くらいvimを使ってるんだけど、それにしてはvimを知らなさすぎると思って、勉強しなおしてみました。 参考書籍は「オライリー 入門vi」なのでvimじゃなくてviの基礎から勉強。 で、今まで使っていたコマンドと、新たに覚えた使えそうなコマンドをメモしておくことに。 ついでにRubyで補完をする方法、AutoComplPopの導入、作り直した.vimrcをさらしてみます。 コマンドモードから入力モードへ切り替える i カーソル位置から文字を書き始める a カーソル位置の後から文字を書き始める o カーソル位置の下の行から文字を書き始める O カーソル位置の上の行から文字を書き始める 入力モードからコマンドモードへ切り替える Esc どちらのモードかわからなくなったらとにかくEsc 保存 :w 保存 :q 終了 :wq 保存して、終了 :q! 保存せずに終了 移動 1文字移動

    efcl
    efcl 2010/10/31
    Vimのコマンド、使い方。
  • maru source

    現職のUbie(のProduct Platform組織)で働きだして2年たち、働きやすいなと思う点がいくつもある。自社の働きやすい点は慣れてくると当たり前に感じてくるので、改めて軽く言語化してみようと思う。そうすればその点を意識的に改善できるし、カジュアル面談などで自社の魅力を伝えるのにも役立つ。 透明である とにかく可能な限り情報を透明にしようとしてる点。アクセスしようと思えば一部の例外(従業員の給与だったり、ユーザの個人情報だったり)を除いてすべての情報にアクセスできる。 四半期ごとにOKRを事業チームごとにOKRをたてているが、その内容は当然見れるし、OKRの背景や進捗も見れる。他にも事業計画、事業代表が集まるMTGや各チームのMTGの議事録なども当然のように見ることができる。 アクセスできる人が限られていたり、議事録がなくて実質MTG参加者しか情報にアクセスできないというのを極力な

    maru source
    efcl
    efcl 2010/06/17
    background:-moz-linear-gradient CSSだけでメタリックなボタン。
  • Google Chromeでも動くユーザスクリプトを書くためのメモ - maru source

    僕が公開しているTwitterGoogle風にするCustomTwitter とういうユーザスクリプトをGoogle Chromeに対応させるために行った内容を備忘録としてまとめておこうと思います。 GreasemonkeyとGoogle Chromeは何が違うの? Google Chromeはネイティブでユーザスクリプトに対応しているようですが、Greasemonkey独自のGM関数には(ほとんど)対応していません。また@機能にもほとんど対応していません。以下のページで対応していない機能を確認できます。 User Scripts - The Chromium Projects @require @resource unsafeWindow GM_registerMenuCommand GM_setValue , GM_getValue , GM_listValues , GM_dele

    efcl
    efcl 2010/06/06
    GreasemonkeyとChromeの互換性を保つためには。 バージョンチェックとか
  • 引用文とかソースコードを開閉するグリモン - maru source

    ブログを見てると引用文とかソースコードをブロック(blockquoteやpreタグ)で囲んで載せているところありますよね。 こんな感じで。 特にソースコードは長くなりますよね。 僕は長いソースコードが貼り付けてある記事を読むときは、記事の概要だけをさっと読んで、ソースコードは後でじっくり読みます。でもソースコードが長いとスクロールするのが大変!! Close Block そんなわけで引用文やソースコードのブロックを閉じたり、開いたりできるGreasemonkey書いてみました。 http://userscripts.org/scripts/source/42430.user.js インストールしたら、F5キーでリロードしてみてください。↓のソースコードが閉じられて {{{ open by double click ... }}} という1行に変わってるはず。 // ==UserScript

    引用文とかソースコードを開閉するグリモン - maru source
    efcl
    efcl 2009/11/15
    はてなダイアリーに書かれているソースコードを開閉できるようにする。
  • 1