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

はじめに こんにちは。皆さんはReact使われてますでしょうか？ 今回はReactとFluxについて書きます。 MVCの問題点 詳しくはこちらに書いていますが、MVCでアプリを作った場合は、ModelとViewの間で双方向のデーターフローが作られる可能性があるので理解したりデバックするのが難しくなります。 React単体で使った場合の問題点 子のViewでなにかアクションを起こした結果、親のViewにも変更を伝えてなににかをする場合、子のViewに親のViewのコールバック関数を渡す必要があります。 子のViewの下にさらに、子のViewがあって、アクションが起こった時に親のViewに伝えようとするとコールバックが深くなって複雑になってしまいます。 Flux それを解決できる方法としてFluxです。 Fluxを使うとデーターフローが一方向になります。 やってることはObserverパターン

最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく

５：３０ 意識低い系サラリーマンの朝は早い。 稼ぎが悪いために会社から遠い場所にしか住めず、早起きを強制される。 ６：３０ 家を出る時間。 たいていは子どもたちが起きる前に出かけるが、たまに子どもたちが早く起きると「お父さんいる」→「今日は休みなんだ」→「遊んでもらえる」という思考パターンになり、まとわりつかれる。ごめんよ、お父さんだって働きたくないけど君たちのご飯代稼ぐためには行かなけりゃいけないんだよ・・・ ７：３０ 通勤電車内。 Twitterやブログを眺めつつの出勤。最近はネットにもリア充が多い。リア充はネットで戯れなくても可愛い彼女とキャッキャウフフと戯れていればいいんだ。 不覚にも笑ってしまったブログ記事にコメントをつける。「（リア充爆発しろ）ワロタ、面白いですｗ」と。本音と建前大事、社会人だもの。 ８：３０ 出社。 出社早々すでに帰りたい。 ９：００ 朝から会議とかないわー・

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今は数多くの静的サイトジェネレータがありますが、実装言語が違っていたりコンセプトが違うことで選択の余地があります。感覚的にRubyやnodeで作られたジェネレータが多いですが、言語に慣れていない方も多いでしょう。 そこで今回はPHP製の静的サイトジェネレータ、Sculpinを紹介します。PHPが好みの方は使ってみてはどうでしょう。 Sculpinの使い方 Sculpinのインストールは下記のように行います。 curl -O https://download.sculpin.io/sculpin.phar chmod +x sculpin.phar mv sculpin.phar /usr/local/bin/sculpin 次にベースになるGitリポジトリを取り込みます。 cd ~

TL;DR GitHub issueとpull requestのやるやらないを、すばやく振り分けていくためのデス クトップアプリ “Triage for GitHub“を作りました。 GitHubのIssue, Pull Requestを迅速にさばいていくことが出来ます。 Motivation Dependency Update as a Service – Tachikoma.io, greenkeeper, deppbot – Automated Dependency Updates を使うことで、ガンガンpull requestを飛ばし、CIやカバレッジなど、GitHubのエコシステムに乗ることが出来るようになりました。 (tachikoma.io 使ってね!) ただし、数が増えるとpull requestを持て余します。見逃すこともしょっちゅう。 特に定期ping的に空pull r

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.

ES2017 async/await と Promise を使うと非同期処理をすごく簡単に処理できる。 とても便利なのだが、それだけでは、どうも機能が足りない様に見える。 この記事は... TL;DR ES2017 async/await を使っても、まだいろいろと課題は残ってるよ。 ES2015 (ES6) generators と npm aa (async-await) だと、より良い解決策があるよ。って話。 以下の図の様な非同期処理フローを考えてみる。 横軸は時間だ。左から右へ時間が流れていくものと考えて欲しい。 縦線は複数の処理を同期させたい、という意味だ。 ES2017 async/await 版のコード例を見てみよう。 'use strict'; //require('babel-polyfill'); // おまじない //require('regenerator').ru

2012/7/13開催の 「AzureとAWSをクラウド女子部が語る！クラウド勉強会 in 福岡」 http://atnd.org/events/30235 の資料です。 AWSに関するお問い合わせ：https://www.serverworks.co.jp/contact/ サーバーワークスエンジニアブログ：http://blog.serverworks.co.jp/tech/

プロデューサーのみなさんこんにちは。 実はこっそり活動していた執筆活動が実を結ぶ事に相成りました。その名も「Amazon Web Services実践入門」です。 Amazon Web Services実践入門 (WEB+DB PRESS plus) 作者: 舘岡守,今井智明,永淵恭子,間瀬哲也,三浦悟,柳瀬任章出版社/メーカー: 技術評論社発売日: 2015/11/02メディア: 単行本（ソフトカバー）この商品を含むブログを見る 電子書籍はこちらです↓gihyo.jp id:okochang さんのブログでも紹介されていますが、今回は6名のメンバーによる共著という形で書店に並ぶ事になります。okochang.hatenablog.jp 僭越ながら著者の代表として本書の「はじめに」と「謝辞」を書いちゃっているので是非読んで下さいませ。 本の内容 id:okochang さんも書いていますが

テクノロジーの進化によってだいぶ楽になったとはいえ、ウェブサイトの作成はやはり、そうそう簡単にできるものではない。 プログラミングの知識はもちろん、配色やバランスなど、美しく見せるためのテクニックは必要不可欠。それなりの技術を持つ人間が手がけるというのが、従来の常識だ。 しかし、大手ならともかく中小やベンチャーでそうした人材を確保するのは、なかなか難しい。素人でも手軽にできる方法があれば、と望んでしまうのは当然である。 ・ドラッグ&ドロップで簡単にウェブ制作 そんなお悩みを解決するのが、ウェブサイトビルダー「weluka（ウェルカ）」である。プログラミングレスで簡単にウェブサイト・ホームページ制作ができる、デジタル時代の救世主のようなツールだ。 「weluka」は、WordPressのプラグインとして動作するヴィジュアルエディターを中心に、同ソフトでは難しかったヘッダー・フッターのデザイン

「PHP 7」登場。10年ぶりのメジャーバージョンアップで実行速度はPHP 5の2倍以上に、PHPの生みの親が語る。PHPカンファレンス2015（前編） WordpressやFacebookなど、Webのさまざまなサービスで使われているPHP言語。約10年ぶりのメジャーバージョンアップとなる「PHP 7」がもうすぐ登場予定です。 PHP 7では互換性を維持しつつ、従来のPHP 5と比べて2倍以上の性能向上やメモリ使用量を低減するなど、大きな改善が実現されます。 そのPHPの生みの親であるRasmus Lerdorf氏が来日し、10月3日に都内で行われた「PHPカンファレンス2015」の基調講演「SPEEDING UP THE WEB WITH PHP 7」においてPHP7の新機能や性能について詳しく解説しました。 その内容をダイジェストで紹介しましょう。 SPEEDING UP THE W

こんにちは。Sales Systemチームの金子です。Sales Systemチームでは、cybozu.com Store　や、販売管理システム等の開発をしています。 このエントリでは、cybozu.com 稼働状況のフロントエンドをReact/Reduxで作り直した話を書いていきます。「React/ReduxでWebアプリケーションを作ってみようと考えている人」を対象としています。 TOC 「cybozu.com 稼働状況」とは? 作り直した背景 技術概要 React/Fluxについて React/Redux Routing Resources Async Multilingualization/Localization ES6 Utility Lint Testing 取り組んでみた感想 まとめ 「cybozu.com 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス

リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区

女子中学生が自転車で夜道を塾通いするのが心配という方へ 女子中学生が夜遅くまで自転車で塾に通うことは、心配事が尽きません。 夜道を走る際の危険性、事故のリスク、そして犯罪被害に遭う可能性など、多くの問題が存在します。 しかし、塾通いが成績アップにつながるため、親御さんたちはどうしてもこの方法を選ばざるを得ない場合もあるかもしれません。 そこで本記事では、女子中学生が自転車で夜道を通う際の危険性と対策について解説します。 また、通塾なしでも成績アップができる方法をご紹介します。 この記事はこのような方へ向けて書かれています 女子中学生を持つ親御さん 塾に通っている女子中学生 これから塾に通うか考え中の方 自転車通学をしている中学生 青少年の安全に関心のある方 この記事を読むことで得られるメリット 女子中学生が自転車で夜道を通って塾に通うことが減れば、次のような多くのメリットが得られます。 交

Supershipになります 株式会社nanapiというものを2009年6月くらいからやっていたのですが、2015年11月1日をもって、Scaleout、Bitcellerと3社で合併して、Supership株式会社という会社に生まれ変わりました。 2007年12月くらいから、株式会社ロケットスタートとしてやっていて、2009年6月くらいから、本格的にスタートして、2009年9月にnanapi.jpをリリースして、2012年4月くらいに株式会社nanapiになり、2014年10月から、KDDIグループ入りしたりと、いろいろなステージがありました。 そんな中、今までの出来事で一番のインパクトが自分自身にあって、それは何でだろうと思ったのですが、ざっくりいって「僕が代表取締役の法人」としては一つの区切りになったからではないかと思いました。 そんなこんなで、11月1日から、心境的にも体制的にも、