エンジニアをリングする

プログラをミングしたり。

my web site twitter

git grepでソースコード内検索のあれこれ

FOLIOアドベントカレンダー 21日目です。
12月は読み応えのある記事が多いので、わたしからはさくっとしたTipsを。

いま作業してるリポジトリのファイル群から、目当ての文字列を1秒でも早く見つけるための話。

おすすめのコマンド

grep だと対象指定が面倒だったり、カレントディレクトリ以下を指定すると巨大なnode_modules以下のファイルも対象になってしまったりするので、git管理下のファイルのみを対象に検索できて高速な git grep がおすすめ。
git grep 検索したい文字列 だけで検索できる。

~/.bashrc~/.zshrcなどに以下のエイリアスを書いておくと、 gg hoge だけでgit管理下のファイルにあるhogeをハイライトつきでリストアップしてくれてめちゃ手軽。

alias gg='git grep'

もちろん日本語も gg ほげほげ でいける。 gg hoge src/js のようにさらにディレクトリを絞ることも。

単語検索

これめっちゃ便利なやつ。

gg -w user で、 users でもなく userData でもないただの userhoge.user だけを検索できる。
探したい文字列が関連メソッドや別の変数名に頻出しているときにもかなり絞り込めて助かる。

大文字小文字を無視して検索

gg -i hogehogeisHogeHOGE もひっかかる。

正規表現

'' で囲うと gg '\(hoge\|fuga\)' のように正規表現も使える。エスケープはがんばる。

検索した中から別のワードを除外

まれにライブラリのコードがgit管理対象になっちゃってて引っかかってくるときとかにディレクトリ名で除外したり。

gg 検索したい文字列 | grep -v 除外したい文字列

ただ結果からハイライトが消えちゃいます。 git grep だけでこれやる方法あったら知りたいなあ。

[12/21 15:30追記] 情報もらえました!

gg -e 検索したい文字列 --and --not -e 除外したい文字列 で!
--and とか使うときは -e がないとダメだったんですね。感謝 🙏


これぐらいですが、以降はわたしが普段よくやることとか。

使われ方で検索

  • 代入: gg 'hoge ='
  • 関数実行: gg 'hoge('
  • プロパティ: gg '\.hoge'
  • Viewコンポーネントgg '<Hoge

分解して検索

CSSでありがちなことなのですが。

.alert--warning みたいなスタイル定義やclass属性を消していいか調べるとき、 gg alert--warning して引っかからないから大丈夫そう〜とか思っていると

className={`alert--${data.status}`}

みたいなViewとか逆に

.alert {
  ...
  &--warinig {
    ...
  }
}

みたいなAltCSSとかがあったりして無事死亡するので、BEMとかバリエーションがあるっぽいクラス名は分割して 'alert--' とか '--warning' とかで検索してみるのがおすすめ。

というか、そういう苦労を強いられてしまうので自分が書くときはクラス名を動的に組み立てるの極力避けてます。 grepビリティ大事!

UIデザインの会社から証券会社へ転職しました

2年と2ヶ月勤めたGoodpatchを先週いっぱいで退職しました。
最終出社日は今月の頭頃でした。

Goodpatchでは入社してからずっとProttというプロトタイピングツールのWebフロントエンドを担当していました。
今週からは新しい会社で働いています。

なんでやめたの?

一言で言えるものでもないですが、あえて一言で言えば「2年の間に自分も会社も変わった」というところです。入社当時は自分の特性やニーズにとてもマッチした環境だなーとしばしば感じていたのですが、2年という長い時間の間に私の求めるものも会社の規模や持ち味もそれぞれ変わったなーという。それはどちらが良い悪いではなく単純にマッチングの問題だと思ってます。これが辞めた理由のうちの半分。

一方で良い意味で自分が変わった点として、思い返せば、入社前の私は「何を作るかより、(技術的に)どう作るか」に興味のあるタイプの人間でした。技術が手段ではなく目的なタイプ。でもこの2年の間に色々なプロジェクトや人や働き方を目の当たりにして、「何を作るか、どんな課題を解決するかってとても大切なんだなあ」という視点が自分の中に根を下ろしたように思います。いつの間にか自然と「何を課題と捉え、それを解決するために何を作るのか」という問いを中心に手を動かすようになっていました。
元々そういう視点を持つ人からしたら当たり前すぎることだと思いますが、私はそうではなかったので、単に今までと異なる視点を持てるようになったことが喜ばしいです。この点だけでもGoodpatchに入ってよかったなと思っています。

そんなふうに「何を課題とし、そのために何を作るか」を最重要視するようになってからしばらく経った今年の7月。前述の理由で「そろそろ転職もありかなー」なんて思いながらいくつかの会社さんとお話しをさせていただいていた頃、たまたま知ったとある会社が取り組んでいる課題とプロダクトを知り、一目惚れのような勢いでめちゃくちゃ惹かれてしまいました。これが辞めた理由の残りの半分です。

次どこいくの?

ITベンチャーでもあり証券会社でもある、FOLIOという会社に転職しました。創業2年目で、社員数は40人ぐらい。
このブログを読んでいる人だと社名を知らない人のほうが多いかもですが、先月β版のリリースが出たり、CDO(Chief Design Officer)のブログ たかがFOLIOという1サービスの開発に、23歳が2年もの時間を捧げてしまった話 が話題になったりしたので知っている人も増えてきているかも。
会社の紹介記事も去年ぐらいからいくつも出ています。

なんでそこにしたの?

先月のリリースやブログが出る少し前ぐらいのタイミングに、中のエンジニアの方から声をかけていただいたことで会社の存在を知りました。その直後ぐらいに別のルートでCDOと知り合う機会があり、これも縁かと思ってとりあえずオフィスへおじゃましてみることにしました。
そこでプロダクトや会社の話を聞いたら、なんかすごくわくわくしちゃったんですよね。とにかくわくわくしちゃったんです。すごく久しぶりに出会った「良い!!」という気持ちと共に、体がむずむずしてくるような感じ。今すぐ動き出したくなるような感じ。いつからか自分はずっとこんな衝動を探していたんじゃないかという気がして、いつの間にかほとんど気持ちが固まっていました。

何にわくわくしたのかをもう少し噛み砕くと、大きく「メンバー」と「プロダクト」と「分野」に惹かれました。

メンバーがよさそう

CDOを知ったきっかけは共通の知人たちの話題でCDOとFOILOが絶賛されていたことだったのですが、その複数の知人は揃ってプロダクトやサービスへの感度が高い人たちだったので、この人たちがこれだけ褒めるならきっと良いサービスでCDOも良いデザイナーなのかもな、と興味を持ちました。その後実際にオフィスにおじゃましてサービスを紹介してもらったとき、「やっぱり良かった!」と確信。私の中でデザイナーさんを信頼できることはフロントエンドの実装をする上でとても大事なのです。
また、フロントエンドについてもお話を聞かせてもらうと、React+Redux+Flow+SSRなど今時な作り。nodeのBFFもあって、フロントエンドの業務がView寄りの部分とBFF寄りの部分で細分化されているそう。専門性高くきれいに作ってあるなあと思いました。
そして印象的だったのが、社内のメンバーが他のメンバーをとにかくみんな優秀だと褒める。
もちろん採用候補者に対してネガティブなことは言わないと思いますが、それにしても同じ社内のメンバーを胸を張って自慢できるっていいなと思ったんですよね。自分の理想のひとつでした。現在進行系でメンバー起因の悩みがあったらさすがにそこまで堂々と胸を張れないと思いますし。
最後の決め手が採用基準について。「(各採用担当が)自分よりできる人しか採らない」を実践されているようで、「この基準が徹底されている会社がいい!」と強く思いました。わたしも前職で採用面接をしていたのですが、わかっちゃいるけどなかなか遵守するのが難しいところなんですよね。。

「何を作るか」と同じぐらい「誰と作るか」が重要だと思っているので、メンバーがよさそうという点には強く惹かれました。実際周りの人にFOLIOへ転職すると伝えたとき、たびたび「あそこ優秀な人が揃ってるって聞きますよ」って言われました。これはかなり嬉しかったです。

プロダクトがよさそう

自社サービスを担当することになるなら、Goodpatchで担当していたProttのように自分がターゲットユーザーになるものがいいなーとは以前から思っていました。
FOLIO株式投資の知識があまりない人でも、自分の興味のあるテーマを選ぶことで少額から株式投資ができるという、まさに自分が使いたいなーと強く思えるサービスでした。少し貯蓄に余裕ができたら株をやってみたいなーと思っていたので。
また、それを既存の証券会社との提携ではなく、自分たちで業登録を受け証券会社を設立してやるっていうのがすごいなと思いました。専門知識と技術力と粘る力がないとできないと思います。
加えて可能性を感じたのは、デザインがとてもいい。サービスデザインもUIデザインもビジュアルデザインも。
難しいと敬遠されがちな投資というフィールドにおいて、こんなにフレンドリーなデザインで投資の一歩を踏み出せるというのは画期的だなと思いました。

私は抽象的で規模の大きな夢を抱くのは苦手なほうなんですが、その私でもこのサービスでまずは日本をちょっと変えられるんじゃないかと本気で思いました。

分野がよさそう

自社サービスを担当することになるなら、自分が興味のある分野のものがいいなーと思っていました。
ただ私趣味が少ないので、興味のある分野がかなり少ないんですよね。。仕事のIT以外で興味ある!って思える分野は、インテリアと子供ぐらい。
でも生活と密接した「お金」にはもちろん興味があります。株もやってみたいと思ってましたし。
今まで数回確定申告をして個人事業主としての税金や申請の知識はちょこっとだけつきましたが、当然法人のことは全然わからず…。以前から社会の仕組みをもっと知りたいという欲求があったので、株式投資のサービスに携わる中でドメインを学ぶことが社会の仕組みを学ぶことになり、自分の資産運用にも活かせるとなったら一石三鳥なわけです。
社内のメンバーには外務員試験を受けている人が増えているので、私もいつかそういうのもチャレンジしてみたいなーという気持ちです。

あと、今までは関わる分野がかなりITに閉じていたのですが、そろそろ別の何かとの組み合わせを攻めてみたいなと思っていたんですよね。FinTechは少し前からだいぶ盛り上がってきているので、ちょうどいい時期かなと。

いろいろ書きましたが、要は面白そうだったんです。その感じが伝われば嬉しいです。

有給中にも何度か遊びに行ったり、今週月火と働いてみて、自分の選択は間違ってなかったなーと思っています。学ぶことがたくさんあって焦ると共に、まだまだ学べるんだという安心感もあります。大好きな”Be the worst”という言葉を久しぶりに思い出しました。
初めての金融系でカルチャーギャップに揉まれる毎日が始まりそうですが、自分のペースでがんばっていきたいと思います。

正式リリースを控え、これからFOLIOフォリオ)という名前を耳にする機会が多くなると思います!ぜひ覚えておいてください ٩(ˊᗜˋ*)و

そして会社が気になった方は、昨日出たばかりのインタビュー記事を見てみてください!
フロントエンド(React)/ バックエンド(Scala)/ iOS(Swift)他、絶賛募集中のようです。

ちょっとオフィス覗いて話聞いてみたい!って方、いつでもDMお待ちしてます🙆🏻

SPAにおけるCSSについて、ひとつの解

この話を簡単にまとめておこうと思います。
結論を先に書くと結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。

続きを読む

参加者の名は。の名札デザインを募集します!

先日、こんなWebアプリを公開しました。

yoshiko.hatenablog.jp

おかげさまでご好評をいただいており、利用しました!というご報告も複数いただいています!

ありがとうございます🤗

本日、以下の点を更新しました。

  • 出力される名札の並び順をアルファベット順に変更
  • カスタム背景画像アップロード機能
  • angular-cliの最新化

カスタム背景画像はCreateボタンの下にこんなエリアができて、背景画像を変えたり(今同じデザインの色違いしかないですが・・・)、お好みの画像を背景画像としてアップロードできるようになりました。

f:id:yoshiko_pg:20170224015750p:plain

そしてそして、ここに並ぶプリセットのデザインをもっと増やしていきたいなと考えており、デザインコントリビュートしてくださるかたを募集します🙌
背景画像+アイコンや文字のデザイン情報があれば、それらを反映させて動的にデザインを変更できるので!
詳細は以下にまとめています。

名札デザインプリセットの追加 · Issue #1 · yoshiko-pg/your-name · GitHub

コントリビュートしてみたい!というデザイナーさんがいらっしゃいましたら、上記issueへのコメントでもTwitterでのメンションでも構いませんのでぜひご連絡ください ✨
また、応援してくださる方はこちらの記事をデザイナーさんに届くように拡散していただけると助かります!

今後はストックしているご要望に対応しつつ、connpass以外のプラットフォームへの対応も進めていけたらいいなと思っています💪
フィードバックお待ちしています💁

イベント用の名札シート印刷アプリ「参加者の名は。」を作った

こんなものを作ってみました。

yoshiko-pg.github.io

続きを読む