kozzy’s blog

Ruby, Python, PHP, React.js あたりで学んだこと、記事、読んだ本のまとめなどを垂れ流しする場の予定です

PHP と Ruby による AtCoder Beginner Contest 121

Ruby PHP Atcorder

PHP の練習を兼ねて Atcorder Beginner を最近解き始めたのでログを残す。 DP が苦手でいつも C 問題が解けるか、解けないかを彷徨うレベルですが。。

今回は三完ですた。D問題はビット演算のメモ化とかするのかなあ。

A (勉強ちうのPHP)

<?php
fscanf(STDIN,'%d %d',$H,$W);
fscanf(STDIN,'%d %d',$h,$w);

$sum = $H * $W;
$sum = $sum - $h * $W;

$left_row = $H - $h;
$sum = $sum - $left_row * $w;

echo $sum;

B (勉強ちうのPHP)

<?php
fscanf(STDIN,'%d %d',$N,$M);

$buy_num = 0;
$money = 0;

$a_list = [];
$b_list = [];

for($i=0;$i<$N;++$i){
  fscanf(STDIN,'%d %d',$a,$b);
  array_push($a_list, $a);
  array_push($b_list, $b);
}

echo $money;

C（使い慣れた Ruby）

N,M = readline.chomp.split.map(&:to_i)

ary = []
left = M
money = 0
(1..N).each do |i|
  hash = {}
  a,b = readline.chomp.split.map(&:to_i)
  hash['a'] = a
  hash['b'] = b
  ary.push(hash)
end

ary.sort_by! {|v| v['a'] }

ary.each do |set|
  while((set['a'] > 0) && (set['b'] > 0)) do
    set['b'] -= 1
    left -= 1
    money += set['a']
    break if left == 0
  end
  break if left == 0
end

p money

D（使い慣れた Ruby）=> TLE

def f(res,i)
  return res ^ i
end

A,B = readline.chomp.split.map(&:to_i)
res = A

# result = (B - A) % 2 == 0 ? f(A,B) - 1 : f(A,B)
# p result

(A+1..B).each do |i|
  res = f(res,i)
end

j = 0
ary = []
for i in (A+1..B)
  ary.push(i ^ (i+1)) if (j % 2 == 0)
  j += 1
end

p res

D （使い慣れた Ruby）=> 終わってから解いた

A,B = readline.chomp.split.map(&:to_i)

if(A % 2 == 0)
  case ((B-A) % 4)
  when 1 then
    p 1
  when 2 then
    p 1 ^ B
  when 3 then
    p 0
  when 0 then
    p B
  end
else
  case ((B-A) % 4)
  when 1 then
    p A ^ B
  when 2 then
    p A ^ 1
  when 3 then
    p A ^ 1 ^ B
  when 0 then
    p A
  end
end

kozzy の 2019/2 の振り返り

先月 の振り返り記事

kozzy0919.hatenablog.com

先月立てた目標に対する振り返り

  • TypeScript × React × Laravel な環境で簡単なアプリを作る
    • △ 環境構築、文法学習までできたけどアプリはまだ
  • 本を3冊以上読んで、Blog 投稿する
    • ◎ 4冊ほど読めてアウトプットできた！
  • 5件以上の勉強会に参加し、できる所では実況Tweet、Blog を書く
    • ◎ 5件は行った上、グラレコアウトプットを開始

2月の所感

  • デジタルグラレコによる視覚的なアウトプットで自身の記憶への補助になっており、学習効率が上がっていることを実感できているので、アイデアを出して応用していきたい
  • 自身の行動に大きな変化を与えた1ヶ月だったかもしれない
  • 業務上でも興味ある業務で他人を巻きこんで仕事ができているので非常に気持ちが良く楽しい

3月の目標

  • TypeScript × React × Laravel な環境で簡単なアプリを作る
  • 「脳と行動」「自分が考える数十年後の未来に向けて」をテーマに本を読み、論文風グラレコをアウトプットする
  • Twitter の Follower を 300 人にする
  • グラレコアウトプットを継続する

今月の記事投稿

kozzy0919.hatenablog.com

kozzy0919.hatenablog.com

kozzy0919.hatenablog.com

kozzy0919.hatenablog.com

kozzy0919.hatenablog.com

kozzy0919.hatenablog.com

今月の Tweet （抜粋）

今月のはてなブックマーク

upura.hatenablog.com

qiita.com

qiita.com

qiita.com

nitt-san.hatenablog.com

cloudcraft.co

mugi1.hateblo.jp

qiita.com

TypeScript in 5 minutes · TypeScript

“interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return &quot;Hello, &quot; + person.firstName + &quot; &quot; + person.lastName; } let user = { firstName: &quot;Jane&quot;, lastName: &quot;User&quot; };”

2019/02/11 18:35

ishitonton.hatenablog.com

employment.en-japan.com

www.slideshare.net

twitter.com

speakerdeck.com

www.suzukikenichi.com

twitter.com

Developers Summit 2019 参加録

備忘録 フロントエンド 随時更新

目次

雰囲気

Session

日経電子版のマイクロフロントエンドとPWAによる改善事例

宮本 将 [日本経済新聞社]

日経電子版の技術スタック

マイクロフロントエンドとは、フロントエンド on マイクロサービス

micro-frontends-japanese.org

micro-frontends.org

www.fastly.com

PWA

AppShell

  • firstPaint が高速
  • オフライン時でも最低のアプリ感
  • MPA でも SPA のような UX
  • 日経電子版では実験中

developers.google.com

  • IntersectionObserer で viewport に入った a タグを監視
  • 優先度別の戦略

github.com

]

Critical CSS

First View に必要な CSS wのみを inline で組み込む

Dynamic Critical CSS Optimization

今後は Lambda に全て載せてサーバレスにしていきたい

モノリス化する Service Worker

Service Worker はモノリスになりがち

  • マイクロフロントエンドな環境なら SW もマイクロサービス単位であって欲しい
  • 基本的には変更が全体に波及してしまうので、予期せぬ不具合が出る可能性

マイクロなキャッシュ戦略

  • 各ワーカーが勝手に他のキャッシュを消してしまうというケースがある
  • 読み出し時に他のワーカーのキャッシュがあるならそれを使いたい

方法は2つ

  • それぞれのキャッシュアイテムの所有者が誰かを管理する
  • キャッシュストレージをサービスごとに切り分ける

Feature Flag

featureflags.io

martinfowler.com

FeatureFlags for Service Worker

  • ServiceWorker の RegisterPath にフラグ情報を載せる
  • フラグが変われば SW が更新される

まとめ（をさらに抜粋）

  • TypeScript は肩の力を抜いて取り組む
  • JSXはテンプレートエンジンとしても最高
  • AppShell & Quicklink おすすめ
  • Edge-side optimization には夢がある

kozzyの所感

  • 日経でのフロントエンドの取り組みを内製でやっているイメージはなかったが、フロントエンドの事例としても先進的で少し驚いた
  • せっかく良い内容なのに、自分で自分の成果を大したことないと仰っていたのが勿体無かった（気持ち分かりみ）
  • AppShell, Quicklink は触ってみようと思う

ビズリーチは新規事業でなぜKotlinを選んだのか〜企業をアップデートする「Human OS」の技術選定について〜

大谷 弘喜[ビズリーチ]

ビズリーチの組織について

ビズリーチの新規事業は既存の組織とは別の事業体として成立させている

HRMOS

  • リクルーティング
  • パフォーマンスマネジメント
  • エンゲージメント

クラウド型人材マネジメントツール

ビズリーチにおける人事業務フローでは、データバリデーションとデータ変換が大半。 なのでこれを RPA (Robotic Process Automation) で自動化していっている。

基本方針

KVS vs RDB

結局 RDB を使っている。

Aurora PstgreSQL を採用

  • Scalable

App サーバ vs マイクロサービス

ユーザ認証：Cognito ユーザプールを選定

理由

  • 自前でパスワードを管理したくない
  • リスクベース認証などをマネージドサービスとして管理したい
  • できれば簡単に作りたい
  • GCPのプロトタイプでは Firebase

Cognito の現実

  • 管理
    • メール文面のカスタマイズ
    • 認証の状態管理
  • 認証のブラックボックス化
    • アドバンスドセキュリティ
    • アプリケーション開発者がやるよりは今日こ
    • セキュリティの説明を求められると答えられない

Kotlin の採用

kozzyの所感

  • 技術採用の際の Pros, Cons が丁寧に述べられていて、今後自分が選定する場になったときのための参考になりそう

開発者の第三のキャリアパス～エバンジェリスト/アドボケイトとは何者か？～

中津川 篤司[MOONGIFT]

これまでのキャリア

  • スペシャリスト：高い技術力と専門性（日本では少数派）: 30代前半までは転職は問題なし
  • ジェネラリスト：中間管理職的、社内調整力：幹部候補としての教育や、業界のコネ、著作があれば転職は問題なし

ピーターの法則

ピーターの法則とは、ローレンス・J・ピーターの著書「The Peter Principle」で提唱されたもので、企業などの組織に属する構成員は、その全員が自己の能力を進展させ続けなければ組織がいずれ無能化し、機能しなくなるという階層社会学の法則です。

bizhint.jp

アドポケイト || エヴァンジェリスト

  • イベントでのパネルディスカッション 6人中4人がエンジニア、2人がマーケッター出身
  • きっかけは転職、社内公募、勝手に名乗ってた、ユーザ会で誘われた・・・など

アドポケイト || エヴァンジェリストの素養

  1. 製品に対する 愛 （これが全て）
  2. 開発者とのコミュニケーション能力
  3. 技術に対する 愛
  4. 技術力

細かいところ

  • 健康な人
  • 表裏のない人
  • コミュニティ好きな人
  • 人の話を聞けるタイプの人

エンジニアがエバアドに必要なのはマーケティング知識

「マーケティングとは自社の製品をみんなに知ってもらうこと」

エバアドのタスク

  • 認知度向上
  • ユーザ登録数を増やす
  • アクティブ率を増やす
  • 開発者をサポートする
  • 大会を減らす
  • 生み出されるプロダクトを増やす

kozzyの所感

  • 教える経験がこれまで多かったり、イベントでの運営が好きだったりそのような活動が自分に合っていると思っているので聞けてとても良かったセッション
  • 5〜10年後のキャリアとしての アドポケイト を見据えた仕事と勉強をしていきたいと感じた

ZOZOTOWNのDWHをRedshiftからBigQueryにお引越しした話

塩崎 健弘[ZOZOテクノロジーズ]

Redshift 時代

S3 に入れていたデータ

  • ZoZOTOWN yあ WEAR のマスタデータ
  • GoogleAnalytics 360 から取得したアクセスログ
  • メールやプッシュの配信ログ

S3 -> Redshift への天雄には Data Pipline をしよう

BigQuery 移行の動機

ノウハウ、マネージドの観点で、移行

kozzyの所感

  • 普段、データ基盤に関わっていない人なので、ざっくりとしか理解できなかった
  • データ基盤管理 と データ分析をコラボさせつつも分けて考えないといけないボリュームで考える事はあるよなあと再認識した

読書録 #06: このまま今の会社にいていいのか？と一度でも思ったら読む転職の思考法 を読ん6

読書 備忘録 考え方

このまま今の会社にいていいのか?と一度でも思ったら読む 転職の思考法

このまま今の会社にいていいのか?と一度でも思ったら読む 転職の思考法

Why

  • 周囲の評判もよかったため
  • 転職するきっかけの一つになった本なので
  • 今後のキャリアの事も考えて、備忘録をかねて

他の人の書評

qiita.com

lee578.hatenablog.com

sokusyohyou.com

所感・Let's try

  • 成長産業かそうでないかの企業で働くことがキャリアに大きな影響を与えますよ。といった一見当たり前に見えて、普段業務をしていると見落としてしまうような、基本概念から小説形式で解説している本
  • ポイントをかい摘んで理解、把握しておくだけでも価値がある
  • 昨今のコロプラ赤字をはじめとした、スマホゲーム市場での停滞転換など、現状と合わせて考えてみるとしっくり来ると思う
  • 単純な感覚としては、 xTech 系の企業が主に該当かなあ。投資家目線で就職を考えるのは非常に大切だと感じます
  • 人的資産と技術資産を中心に広げられるよう、勉強会・読書への参加を続けて、登壇などできるようになりたいと思った

転職に必要なのは、情報ではなく「思考法」である

　

このまま今の会社にいていいのか?と一度でも思ったら読む転職の思考法 ダイヤモンド社 北野唯我

こんな人にオススメ

  • 転職を考えている人
  • 転職を考えていなくても、キャリアの積み方に悩んでる人
  • 就活を控えた学生

・・・と言うと 20 ~ 30代くらいのほぼ全ての人に当てはまる形になると思いますが、その位読んでおいて損はない本です。

逆に、自身のキャリアの積み方について圧倒的自信がある方には不要ですｗ

ポイント

下記について、興味を持ったら読むことをお勧めします

  • 自身に目を向ける前にまずは周囲に目を向けよう
  • まずは、「技術資産」「人的資産」「業界の生産性」の3点で構成されるマーケットバリューを測ることを勧めている
  • 仕事が生まれてから、無くなるまでのサイクルとは？
  • 産業が置かれている状況が「エスカレーター」となる
  • 強みが無意味になる前に、昇りエスカレーターに乗り換えるべし
  • 伸びるマーケットを見つける二つの方法とは？
  • いいエージェント、いいベンチャーの条件とは？
  • 「今の会社に残ってもいいかも」と迷い始めた時には？
  • 夫（妻）への相談方法は？
  • 仕事の楽しさは何が決める？

読書録 #05 :「エンジニアのための理論でわかるデザイン入門」を読んで

デザイン フロントエンド 備忘録

目次

読んだ本

エンジニアのための理論でわかるデザイン入門 ThinkIT Books

エンジニアのための理論でわかるデザイン入門 ThinkIT Books

Why

他の人の書評

booklive.jp

yoshiko.hatenablog.jp

所感

  • 読書録 #04 : Webデザイン、これからどうなるの？キーワードから探るデザイン動向の現在と未来 を読んで - kozzy’s blog の本では図鑑ベースでの事例解説がメインだったのに対して、この本ではプロセスに重きを置いていた

  • 下記の1文が特に重要なので、引用

    • "デザイン"にセンスや芸術性は不要

      　

      エンジニアのための理論でわかるデザイン入門

    • デザインの大半は「知っているか、知っていないか」によるものが大きいのではないかと感じているのでこの文言に共感

    • 敢えて必要なものを挙げるとすれば 興味・熱意・こだわり かもしれないなあ。デザインに限らずある程度の領域までは
    • まさしく、ファッションにも目を向けろ、的なことが書かれていたがどうも興味が持てない（苦笑）

章ごとに書かれている事

第1章 これからのITシステムとデザインの重要性

  • コンセプトの重要性について
  • デザインの未来とエンジニアに必要なデザイン力の方向性について

第2章 コンセプトからデザインを思考するプロセス

  • デザインの構成要素に一貫性を持たせることの重要性について
  • ビジュアルは統一して、コンセプトに沿うことの重要性について

第3章 デザインの要 タイポグラフィについて

  • 文字の太さ、フォントの種類が与えるイメージについて
  • 欧文、日本語フォントの組み合わせについて
  • タイポグラフィで気をつけるポイントについて

第4章 情報整理とワイヤーフレーム

  • デザインとは何か？
  • シナリオ、言葉、ビジュアルの重要性について
  • ほんの編集やコピーライティングを学ぶ重要性について
  • これからのITエンジニアに求められる事について
  • UI に応用できる人間の近く法則を利用したプレグナンツの法則について
  • Webサイト設計の基礎：ワイヤーフレームについて
  • Webデザインの主流となりつつあるミニマルデザインについて

第5章 ビジュアルが世界観を想像する

  • Webサイトの顔であるビジュアル（写真）の選び方について
  • タイポグラフィのレイアウトの選定方法について
  • 構図やレイアウトに用いられる三分割法について

第6章 レイアウトとスペーシングの方法論

  • 均等なスペーシングの重要性について
  • 黄金比、白銀比を意識したスペーシングのすすめ

第7章 色彩の基本と使い方

  • 小・中学生の時にやったかもしれない色彩の基礎知識の振り返り
  • PCCS の色彩トーンが与える印象について
  • Webデザインにおける配色の決め方について

第8章 色彩配色の奥義 色彩調和とテクニック

  • 細かな色彩理論の解説
  • 配色における面積比率が表す印象について

第9章 デザイン実践のコツとポイント

  • デザインの実践例について
  • デザイナーの思考とプロセスについて

第10章 ライフスタイルとデザイン

  • 普段の生活から「どう見られるかを考えること」が与えるスキル向上について
  • この本のまとめ

Let's Try

  • プレグナンツの法則 あたりは、基礎になりそうな上、応用もできそうなのでしっかり把握しておく

note.mu

  • 三分割法 についても知らなかった。これも把握しておく
  • ジャッドの色彩調和論、というのもあるらしい

shikisai-fleur.com

  • 細かな制作物にもデザインを意識してアウトプットする
  • 良いデザインの物をみる

読書録 #04 : Webデザイン、これからどうなるの？キーワードから探るデザイン動向の現在と未来 を読んで

デザイン 備忘録 読書 フロントエンド

目次

読んだ本

Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来

Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来

Why

  • フロントエンドエンジニアに転身する身として、基本的なデザインの流行であったり、考え方であったりを知っておきたい

他の人の書評

maburi.com

特別記事（Web担当者 Froum）

webtan.impress.co.jp

Let's Try

下記がどのようなものかは覚えておきたい。 そして参考にしたいときにこの書籍を引ける状態にしておく。

  • マイクロインタラクション
    • ユーザの行動に合わせて小さなフィードバックを与える技術

webdesign-trends.net

ferret-plus.com

  • フロアナビゲーション
    • ページ遷移を減らし、1ページで主張したいメインコンテンツに被らないようサブコンテンツを配置してスライドさせながら魅せる表現手法

実例

cheesetart.com

  • インビジブルメニュー

    • メニューを格納して表示させない手法

  • パララックスエフェクト

    • 部分ごとに動くスピードや、動く方向に差をつける効果のこと

saruwakakun.com

photoshopvip.net

  • スプリットレイアウト
    • 画面を大きく分割させる表現手法

webdesign-trends.net

  • ブロークングリッド
    • 言葉の通り、グリッドレイアウトを敢えて崩して表現する手法（素人が真似すると、普通に汚くなりそう）

webdesign-trends.net

  • ヒーローイメージ
    • プロダクトなど、最も主張させたいものを大々的に表示させる表現手法

techacademy.jp

  • ヒーロームービー

    • 臨場感や没入感を与えるような画像を大きく魅せる手法。モバイルへの配慮も重要

  • ベクターグラフィック

    • SVGイメージのこと、シンプルな色使いと組み合わせて表現するのが相性良し

  • シネマグラフ

    • 画像の一部分だけを動かす表現手法

helpx.adobe.com

  • エフェクト・フィルター

    • マウスアクションと連動したアニメーションエフェクトのこと

  • タイポグラフィー

    • 活字を大きく配置して、Webページの体裁を整える技法

saruwakakun.com

  • レタリング

  • デュオトーン

    • 2色をミックスさせるデザイン手法、さらに画像、文字などをオーバーレイ表示させる手法も流行っている

www.genius-web.co.jp

  • ニュートラルカラー

    • 白、ベージュなどを基調とした色のことで、余白を利用したデザインなどに利用される

  • Webブルータリズム

    • 90年代のWebデザイン、原点回帰トレンド

所感

  • プレゼンするときとかにスライドに組み込めるとカッコ良さそう（そういや、マテリアルカラー・デザインは好みなので多用しがち）
  • カードレイアウトとかは最近よく見るし、UIライブラリでもよく見るなあ
  • 図鑑として常備しておくのに良い一冊なのではないか。（自分の場合 Kindle だから逆引きはしにくいけど）
  • やっぱ美しいデザインの Webページを見ると落ち着く

この辺りを知りたい人にオススメ！

1章. UI

  • ユーザに使いやすく、欲しい情報を端的に提示するためのデザインとは？
  • 適切な動的な表現、フィードバックとは？
  • プロトタイピングツールについて
  • 3D、AR、VRなどを用いた表現事例
  • LINE ライクに情報を親近感を持たせながら表現するチャットUIについて
  • これからの UIデザインについて

2章. レイアウト

  • モバイルでもWebでも、どんな画面サイズでも閲覧しやすい表現手法
  • カードレイアウト、ブロークングリッドなどの魅せ方について
  • 高速・軽量表示を実現する AMP について
  • 画面遷移をさらに有効に表現する手法について
  • これからのレイアウトについて

3章. グラフィック

  • 見せたいものの魅せ方について
  • 立体的、動的な魅せ方
  • モバイルデバイスにおける見せ方で考慮すべき点

4章. タイポグラフィ

  • フォントを用いたデザインで重要な視点
  • アニメーション、エフェクトを交えたフォントデザインの手法

5章. 配色

  • 流行の配色方法
  • ビビッドカラーを採用したWebデザイン
  • これからの配色の観点について

その他参考記事

ferret-plus.com

RSpec によるテスト駆動開発はじめのいっぽ

RSpec Ruby 備忘録

目次

  • 目次
  • この記事は？
  • Why
  • 基本的な使い方
    • install と init ファイルの生成
    • サンプルコード
  • メモ
    • describe, context, subject, letなどの書き分け
    • before と let の実行タイミング
    • before(:each) を使おう
    • Matcher 一覧
    • Rspec のベストプラクティス
    • FactoryGirl について
    • shared_example について
  • 書籍

この記事は？

  • Ruby でテスト駆動開発を行うためのメジャーな Gem である Rspec についての記事を参考にしつつ、まとめている。

Why

  • 業務上、Rspec を使って、テストを実装する必要があったので調査した記事をとりまとめて備忘録としたい
  • テストの実装に苦手意識があるので、克服したい

基本的な使い方

install と init ファイルの生成

rspec を動かす上で必要な、gem install と spec_helper,rb ファイルなどの生成を行う。

$ gem install rspec
$ rspec --init
  create   spec/spec_helper.rb
  create   .rspec

サンプルコード

Human クラス のテストを行うコードは以下のように書く。

lib/human.rb

class Human
  attr_accessor :name, :hands

  def initialize(name="Kozzy")
    @name = name
    @hands = 2
  end

  def alived?
    true
  end
end

spec/lib/human_spec.rb

require "spec_helper"
require "human"

describe Human do
  it "named 'Koji'" do
    human = Human.new
    expect(human.name).to eq 'Kozzy'
  end

  it "has hands" do
    human = Human.new
    expect(human.fangs).to eq 2
  end

  it "is alived" do
    human = Human.new
    expect(human).to be_alived
  end
end

$ rspec spec/lib/human_spec.rb

qiita.com

続きを読む

読書録#03 : 「誰も教えてくれない 質問するスキル」を読んで

生産性向上 読書

目次

読んだ本

誰も教えてくれない 質問するスキル（日経BP Next ICT選書）

誰も教えてくれない 質問するスキル（日経BP Next ICT選書）

Why

  • 前に買っていて、積ん読放置していたので消化したい
  • 口下手で話し始めるのが苦手なので、聞き上手になりたい

他の人の書評

www.kanousei40.com

booklive.jp

この本のゴール

  • まずは、この書籍のゴールについて。Why, What, How が順にゴールとなっており、行動へのプロセスまで述べられている。

本書のゴールは、以下の４つを満たすことです。

  • 質問力を高める４つの要素を理解する
  • 何を質問すべきかを知る
  • どう質問すべきかを知る
  • 普段の練習方法を知る

　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

所感

  • 質問をする "Why" から定義し直す事で、メリットを明確にしたのちにそれを運用するための "How" などを紹介していく構成。どちらかといえばロジカルシンキングや、ファシリテーションに対する考え方を「問いかけ」を主軸にして展開している本。

  • 「口下手で話し始めるのが苦手なので、聞き上手になりたい」みたいな自分の目的とはずれてはいたが、業務上のスキルとしては重要そうな視点が多く述べられている。

  • テーマがテーマなので他の書籍にも書かれていたような内容も重複はあるが、基本を抑えるという点では読んでいて損はないかなと感じた。ただ、プロマネについてのお話があるのははタイトルからは想像もつかない。ので、その部分は現状優先度が高くないので軽く飛ばした。（買う前に確認しとけ、去年の自分ｗ）

  • ファシリテーションについては、今流行り？つつあるグラレコ（グラフィックレコーディング）とかにも関係ありそうなスキルな気がする。企画的な活動にもたまーに、取り組んでいることから、このようなスキルも必要だと思う。けど、本業じゃないから優先度は低いかなあ・・・

Let's Try

  • 「質問は相手の思考を促し、関係を構築するため」この目的を意識するだけでも持ち帰る価値があるかなと思う。まずは Why を強く意識しないと行動には移せないので。マネージャーを見据え始めたら、また読みたいと思う。

こんな疑問をもつ人にオススメ

  • 質問する理由は何か？
  • 質問するにはどのような視点が重要か？
  • 要求の理解が難しい理由は何か？
  • マネジャーの役割は何か？
  • どんな質問をすれば良いか？
  • どう質問しているか？
  • 良い議論とは？
  • どのように議論をファシリテーションするべきか？
  • ファシリテーターの役割とは？

疑問に対する自分の考えと引用

質問する理由は何か？

  • 自分は「情報を集めるため」ぐらいしかパッと思い浮かばなかった
  • 思考を促す、関係を構築するという視点は確かにそうだなと思うと同時に、1人（少人数）で仕事している場面が多いことが原因かもなあ、なんて感じた。

質問するのは何のため？

  1. 情報を引き出す
  2. 思考を促す
  3. 関係を構築する 　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

質問するにはどのような視点が重要か？

  • これまた、自分は「わかりやすいか否か」というイメージしかなかった。
  • 端的にいうと、「つまり」を捉える思考（So What）、How、Why、加えて 巻き込みの視点が必要と理解した。

質問するスキル 4つの要素

  1. 抽象化思考
  2. 問いかけ
  3. フィードバック
  4. 議論の見える化 　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

要求の理解が難しい理由は何か？

  • 状況にはよるが、言葉に隠れた見えない意図が思考の中には含まれているから？
  • だいたいあってる、思い込みなんかも、要因の一つのよう。

なぜ、要求の理解は難しいのか？

  1. 言葉の壁
  2. 抽象度の壁
  3. 意識の壁 　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

マネジャーの役割は何か？

  • 「チームの全体最適化のためにあらゆる手を尽くすこと」かなあと感じた。そういった視点では、この本に書かれている内容と近いかなと思う。

チームや部署、メンバーや部下が機能する「状況」を作り出すこと

　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

どんな質問をすれば良いか？

  • 状況にはよるが、天気の話・・・とか？ｗ
  • Yes か No かで答えられる質問が良いとかよく聞くような（クローズドクエッション）

具体的な質問から始める

  • いきなり抽象的な質問をしても答えにくい
  • 具体的な質問で会話を温めてから、抽象的な質問をする 　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

どう質問しているか？

  • 基本、そんな意識はしていないかなあ。コンテキストにあった話をしようと心がけるとか、話をぶった切ったりするときは、前置きを入れるとか、その程度ですかね。

質問のコツ

  • 直接、問題解決をしない
  • 問題解決のアプローチを一緒に考える
  • 継続的なプロセスの中で働きかける
  • 具体的な質問から始める
  • 5W1Hで質問する
  • 相手が話し終えてから質問する
  • 相手を生身の人間として尊重する 　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

良い議論とは？

  • 目的が定まっていて、なおかつ、多くのアプローチから意見を集められるような議論。そして、発散しないこと。
  • 遠からず、近からず。各々にメリットがある議論が良い議論のようだ
  • そういや、よく「理解はするが腹落ちしない議論だった」、みたいな話をきくｗ
  • このような議論じゃないのが、無駄な議論、なのかもしれない

良い議論の条件

  1. 思考が深まる
  2. 視点が増える

  3. 腹落ちが得られる

    → コミットメントを引き出し、行動を促す 　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

どのように議論をファシリテーションするべきか？

  • 議論を他人に対して、理解しやすいように容易にする
  • ざっくりとしたイメージは合ってた。ゴールの定義からの逆算しつつの、抽象化アウトプットと理解

ファシリテーションのプロセス

  1. ゴールの設定
  2. 問いを立てる
  3. プロセスを設計する
  4. 発言を咀嚼、整理し、見える化する
  5. 結論を共有する 　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

ファシリテーターの役割とは？

  • 議論に対して十分に理解すること、それを端的に表現すること。
  • 間違えではないが、ここでは「議論のコントロール」と「具体」と「抽象」の行き来が役割とされていた

ファシリテーター 4つの機能

  1. 論点を維持する
  2. 言いたいことを一言でまとめる
  3. 曖昧な表現を具体化する
  4. 議論を図式化して、空中戦を避ける

　

誰も教えてくれない 質問するスキル （日経BP Next ICT選書）芝本 秀徳

2019/1 の振り返り

備忘録

1月の所感

  • fin-py のもくもく会中の思いつきで突然ブログ始めたら、意外とモチベーションが保てたというとてもいい感じの月になった（小並）
  • 去年から勉強会への参加が多くなり、今月も新しく知り合えた人が増え、非常に有意義な月となった（中並）
  • 積読の解消が始まった（修羅の道）

2月の目標

  • TypeScript × React × Laravel な環境で簡単なアプリを作る
  • 本を3冊以上読んで、Blog 投稿する
  • 5件以上の勉強会に参加し、できる所では実況Tweet、Blog を書く

1月 Blog の振り返り

kozzy0919.hatenablog.com

目指すは脳筋エンジニア💪

kozzy0919.hatenablog.com

これまで、Evernoteとかで 記事のstockをしてたけど、暫定的にキュレーションしてみた。 試行錯誤してるので、このやり方を続けるかは考え中。普通にtweetでいいかな。

kozzy0919.hatenablog.com

Output大全 の 樺山先生の書籍。「心がソフトウェアなら脳はハードウェア」という kozzy の持論から興味を持った一冊。不器用な性格なので、要領よくなりたい。（願望）

kozzy0919.hatenablog.com

業務で必要になることから TypeScript について学んでいくぞっ、て記事。

1月 Tweet の振り返り

ただし、大したこと呟いてない

Repro さんの勉強会に参加した。Repro Tech Handson は フロント系しか参加していないが毎度のこと講師の方の作る資料の質が高い 👀

React Native での App を作りたいと考えて、Repro Tech Handson で推奨の本を購入した。

AR フロントエンド についての LT 交流会、ヤフオクの荷物小包をメジャーの如く測定するのはべんりだと感じた。

フロントエンドのパフォーマンス改善についての LT 交流会、端的にいうとパフォーマンス改善するには仮説立てして、計測ツール使って、地道に泥臭く遅い要因を潰していきましょう、みたいな感じでした

これから TypeScript を学ぶためのだいいっぽ

備忘録 フロントエンド TypeScript

この記事は？

  • TypeScript についての記事をまとめている

www.typescriptlang.org

Why

  • TypeScript を扱ったフロントエンド実装が増えていると聞く
  • なので、TypeScript とはどのようなものなのかをまずはリサーチしたいと思ったので、まとめる

まとめ

TypeScript とはどんな言語か

参考元

www.buildinsider.net

yebisupress.dac.co.jp

引用メモ

JavaScript（ECMAScript 5）

function Person(name) {
  this.name = name;
}
Person.prototype.say = function(message, count) {
  for (var i = 1; i <= count; i++) {
    console.log(this.name + " says " + message + " " + i);
  }
}

var person = new Person("Bill");
person.say("Hello!", 3);

TypeScript

class Person {
  constructor(private name: string) {}
  public say(message: string, count: number) {
    for (let i = 1; i <= count; i++) {
      console.log(`${this.name} says ${message} ${i}`);
    }
  }
}

const person = new Person("Bill");
person.say("Hello!", 3);

TypeScript では JavaScript のコードをそのまま使えます。ループや条件分岐、関数呼び出しなどの JavaScript の構文はそのままで、それに追加して静的型付けやクラス宣言ができるようになっています。

　

TypeScriptについてまとめてみた | DACエンジニアブログ：アドテクゑびす界 より

Wikipedia

TypeScript

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。C# のリードアーキテクトであり、DelphiとTurbo Pascalの開発者でもあるアンダース・ヘルスバーグが TypeScript の開発に関わっている。TypeScriptはクライアントサイド、あるいはサーバサイド (Node.js) で実行されるJavaScriptアプリケーションの開発に利用できる。

　

TypeScript - Wikipedia より

　

言語の特徴

  • TypeScriptはJavaScript (ECMAScript 5) に次のような言語機能の拡張を加えたものである。

ECMAScript 6由来

  • クラス
  • アロー関数式（ラムダ式）
  • オプション引数、デフォルト引数
  • let, const
  • テンプレート文字列 : 文字列内への変数埋め込み
  • モジュール
  • for/of
  • 分割代入
  • Symbol

ECMAScript 7由来

  • デコレーター
  • Async/Await

独自

構文的には、静的型付けやクラス、継承、インタフェースのようなオブジェクト指向、名前空間などの機能を追加する、ECMA-262 言語標準のマイクロソフトによる実装である JScript.NET と TypeScript はよく似ている。

　

TypeScript - Wikipedia より

TypeScriptを導入する前に『覚悟』したほうが良いこと 4項目

hachibeechan.hateblo.jp

  • 楽 ≒ 簡単
  • TypeScriptは現状「別に使う必要はない」ツール
  • いきなり高めの型リテラシーを求められる
  • 初速が出ない
  • 採用が難しい
  • 使いこなせなければ存在自体が負債になりかねない

　

TypeScript - Wikipedia

TypeScriptを導入する前に『覚悟』したほうが良いこと 4項目 - タオルケット体操

より

書籍

  • これらを踏まえた上で、本屋でチラ見した時にテスト駆動開発の章もあった下記の本を読み進めたいと思う

TypeScript実践プログラミング (Programmer's SELECTION)

TypeScript実践プログラミング (Programmer's SELECTION)

読書録 #02:「脳を最適化すれば能力は２倍になる」を読んで

読書 備忘録 生産性向上 健康

脳を最適化すれば能力は2倍になる 仕事の精度と速度を脳科学的にあげる方法

脳を最適化すれば能力は2倍になる 仕事の精度と速度を脳科学的にあげる方法

Why

  • 仕事におけるモチベーション維持、生産性向上のために人間の脳の側面から理解することが有効と日々感じていたため

他の人の書評

booklive.jp

感想

モチベーション面、健康面での行動について、脳科学的な視点で分泌される脳内物質に焦点を当てて解説している本。こうした方がいい、といった行動自体は、他の本でも言われている内容のものも多いだろうが、その原理から意識した方が行動しやすいという人にはオススメな本。仕事上のモチベーション、睡眠などに問題が無いと思っている方は読む必要は無いかも。

Let's Try

  • 自分の出した成果を卑下せず誇張して喜び、ドーパミンを生成（自分の中で）
  • 煮詰まった時には気分転換に軽く jog ＋ 深呼吸などを取りいれる
  • 光で目覚めるよう、起床予定1時間前に目覚まし光時計を導入しセロトニン生成
  • 夜、湯船はぬるめにリラックスを意識して、アドレナリンを抑える
  • 夜、歯磨きする30分前くらいの GABAチョコレート 摂取で睡眠とエンドルフィンを生成
  • 圧倒的感謝を意識して、エンドルフィンを生成
続きを読む

Yahoo Japan Tech Conference 2019 参加録

備忘録 フロントエンド

Yahoo Japan Tech Conference 2019

techconference.yahoo.co.jp

会場の様子

聴講した講演の Summary

ライブクイズ「ワイキュー」を生み出した"内因的モチベーションドリブン"／ワイキューが目指した"楽しい時間を作るデザイン

善積 正伍 ／ 染矢 沙織

メディアカンパニー　メディア統括本部　メディア本部

www.slideshare.net

善積さんパート

染矢さんパート

ライブ動画配信サービス「ワイキュー」の作り方 〜優れた社内技術で実現する、少人数のサービス開発〜

石井 直矢

メディアカンパニー　メディア統括本部　メディア本部

www.slideshare.net

[https://twitter.com/kamykn/status/1089057813953884161:embed]

豊かなスポーツライフの実現を目指す、スポーツナビのシステムアーキテクチャ

北村 央斗

メディアカンパニー　メディア統括本部　バーティカルメディア本部

www.slideshare.net

拡張性あるデザインシステム構築から挑む、GYAO!のウェブリニューアル

浜田 真成

株式会社GYAO　GYAOサービス統括グループ　プロダクト本部

CtoC配信サービスのバックエンドからiOSアプリまで ～ヤフオク!ライブの全貌とXP開発～

出水 厚輝 ／ 大西 智也 ／ 山下 真一郎

コマースカンパニー　ヤフオク!統括本部　ヤフオク!開発本部

www.slideshare.net

出水さんパート

大西さんパート

山下さんパート

Bonfire Frontend #3 190124

備忘録 フロントエンド

Bonfire Frontend #3 190124

技術刷新から考えるWeb開発のプロダクティビティ改善

竹野 峻輔 / Retty 株式会社

  • Rettyの現状、モノシリック & カオティック

  • 短期的にパフォーマンスが上がっても中長期的で継続に失敗する

  • 技術刷新として、バックエンドを刷新していく方針とした

  • パフォーマンス改善を持続的に行うための土壌を築いていく取り組み

  • リアーキテクチャ = プロダクティビティ改善のためにやる
    • 1.凝集化と分割：システムの構成要素の役割の再整理
    • 2.持続的な変更可能性の確保：ここの開発負担の軽減

どうやってプロダクティビティを上げていく？

  • 1.コラボレーション：多角的な視点でアーキテクチャを整理する
  • 2.親和性：チームとして力を集約する

ユーザログ機構をフロントエンドにうまく統合する

  • データの人がフロントの人に開発サイクルのコンテキストを共有し、相談することで、データの流れ方を基準に役割を分けるとうまく分割できた

フロントエンドとバックエンドの共同作業

sakito氏 @sakito 僕たちフロントエンドはデザイナー、バックエンド、PMとコミュケーションとって仲良くすることで設計が洗練されるのだ！！#yjbonfire

まとめ

  • プロダクティビティ＝ヒト×モノ
  • 技術的な分割 ≠ 安易な責任の分割

Blog

一休.comのフロントエンドパフォーマンス改善

宇都宮 諒 / 株式会社一休

スライド

slides.com

パフォーマンスの計測

パフォーマンスの最適化戦略

  • Webサービス最適化は、遅い要素を減らして早くする
  • 「遅い」要素とは
    • サイズの大きな画像、フォント
    • JavaScript
    • 大量のHTTPリクエスト
    • 重いDBアクセス

JAMSTACK

[https://twitter.com/sakito/status/1088398699535904768:embed]

まとめ

  • パフォーマンス最適化は適切な計測から始まる
  • パフォーマンスの伸び代はサイトの要件次第
  • 大幅なパフォーマンス改善にはアーキテクチャレベルの変更が必要

記事

user-first.ikyu.co.jp

パフォーマンス改善の具体例とサービスへの売上貢献

笹原 翼 / ヤフー株式会社

  • ヤフーショッピングのパフォーマンス改善（ページ表示速度アップ）

なぜパフォーマンス改善をやるのか

  • 速度が速くなると、ユーザが使いやすくなり、サービスのKPIに影響する

  • 速度とKPIの相関をABテストで証明する

ABテストでKPIの向上を証明

どこで改善をしたのか

  • SpeedCurve で速度計測 speedcurve.com 5万回まで測定できて5万円

どんな改善をやったのか

どんな改善をやったのか

  • 遅い、直列なAPIモジュールを非同期化
  • 間違った非同期をやめる
  • 画像の preload
  • JS, CSS の preload
  • 画像の最適化
  • ハードのリプレイス、スケールアウト
  • JS、CSS の軽量化
  • html の圧縮形式を変える

どんな効果があったのか

  • 表示速度が競合3社の中で 3位 から 2位に向上した！
  • SEO にも良い影響

我々がやることリスト！

プロキシ（Proxy）についての再確認

備忘録 用語

調査

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

プロキシ (proxy)とは 恥ずかしがり屋なWebブラウザさん用代理交渉人のこと。 もう少し具体的に書くと ホームページを見るときに使うソフト（Webブラウザ）の身代わりになってホームページにアクセスしてくれるコンピュータ（サーバ）のこと です。

https://wa3.i-3-i.info/word1752.html

パソコンの選び方と買い方

データを保存しているサーバーは、要求されたページのデータをブラウザに返すことで画面に表示します。これが一般的なやり取りです。 これをプロキシ経由しておこなった場合、ブラウザからは直接的にデータを要求せずにまず代理サーバーに接続されます。それを受けた代理サーバーは、自分の代わりに目的のサイトへデータを要求しアクセスします。データを受け取ると本来のブラウザへとデータを渡します。このように橋渡しのような処理を行ってくれます。

pcinformation.info

Wikipedia

プロキシ（Proxy）とは「代理」の意味である。インターネット関連で用いられる場合は、特に内部ネットワークからインターネット接続を行う際、高速なアクセスや安全な通信などを確保するための中継サーバ「プロキシサーバ」を指す。 プロキシはクライアントとサーバの間に存在し、情報元のサーバに対してはクライアントの情報を受け取る、クライアントに対してはサーバの働きをする（HTTPプロキシの場合）。 なお、プロキシは、「プロキシー」「プロクシ」「プロクシー」のほか、リバースプロキシの対義語として「フォワードプロキシ」とも呼ばれる。 誰でも自由に使えるプロキシサーバを公開プロキシという。ウェブサイトによっては、この公開プロキシによるアクセスを制限することがある。例えば、Wikipediaでは公開プロキシ（オープンプロキシ）を通じて閲覧することは問題ないが、編集することは禁じられている。

ja.wikipedia.org

まとめ

  • プロキシとは、代理アクセスエージェントのこと

おまけ

curl を使ってプロキシ経由でアクセスするには

プロキシ経由でアクセスする場合、「-x」オプションでプロキシサーバを指定すれば良い。

curl -x プロキシサーバ:ポート番号 http://対象のURL

もしプロキシサーバを利用する際に認証が必要な場合、以下のようにユーザ名・パスワードを指定すると良いだろう。

curl -x プロキシサーバ:ポート番号 --proxy-user ユーザ名:パスワード http://対象のURL

orebibou.com

HTTPプロキシ と SOCKSプロキシ

dev.classmethod.jp

お気に入りな飲食店リスト（東京23区のみ）

随時更新 飲食店リスト

魚系

渋谷 etc

tabelog.com

夜も定食価格で美味い魚が食べれるのでよく行ってた

鳥系

田町 etc

tabelog.com

特にランチの きじ焼き丼(750円) が美味い

＃ カレー

田町・神田 etc

bondy.co.jp

hinoya.jp

カフェ

田町 中目黒