読者です 読者をやめる 読者になる 読者になる

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

モダンWeb開発におけるVSCode活用TIPS

speakerdeck.com

VSCode のおさらい

  • Visual Studio Code、略称はVSCode
  • Electron製(HTML/CSS/JavaScriptでView開発している)
  • 毎月定期的なアップデートがある
  • エディタの起動・動作が軽快(Eclipseと違って起動後にトイレに行く暇もない)
  • 拡張機能自体もJavaScriptで作成可能

基本的な使い方

  • 2つのファイルの差分を表示できる(少し使いにくい)
  • Gitの基本的な機能(add/commit/push/pull等)や、Nodeアプリ・Webアプリのデバッグを行うことができる
  • 統合ターミナルを備えているため、コンパイル含めてVSCode内で全て完結する

カスタマイズTIPS

  • PJメンバー間で共有したい設定は、 .vscode/settings.json に定義し共有できる
  • PJメンバー間で共有したい拡張機能リストは、 .vscode/extensions.json に定義し共有できる
    • 共有してもらったメンバーは、VSCode内でリストを取得できるためポチポチとインストールするだけ

ユーザー設定の紹介

  • 空白文字を表示する( editor.renderWhitespace )
  • ファイルの自動保存( files.autoSave )
  • 保存時のコード整形( editor.formatOnSave )
  • 統合ターミナルの端末差し替え( terminal.integrated.shell.windows )

おすすめの拡張機能の紹介

  • ESLint
  • TSLint
  • beautify
  • change-case
  • Git Project Manager
  • Debugger for Chrome
  • FileNameComplete
  • HTTP/s and relative link checker

AIを簡単に使える時代がやってきた!開発者のためのAI活用入門

docs.com

機械学習(ML)とは

  • Machine Learning
  • 過去のデータの傾向から未来を予測
  • 関連性の高い情報出す(レコメンド)

人工知能(AI)とは

  • Artificial Intelligence
  • 過去のデータを元に、新しいデータを入れた時の傾向を予測させる
  • AIを支える技術:機械学習、深層学習、強化学習

AIの分類

  • 弱いAI
    • 一分野だけに強い(将棋など)
  • 強いAI

これからも Geek な女性であるために - Sheryl Sandberg が教えてくれた3つの事 -

  • Sheryl Sandbergとは、世界で最もパワフルな女性ランキングでミシェル・オバマよりも上にランクインした女性
  • LEAN IN とはそんな彼女が著した、女性のキャリアについて語った本
  • この業界は、女性が少ないためロールモデルがいない。60歳まで働くイメージがわかない。

どうするべきか

  • 自信を持つこと
    • 女性は、男性と比べて自分の能力を低く見がちというデータがある
    • インポスター症候群(良いことは偶然、悪いことは自分のせいと考える)、成功と失敗の誤った認識
  • 「パートナー」を「本当のパートナー」にする
    • 今の時代、女性は守られなくても大丈夫(男性が弱い女性に惹かれるのは、生物学的に論理的に見ると仕方ない)
    • 守ってくれる人じゃなくて、助け合える人!
    • ただ、「家庭」というと女性の役割となりがち・・・

職場の話

  • 「キャリア」と「結婚」の話は切り離せない
    • 辞めないのも手段
    • 妊娠を機にやめてしまう女性は7割以上
  • 職場復帰しても、満足できない女性が多い
    • 以前の仕事と比較してやりがいのない仕事になりがち
    • 技術が変わらない仕事ではキャリアアップできない、時間を作るのは難しい
  • 妊娠は転職・新しい技術を学ぶ良い期間でもある、そしてその期間のプランを考える!
    • ……ただし、文化などの背景もあるため単純な問題ではないため、簡単には解決はしない

結局ルールは、人を変えられない

  • 問題に対して考える、そこを解決しようとすることが大事
  • Let’s Lean I

他の部屋でも色々な発表やハンズオンがあり、公開されているスライドはこちらにまとめられてます。

eventdots.jp

共感する話から、どういう活動・開発をしたかなどもあり大変楽しい時間でした!
また、言語不問という事もあって、普段よりも幅広いジャンルの方と交流する機会にもなって参加して良かったです。

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 へ更新してみた

JavaScript

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

webpack とは

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

参考にしました

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

Migrating from v1 to v2 - webpack Using webpack 2 from gulp (webpack-stream for webpack 2)? - Stack Overflow

また、こちらの記事の、 webpack2 移行時の注意 で変更点などが要約されているので、ざっくりと理解できるかと思います。

その他

DedupePlugin

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

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

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

これらを参考に、 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.

関連する issue はこちら。 https://github.com/webpack/loader-utils/issues/56

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

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


[2/28] DeprecationWarning について追記しました。

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

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

4月

4月から急に読書熱が再燃したため、3月までは紹介なしです。

2010年に亡くなった北森鴻さんの遺作を、公私にわたるパートナーだった浅野里沙子さんが書き上げた蓮丈那智フィールドファイルの「邪馬台」「天鬼越」をやっと手に取りました。 とても好きなシリーズだったので、もう読めないと思っていたのに亡くなってから二冊も刊行されたのはとても嬉しかったです。けれど、これでもう本当に続きは読めない、という悲しみも。

5月

4月の「20の短編小説」に引き続きアンソロジーばかりに。「20の短編小説」は面白かった作品、そうではなかったもの多くありましたが、「和菓子のアンソロジー」「時の罠」はどれも面白かったです。

6月

ホラーはあまり得意ではないので避けていましたが、会社上司から勧められて残穢を読みました。結果、とても面白かったです。読んでいてぞくぞくするのは、さすがでした。

8月

花咲小路シリーズも読んでいていたように、小路幸也さんは好きな作家の一人です。戦争をテーマにしたものですが、とても暖かく優しい作品でした。

9月

映画「君の名は。」を読んで残された疑問を解消したく、小説版と小説外伝版を読みました。ほとんど明かされなかった母親の話が一番好きかもしれない。

10月

好きな作家だったこともあり、可愛らしい表紙から全く予測できないほどの読むのが辛い小説でした。人に薦めるにはとても躊躇するけれど、面白く読ませてもらいました。 思うのは、辻村深月さんは登場人物たちの心理描写を全て想像で書いているのだろうか。それほどに丁寧。

11月

人から勧められて読んだ「探偵の鑑定」。「探偵の探偵」や「万能鑑定士Q」のシリーズを全く読まずにいきなり読んでしまったのを後から公開したけれど、面白かったです。 ただ、それぞれのシリーズの登場人物が大勢出てくるので、ちゃんと順番通り読んだ方が面白かったのだろうと思います。

12月

神様の御用人シリーズは、「人が死なない安心して読める本」をリクエストしたところ同僚から貸してもらった本。 現代語訳古事記を読む程度には日本の神話はそれなりに好きなので、知っている話も知らない話も新しい側面から描き出していてとても面白かったです。


計27冊。 来年は技術書もしっかり読んでいきたいので同じ量は読めないかも知れないけれども、色んな本を読んでいきたい。 家や職場近くに図書館があるって素晴らしい。

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

勉強会

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

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

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

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

企画について

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

概要

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

こんな方におすすめ

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

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

達人プログラマーと私 @諸橋恭介

『Rails3 レシピブック190の技』、『はじめる!Cucumber』の著者であるRubyプログラマー。 初めて読んだ技術書の紹介に始まり、どういった時期にどんな本を読んでいったかを紹介していて、とても面白かったです。

などなど、本当にたくさんの本を紹介していました。

初めて『達人プログラマー』を読んだときは、「こういうふうにやれたらいいな」という夢だったが、転職した先で読んだ内容を実際にやっていて感動したそうです。
そうして再び読み直したとき、現実として「自動化」や「リファクタリング」をやっているかを突きつけられるようで読むのが辛かったそうです。

最初の頃に読んだ本はしっかり理解できていなかった、という経験談が心強かったです。

でもあんまり深刻に受け止めすぎないで。楽しみながらやっていこう by アジャイルサムライ

あなたの知識ポートフォリオについて @mochico

技術系同人サークルTechboosterでの執筆、DroidKaigi、技術書典の運営も行うAndroidエンジニア。 『達人プログラマー』の第1章第5節「あなたの知識ポートフォリオ」についての内容でした。

この節には、「知識と経験は期限付きの資産」であるということ、「勉強し続けないとエンジニアとしてやっていけないよ」といった内容が書かれているそうです。 そのための手段として、四半期ごとに技術書を読む、年に一度新しい言語を学ぶ、ということを併せて紹介しているそうです。年に一度新しい言語を学ぶことを勧めているのは、メインに使っている言語以外を学ぶことで他の言語との違いを知るなどの比較ができるようになる、ということだそうです。

ただ、技術書を一人で頭から最後まで読むのはなかなかつらいということで、読書会へ参加した経験を紹介していました。一週間に一章読んで、リモート読書会をして読んで分からなかった箇所を相談したり質問したりして「分かったつもり」を防いでいくんだそうです。
技術系の読書会があることは知っていましたが、こういったメリットがあることは知りませんでした。

そして、読むだけではなくアウトプットをしようということで、技術系ブログ、Qiitaへの投稿、GitHubでのプログラムの公開をするといいよということが語られていました。

トークセッション @高橋征義、諸橋恭介、mochico

上にも書きましたが、この『達人プログラマー』が書かれたのは17年前で、インターネットも当たり前ではない時代だったそうです。そういった背景があるため、内容には現代との違いが当然ある。後半部分は時代が違うために適用できない考え方もあるのだそうです。 新装版ではそういった時代背景の注釈が付いているが、このことを念頭に置いて読む必要があるとのことです。

「技術書を全部一気に読んで十全に理解するのは難しい」 「全てをきちんと理解しなくても良い」 「全部が全部正しいと思わないほうが良い」

諸橋さんのトークに通じる話ですが、その時理解できなかったとしても、再び読み返すことで理解出来るようになったり感じ方が変わってくるので繰り返し読むことも勧めていました。

上記以外のことについても色々とトークをしていましたが、この内容が一番この会に参加してよかった!と思えるものでした。 技術書を読む際に「理解しなきゃ!」と構えていてなかなか読み進められていなかった私にとって、これらの発言は技術書を読む心構えとして幾分気が楽になりました。

技術書を読もうと思っている人がいたら、その後押しになるのではないかと思いシェアしました。

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

JavaScript

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

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 を参照してください。

document.querySelector と document.querySelectorAll について

JavaScript

仕事でよく使っているけど、ちゃんと理解できていなかったので改めて調べてみました。

document.querySelector と document.querySelectorAll

document.querySelectordocument.querySelectorAll とは W3C によって定義された Selectors API の仕様です。 jQuery のようにセレクターを指定して、要素を取得できるメソッドです。

  • document.querySelector … 指定された CSS セレクタにマッチする文書中の最初の要素を返す。
  • document.querySelectorAll … 指定された CSS セレクタにマッチする文書中の要素の全てのリストを返す。

また、同様に文書中の要素を取得するメソッドとして下記があります。

  • document.getElementById … 指定されたIDを持つ要素を返す。
  • document.getElementsByClassName … 指定されたクラス名を持つ要素のリストを返す。

下記のHTML文書を例に、これらの違いについてまとめます。

<div class="news-box">
  <h2>NEWS</h2>
  <ul>
    <li class="news">news title 1</li>
    <li>topic title 2</li>
    <li class="news">news title 3</li>
  </ul>
</div>
<div class="articles-box">
  <h2>ARTICLES</h2>
  <ul>
    <li class="article">article list 1</li>
    <li>article list 2</li>
  </ul>
</div>

要素を一件だけ取得する

NEWSのnewsクラスではないリストの先頭の取得する場合、以下は同じ結果を取得することができます。 document.querySelector を使わない場合、一行で書く方法が分かりませんでした・・・

const elements = document.getElementsByClassName('news-box')[0].getElementsByTagName('li');
let elm = [];
for(var i = 0; i < elements.length; i++) {
  if(elements[i].className !== 'news') {
    elm.push(elements[i]);
  }
}
const element = elm[0];

> <li class="news">news title 1</li>
document.querySelector('.news-box li:not(.news)');

> <li class="news">news title 1</li>

ただし、単発のIDセレクタを指定する場合は document.getElementById の方が高速になります。

要素のリストを取得する

NEWSのnewsクラスのリストを取得する場合、以下は同じ結果を取得することができます。

document.getElementsByClassName('news-box')[0].getElementsByClassName('news');

> [<li class=​"news">​news title 1​</li>​, <li class=​"news">​news title 3​</li>​]
document.querySelectorAll('.news-box .news');

> [<li class=​"news">​news title 1​</li>​, <li class=​"news">​news title 3​</li>​]

こちらも、単発のクラス名を指定する場合は document.getElementsByClassName の方が高速になります。

引数に配列を指定する

ちなみに、引数には配列が指定可能で、 NEWSのnewsクラスのリスト と ARTICLESのarticleクラスのリスト のみを取得することができます。

document.querySelectorAll(['.news-box li.news', '.articles-box li:article']);

> [<li class=​"news">​news title 1​</li>​, <li class=​"news">​news title 3​</li>​, <li class=​"article">​article list 1​</li>​]

CSS セレクタ

これを知っておくと便利だなと思ったものについてまとめました。

:not()

上記例で使っていますが、引数で指定したセレクターの要素を除外します。

document.querySelectorAll('.news-box li:not(.news)');

> [<li>​topic title 2​</li>​]

:first-child, :last-child

:first-child では最初の子要素を取得します。

document.querySelectorAll('.news-box li:first-child');

> [<li class=​"news">​news title 1​</li>​]

ただし、 document.querySelectorAll('.news-box li:not(.news):first-child')擬似クラスを複数組み合わせて使用することはできません(後述します。)

:last-child は最後の子要素を取得できます。

document.querySelectorAll('.news-box li:last-child');

> [<li class=​"news">​news title 3​</li>​]

:nth-child(), :nth-last-child()

引数には子要素のn番目、偶数(even)、奇数(odd)などが指定可能です。

document.querySelectorAll('.news-box li:nth-child(odd)');

> [<li class=​"news">​news title 1​</li>​, <li class=​"news">​news title 3​</li>​]

:nth-last-child() も同様に、最後の子要素から逆向きに数えてn番目、偶数(even)、奇数(odd)と指定できます。

擬似クラスを複数組み合わせる

上にあげた例と同じになりますが、NEWSのnewsクラスを除外したリストの先頭を取得しようと以下のように記述します。

document.querySelectorAll('.news-box li:not(.news):first-child');

> []

しかし、取得対象の :first-child が除外対象の .news であるため空の配列が返ってきます。 :nth-child() を使うか document.querySelector で先頭の一件のみ取得する必要があります。

また、下記のように :not() を複数繋げて使用することも可能です。

document.querySelectorAll('li:not(.news):not(.article)');

> [<li>​topic title 2​</li>​, <li>​article list 2</li>​]

JavaScript勉強中です。 間違いありましたら指摘お願いします。

参考