だれも聞いていないと思って歌え

dance as if no one’s watching, sing as if no one’s listening, and live everyday as if it were your last.

「RECRUIT Technologies NIGHT vol.5」に行ってきました

3月8日にリクルートで開催された RECRUIT Technologies NIGHT vol.5 リクルート流フロントエンド開発 に行ってきました。

atnd.org

イベント概要

イベントページから引用しました。

大規模サービスを複数抱えるリクルート。そのフロントエンド開発はどのように行われ、改革されてきたのか。そしてどんな姿を目指しているのか。 現場のフロントエンドエンジニアが、リアルな開発秘話をお届けします。

参加動機

  • RECRUIT Technologies NIGHT にこれまで参加したことはなかったが、今回の講演に React Native に関する内容があったため
  • React や React Native はまだチュートリアルをやった程度で講演の内容的に多少場違いかなと思いつつ、今後のために知っておくべきキーワードを知りたかった
続きを読む

「Geek になりたい人のためのミニカンファ」に行ってきました

3月5日にMicrosoftで開催された Geek Women Japan x Microsoft - Geek になりたい人のためのミニカンファ に行ってきました。

geekwomenjapan.github.io

Geek Women Japanとは

カンファレンスページから引用しました。

Geek Women Japan は女性エンジニアの集まるカンファレンスイベント団体です。
毎年イベントとしてAdvant Calendar、New Year Party、Conferenceの全3回を開催する予定です。

「女性エンジニア」の定義
* 「女性」とは … 「自分は女性である」と思っている全ての方
* 「エンジニア」とは … IT技術を楽しんでいる、勉強を始めようと思っている、技術に対して向上心のある、技術をたしなんでいるすべての方
* 「女性エンジニアとは」 … 技術をたしなんでいる、自分は女性であると思っているすべての方

参加の動機

  • Geek になりたい人のためのミニカンファ」というイベントタイトル自体に興味を持った
  • ○○女子部のように使用言語を問わない、女性向けの規模の大きいイベントに以前から興味があった
  • 客先でも女性技術者が少ないため、横の繋がりを増やしたかった
続きを読む

Hello World

Hatena Blog 始めました。

プログラマなので技術のことを中心に、月に数回くらい記事を書いていくのが今の目標です。
アウトプットしないのは知的な何とかと言いますし。

簡単に自己紹介をすると、
3年前にPHPを始めてWebプログラミングを始めました。学生の頃はプログラミングは勉強していて、前職では組み込みなど(主にテスター・デバッガーとして)をやっていました。
最近は以前から強く興味のあったJavaScript関連についてよく勉強してます。
フロントエンド見習い(自称)です。

最後に、タイトルにした だれも聞いていないと思って歌えアイルランドのことわざから拝借しました。
自分に足りないものかなと思って、一つの目標として。

Dance as if no one’s watching, sing as if no one’s listening, and live everyday as if it were your last.
だれも見ていないと思って踊れ。だれも聞いていないと思って歌え。あなたが最後の人だと思って、生きろ。
http://rainbowkids.sakura.ne.jp/eigodemeigen.html

広告を非表示にする

webpack を v1 から v2 へ更新してみた

webpack はまだ勉強できていないですが、
webpack 2 が正式リリースされ、更新する機会があったのでその時のメモです。

webpack とは

webpack は WebApp に必要なリソースの依存関係を解決し、アセット(配布物)を生成するビルドツール(要するにコンパイラ)です。
JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。
WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした(少なくとも、自分はそうでした)。
webpack を使えば、Grunt も Gulp も必要ありません!覚えるべきことはほとんどありません。(必要なら)簡単な設定ファイルを書いて webpack コマンドを実行するだけです。
引用: webpack で始めるイマドキのフロントエンド開発 - Qiita

webpack.js.org

参考にしました

webpack-strem を使っていて、 webpack-stream が v2 に対応していないため、新機能の tree-shaking 周りはまだ全く触れていません。

webpack.js.org

stackoverflow.com

また、こちらの記事に変更点などが要約されています。

yosuke-furukawa.hatenablog.com

その他

DedupePlugin

参考サイトを元に修正後、 webpack を実行すると DedupePlugin でエラーが発生しました。 公式ページ内では特に明記されていなかったですが、 Qiita の記事で少し言及されていました。

また、 OccurenceOrderPluginの名前がv2からはOccurrenceOrderPluginに変更、 DedupePluginがなくなるなどがあります。 詳しくはwebpack/releasesのBreaking Changesを探すとわかると思います。

qiita.com

webpack/releases に書かれていることは確認できませんでしたが、 GitHub Issues に経緯などが書かれていました。

github.com

これらを参考に、 DedupePlugin の記述を削除したらエラーが無事取れました!

しかし、コンパイラ後のファイルサイズが大きくなっているものも多く、効果はまだあまり見えていません。。

DeprecationWarning

./node_modules のフォルダを消して、 npm install を実行し直したところ次のような警告が表示されました。

(node:34505) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

こちらも GitHub Issues に記述がありました。

github.com

どうやら、これは ts-loader などの loader 開発者のための警告だそうです。 webpack2 への移行に伴い仕様が一部変更になり、非推奨となった部分に関して警告が表示されているようです。 (英語の読解力に自信が無いので、ふわっとだけ認識してもらえると助かります)

issue にも書かれていますが( この辺り )、 webpack.js に process.noDeprecation = true; を設定することで警告は除去できました。 ただし、確認するべき警告まで表示されなくなってしまうことを懸念して、業務ではこの設定を行うことはやめました。

今年読んだ本を振り返る(2016)

大晦日なので、久々に今年一年間に読んだ本をまとめてみました。 技術本を記録していないので、小説のみです。また、一冊一冊紹介したいのですが、文量がひどく多くなってしまうので月ごと簡単にまとめました。

続きを読む

技術書の歩き方勉強会「達人プログラマー」編 に行ってきました

11月21日にSpeeさんで開催された技術書の歩き方「達人プログラマー」編に行ってきました。

『達人プログラマー』とは

原著『Pragmatic Programmer, The: From Journeyman to Master』は1999年に出版され、日本では2000年に翻訳されて出版されました。
しばらく絶版となっていたそうですが、今年の10月25日にオーム社から復刊されました。

この本は、ソフトウェア開発の名著として紹介されていることがあるため、タイトルは知っていました。

企画について

以下、connpassからの引用です。

概要

オーム社さんから復刊された『新装版 達人プログラマー 職人から名匠への道』を勝手に応援する企画です。 古典である『達人プログラマー』を今の私たちはどう読んだらいいか、なにを受け取れるか、自分の仕事/キャリアにどう活かしていけるのかといったことについて、お話しする場にできればと思っています。

こんな方におすすめ

プログラマ・ソフトウェア開発者として成長の手引きが欲しいなと感じている方 会社の先輩などから技術書の古典を「読んどけ」と渡されるけれど、うまく読めなくて困っている方 『達人プログラマー』、なんとなく気になっているけれど手を出せていない方 『達人プログラマー』の復刊を応援/お祝いしたい方

『達人プログラマー』というタイトルは知っていても、古典であるというイメージと、初心者が読んでも理解できなさそう・難しそうという思いから手を出せていませんでした。
また、「プログラマ・ソフトウェア開発者として成長の手引きが欲しいなと感じている方」に当てはまったため参加を決めました。

続きを読む

配列の操作(forEach,map,filter,find,some,every)について

何となくで使うのではなく、しっかりと理解しようと思い改めて整理しました。

Array.prototype.forEach()

forEach は、全ての要素に対して関数を一度ずつ実行する。
mapfilter とは異なり新しい配列は生成しない。

// 配列の要素の合計を計算する
let sum = 0;
const elms = [10, 20, 30, 40];
elms.forEach(elm => {
  sum += elm;
});

console.log(sum);
> 100

Array.prototype.forEach() - JavaScript | MDN

Array.prototype.map()

map は、全ての要素に対して関数を一度ずつ実行し、返り値(return)からなる新しい配列を生成する。
filter とは異なり、実行対象となる配列の数(before)と、新たに生成された配列の数(after)は変わらない。
また、生成された配列の値には関数実行時の返り値(return)が格納される。

// 配列の全ての要素に10を乗算した配列を返す
const before = [10, 20, 30, 40];
const after = before.map(elm => {
  return elm * 10;
});

console.log(before);
> [10, 20, 30, 40]
console.log(after);
> [100, 200, 300, 400]

Array.prototype.map() - JavaScript | MDN

Array.prototype.filter()

filter は、全ての要素に対して関数を一度ずつ実行し、戻り値(return)で true を返した要素からなる新しい配列を生成する。
map とは異なり true を返した要素のみの配列を返し、生成された配列の値には実行時の要素の値が格納される。

// 配列の要素が20で割り切れるものだけを抽出する
const before = [10, 20, 30, 40];
const after = before.filter(elm => {
  return ((elm % 20) === 0);
});

console.log(after);
> [20, 40]

Array.prototype.filter() - JavaScript | MDN

Array.prototype.find()

find は、 true を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
true を返した要素の値を返す。

// 配列の要素が20で割り切れるものだけを抽出する
const before = [10, 20, 30, 40];
const after = before.filter(elm => {
  return ((elm % 20) === 0);
});

console.log(after);
> 20

Array.prototype.find() - JavaScript | MDN

Array.prototype.some()

some は、 true を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
true を返す要素が見つかると、 true を返す。

// 要素に一つでも20以上の値があればtrueを返す
const elms = [10, 20, 30, 40];
const retVal = elms.some(elm => {
 console.log(elm);
 return (elm >= 20);
});
> 10
> 20

console.log(retVal);
> true

Array.prototype.some() - JavaScript | MDN

Array.prototype.every()

every は、false を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
false を返す要素が見つかると、 false を返す。

// 要素に一つでも20以下の値があればfalseを返す
const elms = [40, 30, 20, 10];
const retVal = elms.every(elm => {
 console.log(elm);
 return (elm > 20);
});
> 40
> 30
> 20

console.log(retVal);
> false

Array.prototype.every() - JavaScript | MDN

スプレッド演算子(spread operator)について

上記では配列に対しての操作を例に出しましたが、スプレッド演算子を使うことで配列以外のオブジェクトも同様に処理することが可能となります。

例えば、下記のようなHTML文書のリスト要素からテキストのみの配列を作成しようとする場合はこのようになります。

<div class="sample">
  <ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
  </ul>
</div>
const elms = document.querySelectorAll('.sample li');
const retVal = [...elms].map(elm => {
 return elm.textContent;
});

console.log(retVal);
> ["list1", "list2", "list3"]

詳しい使い方は Mozilla Developer Network を参照してください。