この記事の対象者 プロジェクトでテストを書いている。(書いたことある) テストが重要らしい事は知っているが、テストの恩恵をそこまで実感できていない。 結局手動テストに依存したバグフィックスをしている。 はじめに 私はテストの設計手法、実装に関する知識は多く持っていましたが、知らなかったことはテストの考え方でした。 テストが重要らしいことを知っている人は多いと思います。 しかし、実際に恩恵を実感できていない人もいると思います。 事実、 テストが重要だと発信している人 と、 テストが重要らしいことを知っている人がいます。 後者の人は、とりあえずテストを書く事ができます。しかし、テストに時間を割く割りに、最終的には手動テストでバグを発見することに依存している事も多いかなと感じます。 世間ではテスト書くのが当たり前、テストは重要！という風潮であるのに、何故テストが重要であると実感できないのでしょう

2016年に流行りそうだけどまだ殆ど知られていないエンジニア向けサービス10選を見ていたら、Refactor.ioというサービスがあって気になったので軽く使ってみた。 https://www.refactor.io/ Refactor.ioとは コードレビューやリファクタリングを気軽に依頼できるサービス。依頼したいコードを投稿するとレビュー用のページが作成され、そのページのURLを依頼者に共有、もしくはそのページを訪れた人にコードレビューやリファクタリングをしてもらう事ができる。 何ともシンプルなUI。画面右上に「GitHub Login」というリンクがある通り、GitHubとも連携出来る。連携の設定をしておくことで依頼したコードにコメントが入るとその旨をメールで受け取ることが出来る。対応言語は以下の通り。 ・JavaScript ・JSX ・CoffeeScript ・LiveScrip

!!!Caution!!! (2019/8/15追加） ここに書いてあるやり方には、今は推奨されていない古い書き方があります（Class Component、propTypes、Redux における Action と Reducer の扱い方など）。 近年、推奨されているやり方でまとめたものが見たい場合はこちらを御覧ください。 https://qiita.com/pullphone/items/fdb0f36d8b4e5c0ae893 前回までのまとめ React Tutorial 編 http://qiita.com/pullphone/items/efcaee59cf2a5725c61d 今回のテーマ そもそも Redux とは？ Redux で実装するにあたってのテンプレ・お約束 React と Redux をつなぐ そもそも Redux とは何者なのか？ React State の

React使いつつも、既存のCSSフレームワークを何か載せようと思っていろいろ調べたメモ。 あくまでもReactとの親和性などに絞って選んでます。 Bootstrapは何か「出、出〜〜〜！！Bootstrap奴〜〜〜！」ってなりそうだったので、最後の砦として触れてません。 Material-UI 一番Reactに寄り添って出来ている。 以下のように必要なコンポーネントをimportしてrender()内で使うだけ。 実際触ってみると非常にお手軽で、動きのクォリティも高かった。 余計な外部ファイルも読む必要がなくて綺麗。 その分かなりカッチリと仕様が決まっているので、少し手を加えたい場合は さらにMaterial-UIコンポーネントをラップするオリジナルコンポーネントを作れば拡張はできる。 // タッチ・クリックの挙動のために必要っぽい import injectTapEventPlugin

昨年の途中からちらほら耳にするものの、まだ「なにそれ美味しいの?」なRollupですが、馴染むと手放せなくなる感じ。どんなものか、使い方から、プラグインのつくりかたまで、概観してみたいと思います。 Rollupって何? 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。WebPackとかBrowserifyみたいなやつです。依存モジュールの解決や、AltJSのプリコンパイルしたり、など。大きな特徴として、次の点がよく挙げられます。 生成ファイルが小さい ES6(ES2015)ネイティブ ドキュメント類はまだ最低限という感じですが、WebPackかBrowserifyにさわったことがあれば、そんなに迷うことはないかも。ただ、トップページに行っても正直よくわからないので、今のところWikiが一番の情報源です。公式の情報で見るべきとこ

自動テストって意識高そうで恰好良いですよね! 普段ブラウザ用のJavaScriptしか書かない人なのですが、テストについて調べても、難しい話から始まる記事ばかりで「アサーションって何?」とか「何で通常のファイルとは別のjsが必要なの?」みたいな気持でした。この記事では簡単な前提条件から、mocha/chaiの使い方の概要が分かる部分までを説明したいと思います。 そもそもテストとは何? ソフトウェア開発におけるテストとは、ソフトウェアの振舞いが想定した通りであるかを検証することです。ソフトウェアのサブルーチンを取り出してテストする「単体テスト／ユニットテスト」と、ソフトウェア全体の挙動をテストする「結合テスト」があります。mocha・chaiはこのうちの「単体テスト」を対象としたツールです。 じゃあ単体テストって何をすることなの? 単体テストとは、ある特定の関数を対象に、入力値と出力値が仕様

npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。 本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。 npm-scripts には以下の特徴があります。 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。 複雑なことをするには向いていないです。 環境変数の扱いに難があります。 この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。

masterブランチでちょっとした変更をしたいんだけど、devブランチで作業しているから切り替えるのはめんどくさい。 そんな時はgit worktreeを使ってみてください。複数のブランチを切り替えずに操作できます。 ※git worktreeを使うにはGit 2.7.0以降が必要です。それ以前のバージョンだとgit worktree listがありません。 ブランチの追加 操作したいブランチはこんな風に持ってくることができます。 すると、作業ディレクトリ以下に指定したブランチの中身がリンクされます。 たとえば、git worktree add ./worktree-dev devとコマンドを打つと、./worktree-devディレクトリが作成され、その下にdevブランチの内容ができるわけです。 git worktreeは今いるブランチに影響を与えません。 つまり、作業中であっても操作し

このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。 （以下、訳） 私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。 例を挙げましょう 私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mochaなどを統合するのは本当にたいへんでした。なぜでしょうか？それは、プラグインによってはドキュメントが不十分だったり、APIの一部しか公開されていなかったためです。 これらを解決しようと思えばできました。しかしなんと それらのツールを直接使用すると不具合が

概要 完全に単一のHTMLファイルで動作するMarkdownエディタ「かんたんMarkdown」を作ったというお話。 お断り 一応簡単に動作検証はしていますが、とんでもないバグが潜んでいるかもしれません。 かんたんMarkdownを利用して大切な文章がなくなってしまったり、その他損害が生じても責任は取れませんm_ _m 経緯 前回の記事(そろそろExcelで資料作るのやめたい)で、 単一ファイルで動くMarkdown 画像をbase64で埋め込んでしまう というアイデアに可能性を感じて下さった方が多いようです1。 しかしながら、 エディタとプレビューアが別なのが面倒 base64に変換するのが面倒 といった意見も多く聞かれました。 そこで思ったのです。ならばエディタを作ってしまえと。 かんたんMarkdown かんたんMarkdownは完全に単一のhtmlファイルで動作するMarkdown

知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると

祝日ですね。ぼくはいまだに無職なのであまり関係ありませんが。 どんなアプリ slim-templateで作成したメモをタグ付けして閲覧できる、ブログから日付によるカテゴライズを抜いたようなメモアプリです。 あまりにも自分用な内容のものをまとめるためにつくりました。 Memo Dock 閲覧画面 編集画面 Reduxを知った Reduxはアプリケーションの状態（State）を管理する仕組みを提供します。 Stateを保持するStore、Stateの変更を行うReducer、Stateを変更する引き金や材料を運搬するAction、を明確に分けることにより秩序をもたらします。 Storeのdispatchメソッドの引数にActionを渡すこと（Dispatching an action）により、ReducerがStore内の状態を変更するのがおおまかな流れです。 Action Actionは{}

はじめに この記事ではアロー関数とpromiseについての、使い方のまとめです。とくにpromiseに関しては、非同期処理の鉄板、async.jsとの比較をしながらその実装方法を見ていきます。 そのまえに、ECMAScript6の基本構文はこちら。 ECMAScript6の基本構文まとめ - JavaScript 技術情報のみつぶやくアカウント作成しました。ECMAScript6などの最新情報も追っていきます。 Twitter: @takeharumikami RSSはこちら Feedly: Feedlyをフォロー RSS: http://qiita.com/takeharu/feed

先日Macを再インストールするに当って、いい機会なので使ってないツールを省き使っているツールを厳選してインストールすることにした。あまり増やす気はなかったが、使うものだけ入れても73個になった。 コマンドライン ツール管理 brew-cask: HomebrewでMacアプリをインストールできる。 brew-gem: Homebrewでgemツールをインストールできる。 brew-pip: Homebrewでpipツールをインストールできる。 npm: Node.jsのパッケージ管理ツール。 DevOps ansible: Python製の構成管理ツール。Chefから乗り換え。 boot2docker: MacでDockerを使える。 packer: 仮想マシンのイメージを作るのに便利。 Git git: バージョン管理ツール。 hub: GitHubのコマンドラインクライアント。プルリク

ECMAScriptとは ECMAScriptはJavaScriptの中核仕様を抜き出して標準化したもの 開発当初のJavascriptは、ブラウザによる独自の拡張が多く、互換性が低かったため、Ecma Internationalが中心となりECMAScriptが開発された ES2015 (ES6)とは 先日策定された、ECMASCriptの6th Editionのことであり、当初はES6と呼ばれているが、正式名称をECMASCript2015(ES2015と呼ばれる)とし、今後は年単位のリリースを予定しているとのこと [公式サイト]http://www.ecma-international.org/ecma-262/6.0/index.html ES2015で可能となる新たなシンタックス let・constキーワードによる変数宣言 class構文 関数の引数のデフォルトパラメータ（Def

CoreDataはもう古い？新しいモバイルデバイス向けデータベース「Realm」を使ってみた (Swift/Objective-C)iOSCoreDataSwiftRealm 正月にSwiftでRealmを使ってみてよかったのでまとめてみました。 Realmとは Realmはモバイルデバイス向けの新しいデータベースです。実体はTightDBというC++で書かれた独自のエンジンを使用しているようで、マルチプラットフォーム化もされていてiOS/Mac OS/Android向けのSDKが公開されています。 ■Realm公式 https://realm.io CoreDataに慣れているとそんなにハマることはなかったですが、Web開発者で特にSQLゴリゴリ書いて開発するタイプの人にはちょっとハマると思ったのでよく使うSQLをベースにまとめてみました。 なお、コードはSwiftですがObjectiv

はじめに swiftはほとんど未経験ですが、SmartNews風ニュースアプリを作ってみて、その過程をさらしてみようと思います。 同じような境遇にいる方の参考になれば幸いです。 作成中のアプリ 現在の進捗はこんな感じです。投稿の方が追いつかなくなっていますが、随時追記します。。。 ソースコードはこちらに晒しています。 tjnet/NewsAppSwiftMVVM tjnet/NewsAppWithSwift: News App like Smart News 今後の予定 長くなるので、今後、何回かに分けて次のような記事を書いていこうと思います。 プロトタイプ作成 [公開しました!] swift初心者がSmartNews風ニュースアプリを作ってみる過程を晒す(2) - 横スクロールするメニューバーを実装 メニューバーの外観をSmartNewsライクなものに更新 [公開しました!] swift

Qiita の 「見逃せない投稿」 を独自に評価してランキングするサービス Qaleidospace を作りました。 本投稿では、そのようなサービスを作ろうと思った理由、投稿を評価するアルゴリズム、システム構成について書きます。 余談ですが、今なら Yearly Ranking がほぼ 2015 年の投稿ランキングとなっており、眺めていて楽しいです。 TL;DR Qiita の「見逃せない投稿」をランキングするサービス Qaleidospace を作った。 適切な評価システムがあれば、書き手も読み手もみんな幸せになれるはず。 ストック数だけで評価すると、初心者向けの投稿やキャッチーなキーワードを散りばめただけの投稿が注目されやすい。誰がストックしたのかを重視して「見逃せない投稿」を評価する。 風変わりなシステム構成: GitHub Pages でホスティング + Swift で書かれたバッ

上位のmodifierから下位のelementを上書くときに名前を省略したい ※この記事はSCSSでBEMスタイルのコーディングをすることを前提としている。 最近のSassでは、&をクラス名に使うとコンパイル後にセレクタを外出ししてくれる便利な機能がある。 // blockクラス .my-class { // デフォルトのスタイル &__body { // 本文elementのスタイル } // 強調アレンジの為のmodifierクラス &--emphasis { // ここにelement上書きのスタイルを実装(※) } }

JavaScriptのつまづきやすそうなところ 関数はオブジェクトの一種 4種類のthis 関数スコープ 非同期関数 コールバック関数 ← いまここ クロージャ プロトタイプ継承 コールバック関数とは 既に「関数の引数に関数が渡せる」ということを学びました。 これを利用して、「ある特定の処理が終わったら、引数に渡した関数の処理を実行する」といったように 処理のフローを制御することが出来ます。(というより、非同期の場合は制御する必要があります) その際、引数に渡される関数のことを「コールバック関数」といいます。 Wikipediaのコールバック (情報工学)を見る限り、同期/非同期関係無く、引数に関数を取る実装を指しているようです。 ですが、JavaScript界隈で「コールバック関数」といえば、非同期処理に関する記事が多く見受けられます。 まずは制御とか云々の前に、単純なコールバック関数の