はてなブックマーク

JetBrainsさんのエディタ(intelliJやWebStorm)にはとってもお世話になっているんですが、 機能と共にIndexingの頻度が上がって全体の動きの機敏さが下がってきました。 (プロジェクトのサイズが大きくなってくると時間も尚更かかりますね。。) ↓↓↓ Indexingの仕事としては構文/エラー強調表示、コード補完など、開発サポートのための索引付けをやってくれているそうです。 今回はこれの対策を。 Preferences -> Directoriesを選んで、索引付けしたくないディレクトリをExcludeします。 これだけです。 自分の場合はWebStorm(Javascriptに強いエディタ)を使っていますが、ライブラリを格納するnode_modulesディレクトリをExcludeしたら劇的にIndexingの頻度・時間が減りました。 様々なケースにおけるベストプラク

こんにちは、ほそ道です。 スクラッチでSPAプロジェクトを作るとき、ボイラープレートに依存すると楽なんですが、自分でカスタマイズしながら環境構築するのも知識が深まってオツではないかとおもいます。 今回は、自分でもたまにやると忘れてしまうのでレシピをまとめておきたいと思います。 目次はこちら 高生産性 ローカルでのSPA開発の生産性を高める為によくやる下記のような環境構築、今回は下記のようなものを扱います。 1.ファイルを保存したら差分ビルド 2.ウェブサーバを起動しつつ同時にブラウザ起動 3.ファイルを更新したら併せてブラウザ自動リロード ホワイトボックス 色んなライブラリに依存しながらブラウザ起動やオートリロードを統合的に提供してくれるようなサーバライブラリもありますが、自分で組み合わせると問題が起きたときの原因対応が容易というメリットがあると思っています。 バージョンアップ時に動作しな

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ノイズを剥がしてreact with reduxのカタチを見つめ、段階的に理解を深める 〜 JSおくのほそ道 #039JavaScriptReactreduxreact-redux こんにちは、ほそ道です。 ここ最近、大人数でReactNativeを扱う機会があり、そのときに皆が苦戦していた傾向として 「reactとreduxの組合せ、もっと言えばreact-reduxというモジュールのボイラープレート(おまじない的な部分)が良くわからないのではないか？」 と思って色々サンプルを作ってコミュニケーションしてみた所、我が意を得たり！という反応が得られたので、その時に話したことやネタを展開してみようと思います。 シンプルなものから段階的に見ていくほうが理解を深めていきやすいのでは、と思い２段階ステップを踏んでいきます。 結論、Step1よりもStep2の方がベターケースであると考えています。

あらまし 今回はElmのURLハンドリングや、SPAの#付きURLの仕掛けを手っ取り早くわかりたい人に読んで頂けたらなーと思って書いております。 逆に、もう知ってるよという方には全く役に立たないと思います。 ちなみに#付きURLの仕掛けについては自分が見つけられてないだけかもしれませんが、SPAルータの文脈ではいい感じの解説を見たことがなくて、 身の回りのフロントエンドエンジニアと話したり、コミュニティーのお話を見ていると結構この話をしていて、Webフロントエンドあるあるとして、ちょこちょこ需要があるのかなーと思っております。 そもそも#の付いてるURLって 自分もURLルールについてすごく詳しいわけではないので言葉の使い方とかちょっと不安ですが。。 そもそも、なんでSPAルータは、良くURLに#を付る形になってるんでしょうか。 よく、HTML要素のid属性のところまでリンクするのに#を使

こんにちは、ほそ道です。 今回からjQueryを操る際には書かせない「jQueryもとい$変数」にディープに迫ります。 対象バージョン：jQuery-2.1.1 目次はこちら 前提の共有 下記の内容はここから先に進む上での前提とします。 当ブログ内での便宜的な呼び方 - jQueryでアクセス出来る変数の事を「jQuery関数」と呼びます - jQuery関数の戻り値を「jQueryインスタンス」と呼びます - jQueryインスタンス[number]でアクセス出来る要素群を「コレクション」と呼びます。 予備知識 - $とjQueryは同じものです - jQueryインスタンスはArrayに見えますが独自のObjectです。 jQuery関数の実行パターン jQuery関数は第一引数の内容によって、その挙動が大きく変わります。 第一引数ベースで挙動を簡単にまとめました。 第二引数はほぼ省略

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんにちは、ほそ道です。 Object.freeze編でやったようにオブジェクトの状態を完全に凍結させたい場合はfreezeしてしまえばよいのですが、アプリケーションを作っていると当然、拡張/変更が必要になるシチュエーションは出てくると思います。 今回はライブラリを使って不意なデータ変更によって生まれる複雑性に対抗する方法を紹介していきます。 1.前提共有編 2.Object.freeze編 4.コレクション一発代入/一発返却編 5.条件分岐一発代入/一発返却編 目次はこちら const宣言したオブジェクトの不変性を保ちながら変更に対応する 前回、deepFreezeという関数を作るときに、freezeされた新しいオブジェクトを生成して返すようにしましたが、そのようにして破壊的メソッドを使用せずに、変更を加えた新しいオブジェクトを返す、というようにするのが拡張/変更による想定外を生まないた

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんにちは、ほそ道です。 今回から連作でテストコーディングの進め方・考え方を取り上げます。 フロントエンドテストはブラウザ・DOMが絡んできたりしてとかく複雑で厄介なものです。 あとGulpとかのビルドツールと連携しようとしたり、WebpackとかでテストコードもES6で描きたいなーとかのトライもいっぺんに含めようとすると軽くカオスな状態になります。 最近はReactのTestUtilだったりFluxテストでJestをお勧めしてたりとモダンな奴らもチラホラ。 というわけで知ることテンコ盛りなので今回は第一歩としてテストフレームワークJasmineを使ってブラウザレスでしっかりと単体テストを行い基盤を固めたいと思います。 目次はこちら 前提：モジュール間の依存関係をどう受け止めるか 今回の主題は「モジュール間の依存関係をどう受け止めるか」に設定しました。 テストしやすいコードを書くには、TD

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんにちは、ほそ道です。 今回も引き続きVue.jsのディレクティブを体で覚えます。 前回のビューモデル生成編同様、シンプルなサンプルに沢山触れる事でどんな道具があるのかをバンバン体験していくスタイルでやってまいります。 ViewModel生成編 ディレクティブ編 [インスタンスメンバ編] (http://qiita.com/setzz/items/ebbfcc3565bcd27f344c) [グローバルメソッド編] (http://qiita.com/setzz/items/8f06f2fe6049173b17f9) [フィルター編] (http://qiita.com/setzz/items/e37c47d3f22e5738eb84) [v-repeatネスト編] (http://qiita.com/setzz/items/6f22ebd15bcc0afe1ab0) 全体の目次はこちら

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

「jQueryいつ使うの！？」 「今でしょ・・・？」 こんにちはほそ道です。 というわけで今回からjQueryに取り組みます。 ですが、いきなり飛びつかない！ まずはライブラリを疑うところからはじめていきたいと思います。 昨今、とりあえずサイトにjQuery入れとけ的なアプローチだったり ネイティブJSで書ける処理をわざわざjQueryで書いているような開発者を目にする事があります。 あえて始めに言わせていただきたい！ JSライブラリを使う事のメリット/デメリットを強く意識しましょう！ ライブラリ使う前にネイティブJS書けるようになりましょう！ 目次はこちら jQueryとは？ いつものごとく公式ページから拝借・意訳します。 高速・軽量・リッチなJavaScriptライブラリ。 様々なブラウザ環境で簡単なAPIからイベントハンドリングやアニメーションやAjaxがうまいこと実現できる。 多彩

こんにちはほそ道です。 今回はイベントもといイベントループを取り上げてみます。 目次はこちら イベント駆動処理の作成 とりあえず作ってみよう 設計と実装 ほそ道は毎週ボウリングに行くのですが、 自宅やオフィスにボウリングレーンがあったら夢のようだ。。 という夢をかなえる為に ボウリングレーンを実装 してみました。 ストライクやガターの発生をイベントとして検知したら ディスプレイになんやかんや表示するという感じのシロモノです。 雰囲気を出す為にconsole.log関数をレーンのディスプレイに見立ててみました。 ちなみに見やすさ重視のためメモリ効率等はいっさい考慮してません。 var EventEmitter = require('events').EventEmitter; // define Lane function Lane01() { this.display = console.

こんにちは、ほそ道です。 前回のJasmineモジュールテストに引き続きテストを掘り下げていきます。 今回はUIテストをやってみたいと思います。前回分も読んでおいていただくと理解度シナジーが起こって良い感じになると思います。 目次はこちら 今回扱う範囲/扱わない範囲 まずはブラウザ上でJavaScriptを実行しJasmineと絡めて実行結果をテストします。 次にブラウザ上のDOMの状態(スタイル含む)をテストします。 今回のテスト内容にとりあえず遷移というかページ(リ)ロードは含めません。これが絡むと非常に厄介さが増すので遷移は別途取り上げたいと思います。 Karmaを実行する まずはKarmaの実行から。 Karmaは実ブラウザでJavaScriptコードを実行できる実行環境で、テストフレームワークと組み合わせてテストを行う事ができます。 エミュレータやヘッドレスブラウザではなく実ブラ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんにちは、ほそ道です。 今回はビルドツール・モジュールローダ・altJS(JSコンパイラ)を組み合わせてさらにテストコードのおくのほそ道に入り込んでいきます。 今回Gulp + Webpack + Karma + Jasmine + ES6を使用しますが、 GruntだったりBrowserifyだったりMochaだったりCoffeescriptだったりに置き換えても基本的な考え方は近しい感じになるかと思います。 あとはここにSPAフレームワークとかを組み合わせればいよいよモダンなテストコードになっていきますね。 目次はこちら 今回解決すること・設計方針 Webpackとテストコードを組み合わせる。なんかバンドルしたりごにょごにょやってるどこにテストを挟むのか？を解決する。 ソースコードもテストコードもES6で書く。babelないしはaltJSのコンパイルごにょごにょやってるどこにテストを

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

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

// 1.モジュールオブジェクトの初期化 var fs = require("fs"); var server = require("http").createServer(function(req, res) { res.writeHead(200, {"Content-Type":"text/html"}); var output = fs.readFileSync("./index.html", "utf-8"); res.end(output); }).listen(8080); var io = require("socket.io").listen(server); // ユーザ管理ハッシュ var userHash = {}; // 2.イベントの定義 io.sockets.on("connection", function (socket) { // 接続開始カスタムイベン

こんにちは、ほそ道です。 今回はMV**なフレームワークのひとつであるVue.jsを取り上げてみます。 さて、どこから手をつけたら良いものかと思案にくれた結果、序論や諸注意点をアレコレ展開する前にまずはビシバシと弄って、ヒジョーにシンプルなサンプルをいっぱい作って体にしみ込ませてみるのがイイんじゃないかと思いました。 ボリュームがあるので何回かに分け、今回はビューモデルを生成するパターンをまとめます。 「考えるな、感じろ」の精神でやった後にどう考え学習すべきかや、どう設計すべきかなどの私見は述べられたら良いなと思っております。 ViewModel生成編 ディレクティブ編 [インスタンスメンバ編] (http://qiita.com/setzz/items/ebbfcc3565bcd27f344c) [グローバルメソッド編] (http://qiita.com/setzz/items/8f0

ご挨拶 じぇいえすや 嗚呼じぇいえすや じぇいえすや 初めまして！ JavaScript街道600里を歩きながら、その中で生まれた発見や探求を詠み上げます。 テーマはとしては 「JavaScript基礎のその奥へ！」 を掲げてやって参ります。 単なる概要紹介と手順ではなく、一歩掘り下げた検証や考察を入れつつ 裏側(ソース)はなるべく見て周り、 「どのようなアーキテクチャによりそのモノが動いているのか」 もチェックしながら進めていきたいと思います。 Index 1つのトピックで1~10位の投稿を予定しています 順不同に書き進めます もはや常識！？NodeJSの基本 非同期型イベント駆動とは イベントループの仕組みを探る モジュール＆npmのキホン Webサーバ＋アプリ構築が速すぎる件 Socket.ioで双方向通信チャットアプリを構築 ビルドツールの骨身に迫る Gruntとの上手な付き合い方