3月8日にリクルートで開催された RECRUIT Technologies NIGHT vol.5 リクルート流フロントエンド開発 に行ってきました。
イベントページから引用しました。
大規模サービスを複数抱えるリクルート。そのフロントエンド開発はどのように行われ、改革されてきたのか。そしてどんな姿を目指しているのか。 現場のフロントエンドエンジニアが、リアルな開発秘話をお届けします。
3月5日にMicrosoftで開催された Geek Women Japan x Microsoft - Geek になりたい人のためのミニカンファ に行ってきました。
カンファレンスページから引用しました。
Geek Women Japan は女性エンジニアの集まるカンファレンスイベント団体です。
毎年イベントとしてAdvant Calendar、New Year Party、Conferenceの全3回を開催する予定です。「女性エンジニア」の定義
* 「女性」とは … 「自分は女性である」と思っている全ての方
* 「エンジニア」とは … IT技術を楽しんでいる、勉強を始めようと思っている、技術に対して向上心のある、技術をたしなんでいるすべての方
* 「女性エンジニアとは」 … 技術をたしなんでいる、自分は女性であると思っているすべての方
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 はまだ勉強できていないですが、
webpack 2 が正式リリースされ、更新する機会があったのでその時のメモです。
webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。
JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。
WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。
webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。
引用: webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack-strem を使っていて、 webpack-stream が v2 に対応していないため、新機能の tree-shaking 周りはまだ全く触れていません。
また、こちらの記事に変更点などが要約されています。
yosuke-furukawa.hatenablog.com
参考サイトを元に修正後、 webpack を実行すると DedupePlugin でエラーが発生しました。
公式ページ内では特に明記されていなかったですが、 Qiita の記事で少し言及されていました。
また、 OccurenceOrderPluginの名前がv2からはOccurrenceOrderPluginに変更、 DedupePluginがなくなるなどがあります。 詳しくはwebpack/releasesのBreaking Changesを探すとわかると思います。
webpack/releases に書かれていることは確認できませんでしたが、 GitHub Issues に経緯などが書かれていました。
これらを参考に、 DedupePlugin の記述を削除したらエラーが無事取れました！
しかし、コンパイラ後のファイルサイズが大きくなっているものも多く、効果はまだあまり見えていません。。
./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 に記述がありました。
どうやら、これは ts-loader などの loader 開発者のための警告だそうです。 webpack2 への移行に伴い仕様が一部変更になり、非推奨となった部分に関して警告が表示されているようです。 (英語の読解力に自信が無いので、ふわっとだけ認識してもらえると助かります)
issue にも書かれていますが( この辺り )、 webpack.js に process.noDeprecation = true; を設定することで警告は除去できました。
ただし、確認するべき警告まで表示されなくなってしまうことを懸念して、業務ではこの設定を行うことはやめました。
大晦日なので、久々に今年一年間に読んだ本をまとめてみました。 技術本を記録していないので、小説のみです。また、一冊一冊紹介したいのですが、文量がひどく多くなってしまうので月ごと簡単にまとめました。
続きを読む11月21日にSpeeさんで開催された技術書の歩き方「達人プログラマー」編に行ってきました。
原著『Pragmatic Programmer, The: From Journeyman to Master』は1999年に出版され、日本では2000年に翻訳されて出版されました。
しばらく絶版となっていたそうですが、今年の10月25日にオーム社から復刊されました。
この本は、ソフトウェア開発の名著として紹介されていることがあるため、タイトルは知っていました。
以下、connpassからの引用です。
概要
オーム社さんから復刊された『新装版 達人プログラマー 職人から名匠への道』を勝手に応援する企画です。 古典である『達人プログラマー』を今の私たちはどう読んだらいいか、なにを受け取れるか、自分の仕事/キャリアにどう活かしていけるのかといったことについて、お話しする場にできればと思っています。
こんな方におすすめ
プログラマ・ソフトウェア開発者として成長の手引きが欲しいなと感じている方 会社の先輩などから技術書の古典を「読んどけ」と渡されるけれど、うまく読めなくて困っている方 『達人プログラマー』、なんとなく気になっているけれど手を出せていない方 『達人プログラマー』の復刊を応援/お祝いしたい方
『達人プログラマー』というタイトルは知っていても、古典であるというイメージと、初心者が読んでも理解できなさそう・難しそうという思いから手を出せていませんでした。
また、「プログラマ・ソフトウェア開発者として成長の手引きが欲しいなと感じている方」に当てはまったため参加を決めました。
何となくで使うのではなく、しっかりと理解しようと思い改めて整理しました。
forEach は、全ての要素に対して関数を一度ずつ実行する。
map や filter とは異なり新しい配列は生成しない。
// 配列の要素の合計を計算する
let sum = 0;
const list = [10, 20, 30, 40];
list.forEach(param => {
sum += param;
});
console.log(sum);
> 100
Array.prototype.forEach() - JavaScript | MDN
map は、全ての要素に対して関数を一度ずつ実行し、返り値(return)からなる新しい配列を生成する。
filter とは異なり、実行対象となる配列の数(before)と、新たに生成された配列の数(after)は変わらない。
また、生成された配列の値には関数実行時の返り値(return)が格納される。
// 配列の全ての要素に10を乗算した配列を返す
const before = [10, 20, 30, 40];
const after = before.map(param => {
return param * 10;
});
console.log(before);
> [10, 20, 30, 40]
console.log(after);
> [100, 200, 300, 400]
Array.prototype.map() - JavaScript | MDN
filter は、全ての要素に対して関数を一度ずつ実行し、戻り値(return)で true を返した要素からなる新しい配列を生成する。
map とは異なり true を返した要素のみの配列を返し、生成された配列の値には実行時の要素の値が格納される。
// 配列の要素が20で割り切れるものだけを抽出する
const before = [10, 20, 30, 40];
const after = before.filter(param => {
return ((param % 20) === 0);
});
console.log(after);
> [20, 40]
Array.prototype.filter() - JavaScript | MDN
find は、 true を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
true を返した要素の値を返す。
// 配列の要素が20で割り切れるものだけを抽出する
const before = [10, 20, 30, 40];
const after = before.filter(param => {
return ((param % 20) === 0);
});
console.log(after);
> 20
Array.prototype.find() - JavaScript | MDN
some は、 true を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
true を返す要素が見つかると、 true を返す。
// 要素に一つでも20以上の値があればtrueを返す
const list = [10, 20, 30, 40];
const retVal = list.some(param => {
console.log(param);
return (param >= 20);
});
> 10
> 20
console.log(retVal);
> true
Array.prototype.some() - JavaScript | MDN
every は、false を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
false を返す要素が見つかると、 false を返す。
// 要素に一つでも20以下の値があればfalseを返す
const list = [40, 30, 20, 10];
const retVal = list.every(param => {
console.log(param);
return (param > 20);
});
> 40
> 30
> 20
console.log(retVal);
> false
Array.prototype.every() - JavaScript | MDN
上記では配列に対しての操作を例に出しましたが、スプレッド演算子を使うことで配列以外のオブジェクトも同様に処理することが可能となります。
例えば、下記のような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 を参照してください。
