鈴木颯介のブログ

技術的なメモとかポエムとか。

2018年が終わるから今年を振り返ろう

2018年ももうすぐ終わりなので、今年1年を振り返ってみます。

1月〜3月-当時のバイト先の環境が大きく変わりました

当時のバイト先のBoostIOでの環境が大きく変わりました。会社としてのフェーズが変わり、人が変わり、オフィスが変わり、技術も変わり。それまではもっぱらフロントエンドをやっていたのですが、今年に入ってからはバックエンド開発の業務に関わることが圧倒的に増えました。

そしてこの頃から転校を考え始めました。

5月-N高等学校に転校しました

前にブログで書きましたが、N高等学校に転校して、生活環境が大きく変わりました。家にいることが多くなって体を動かす機会が減ってしまい、かなり太りました。

tako-programing.hatenablog.com

10月-大学受験に合格しました

こちらも以前ブログに少し書きましたが、筑波大学情報学群情報科学類にAC入試で合格しました。別に人にアドバイスできる立場ではないんですが、もし書類に書いた内容とか面接についてとか聞きたい方がいたらTwitterのDMとかFacebookメッセンジャーとかで連絡くれれば可能な範囲で公開はします。

12月-バイトが変わりました

約2年間お世話になったBoostIOを辞め、インターンという形でUbieというAI医療のスタートアップで働き始めました。

BoostIOを辞めた理由はUbieに誘われておもしろそうだったからというのが主な理由で、ドロドロした話は特にありません。「転職を考えています」という話をしたときも(当たり前かもですが)特に何もなく認めてくれました。最終日になぜかみんなでカラオケに行ってCTOにコブクロの蕾を歌われたり、サプライズでケーキが出てきたりしました。初めてエンジニアとして働いた会社で良い人たちと巡り会えたのは幸せなことですね。BoostIOでの仕事についてはそれについて1つ記事を書いてもおもしろいかもしれません。

Ubieに入った理由は、上にも書きましたが一言で言えば、「誘われておもしろそうだったから」です。以前から交流があったUbie社員のエンジニアの方に、Ubieオフィスで行われているイベントに誘っていただいて(そしてケーキをいただいて)、そこで話を聞いてインターンとして働くことを決めました。

Ubieで働き始めて2週間程度なのですが、すでに周囲の人々の能力の高さに圧倒されています。自分も価値を出していけるよう頑張ってまいります。

まとめ

結構適当に生きていたんですが、こうして振り返ってみると実はいろいろあった激動の1年になっていました。来年の4月からは大学生になったりとまたいろいろありそうなので、これからも精進していきたいですね。

Frozenをちょっとアップデートした

趣味で作っているMarkdownエディタ、Frozenをちょっとアップデートしたので忘備録。

GitHub: https://github.com/sosukesuzuki/frozen

Netlify: https://frozen-editor.netlify.com/

MobXからReduxに移行した

もともとMobXを使って状態の管理を行っていたけど、辛くなってきたのでReduxに移行した。MobXは書き心地は良かったけど、何も考えずに書くとあとで管理が大変になる。というか実際そうなってしまった。だからReduxに移行してみた。Reduxならアーキテクチャがコーディングの自由度をある程度まで下げてくれるから、後々になって見直しても問題なさそうな気がする。非同期処理はredux-saga。

1つ問題として、InversifyJSの使い方どうしようみたいのがあった。IndexedDBとLocalstorageを使う部分をInversifyJSでサービスとして実装してそれをMobXのストアのクラスに注入していたから、Reduxでそこをどう解決しようというのは少し考える必要があった。結論としては、InversifyJSの公式に載ってる関数に依存性を注入する方法を使って、reudx-sagaのジェネレータ関数に対して注入することにした。

普通のtextareaをやめてCodeMirrorにした

実際に自分で使ってて、普通のtextarea使いにくすぎるなぁと感じたのでCodeMirrorに移行してみた。

CodeMirrorをReactで使うときはちょっとした工夫が必要だったりする。今まではクラスコンポーネントのライフサイクルメソッドでそれをやっていたけど、今回はHooksを使うことにした。Hooksについては前から他の用途で使っていたから、それなりにすんなり使うことができた気がする。使うたびに思うけど、今後のReactは本当にクラスコンポーネントを使う必要がなくなるなぁ、、、

Workspace機能を実装した

バイト中につかっていて、プライベートのメモと混ざりそうで面倒だったからワークスペースごとにメモを作成できるような機能を実装してみた。左側にSideNavigationを表示して、そこでワークスペースを切り替える。ワークスペースの追加や名前の編集、削除などはモーダルから行うことができる。

InversifyJSでMobXのStoreに注入します

Frozenエディタを開発するにあたって、localStorageとIndexedDBを扱う関数をMobXのStoreから叩いていたけど、テストが書きにくい。最近バイトでInversifyJSを使ってサーバーサイドの開発をやっているので、ここでも使ってみたい。

ServiceとそのMock、Interfaceを定義する

今回はとりあえずLocalStorageServiceを作りたい。その人がFrozenにアクセスしたのが初めてかどうかという情報をIS_FIRST_ACCESSというキーを使ってlocalStorageで管理ているので、そんな感じで書く。

// LocalStorageService.ts

import { injectable } from "inversify";

const IS_FIRST_ACCESS = "IS_FIRST_ACCESS";

export interface LocalStorageServiceInterface {
  setIsFirstAccess: () => void;
  getIsFirstAccess: () => string | null;
}

@injectable()
export class LocalStorageService implements LocalStorageServiceInterface {
  setIsFirstAccess(): void {
    localStorage.setItem(IS_FIRST_ACCESS, "false");
  }

  getIsFirstAccess(): string | null {
    return localStorage.getItem(IS_FIRST_ACCESS);
  }
}

function doNothing(): any {}

@injectable()
export class MockLocalStorageService implements LocalStorageServiceInterface {
  setIsFirstAccess = doNothing;
  getIsFirstAccess = doNothing;
}
// TYPES.ts
export default {
  LocalStorageService: Symbol.for("LocalStorageService")
};

ここは普通にInversifyJSを使うのと何も変わらない。本当はMockもちゃんと作ってあげるべきなのだけどここではとりあえずdoNothingで、、、。

Containerを作る

ここでinversify-inject-decoratorsという別のライブラリを使う。このライブラリを使うことで本来コンストラクタインジェクションができないような、別のライブラリ(ReactやMobXなの)が作るクラスのインスタンスに対してもコンストラクタインジェクションができるようになるらしい。

// container.ts

import "reflect-metadata";
import { Container } from "inversify";
import getDecorators from "inversify-inject-decorators";
import {
  LocalStorageServiceInterface,
  LocalStorageService,
  MockLocalStorageService
} from "./services/LocalStorageService";
import Types from "./services/Types";

const env = process.env.NODE_ENV;

const container = new Container();
export const { lazyInject } = getDecorators(container);
if (env != "development" && env != "production") {
  container
    .bind<LocalStorageServiceInterface>(Types.LocalStorageService)
    .to(MockLocalStorageService);
} else {
  container
    .bind<LocalStorageServiceInterface>(Types.LocalStorageService)
    .to(LocalStorageService);
}

こんな感じで環境に合わせてバインドするサービスを変えて、getDecoratorscontainerを食わせた結果のlazyInjectというやつをexportしてやる。

Storeで使う

InversifyJSの通常のinjectと同様にデコレータとして使って注入する。終わり。

// HogeStore.ts

import { lazyInject } from "../container"

export class HogeStore {
  @observable public hoge: Hoge = "hoge";
  @lazyInject(Types.LocalStorageService)
  private localStorageService!: LocalStorageServiceInterface;

  /* いろいろなメソッドら */
}

感想

inversify-inject-decoratorの挙動が全然わかっていないので雰囲気で使っていてよくないので、何をしてくれるライブラリなのかをしっかり把握しておきたい、、、。あとこの記事にあるコードはFrozenのソースから抜いてきて補完のない場所で改変して載せてるので、ミスっている場合があります。気づいたら教えてください:pray:

ReactとMobXでオフラインで動くMarkdownエディタを作った

趣味でFrozenというMarkdownエディタを作ったので紹介します。名前の由来は、前に作ったMarkdownエディタの名前がRapunzel(ラプンツェル)だったのでディズニープリンセスつながりでFrozen(アナと雪の女王)。

Markdownエディタ、どれも微妙

世の中にはいろいろなMarkdownエディタがありますが、どれも微妙なんです。例えば、Boostnoteは高機能すぎて、ノートが多くなると重くなるし、OSSだけどコードベースが割と大きいから手を出すのが辛い。typoraは書き心地は良いですがノートの管理までは担当してくれません。

その中でいいなと思ったのが、mizchiさんのmarkdown-bufferでした。でも複数のノートを同時に管理したいという欲求があって、そのためにタブ機能のついたmarkdown-bufferを作る必要があったのです。

(ちなみに、前も同じようなモチベでRapunzelというやつを作ったんですが、自分で作っておいてこいつにも不満が出てきてしまいました。)

技術スタック

タイトル通りなんですが、ReactとMobXで作りました。また、CSSをあてるためにstyled-componentsを使っています。

あと、オフラインで動いてほしかったので、Service Workerでキャッシュして、データはIndexedDBに保存するようにしました。ちなみに、IndexedDBを操作するためにDexieというライブラリを使ってみたんですが、なかなかよさげでした。そしてそのノリでDesktop PWAに対応してみました。

また、配色は個人的にお気に入りのDraculaを真似てみました。

(mizchiさんのmarkdown-bufferと違って、MarkdownのパースをWeb Workerでやるとかはしていません。今後やりたいですね。)

感想

この記事もFrozenで書いているんですが、自分が自分のために作っただけあって自分にとっては割といい感じです。

小規模な開発だからテストはいらないとおもっていたんですが、すでにテストがほしくなりつつあるのでテストを書きつつリファクタをしつつといった感じで今後も改良はしていくつもりです。

近況をまとめてみる

こんにちは鈴木颯介です。大学受験が終わったので近況をここにまとめておこうと思います。

筑波大学に合格しました

筑波大学情報学群情報科学類にAC入試で合格しました。めっちゃうれしいです。相談に乗ってくれた方々、面接練習に付き合ってくれた方々には大変感謝しています。

バイトではTypeScriptを黙々と書いています

相変わらずBoostIOというところで働いているのですが、最近はIssueHuntというサービスのバックエンドをTypeScriptで書いています。去年はフロントエンドばっかり書いていたのですが今年はバックエンド。たくさん学べて嬉しいです。

TypeScriptは型システムは結構好きで普通に使っている分には大きな不満はないんですが、JavaScriptの闇を見るようなところがあってそれはつらいですね。

そして人と一緒に開発をするという面でつらさを感じることが多々あります。これは別にパワハラみたいなそういう意味合いではなくて、複数人での開発を円滑にすすめていく上での必要最低限のコミュニケーションが非常に難しいみたいなそういう意味です。

あとキレイなコードが書けなくてつらいです。本当に。僕無能だなぁみたいな気持ちになります。精進せねばいかん。

数学の勉強をしないといけません

大して受験勉強をせずに合格してしまって、基礎的な教養が圧倒的に足りておらず、大きな焦りを感じています。数学の勉強をすること自体が好きなので、適当に進めていますが、大学入学までに数Ⅲまで終わる気は全然しません。まずい。

型システム入門を読むために記号論理学の勉強を始めたんですが、それ自体がたのしくなってしまって暇なときに適当に勉強をしています。

あと結城浩先生の数学ガールシリーズを何冊か読んだりしています。おもしろくてすごく好きなんです。上にも書いた通り、僕は数学の知識が全然ないので自分にとって新しい概念を知ることもありますし、すでに知っている概念についての理解が深まることもあります。

英語の勉強をしないといけません

英語が全く聞けないし喋れないということにも大きな危機感を持っています。バイト関係でお会いすることがある方々、みんな英語を話せるんですね。とっても焦る。そろそろ本気で勉強しようって思います...

英語のドキュメント読んだりIssueのコメントを返すのとかに時間がかかってしまうし、英語ができないせいで逃している情報がたくさんあるような気がしてすごくつらい。

花嫁修業をしないといけません

家から大学までがあまり近くないので大学に入学したら一人暮らしをすることを考えていますが、驚異的なまでに家事ができないので、花嫁修業をする必要があります。僕は家事が好きではないのでかなりつらい。一人で暮らしても餓死しないように、すき家が近くにある家を借りる必要があります。

ErgoDox EZを買いました

以前から興味のあったErgoDox EZを思い切って購入しました。多くの方が同じようなことを言ってますが、独特なキーの配置は慣れれば楽です。細かいキーマップを設定できるのも気に入っています。いい買い物をしたと思います。

当然ですが、この記事もErgoDox EZを使って書いています。肩が平和です。

最後に

とりあえず進路が決まってほっとしています。読み返して思いましたが、つらいことばかりですね。つらい。

N高校へ転校して約一ヶ月レポート

こんにちは、鈴木です。僕は2018年の4月をもって千葉県の県立高校からN高校ネットコースに転校しました。つまりこの5月は通信制高校の生徒として過ごす初めての月でありました。ということでこの約一ヶ月のレポートです。

転校の理由

まず全日制普通科高校から通信制高校に転校した理由ですが、端的に言えば、「転校した方が全てにおいて良い」と判断したためです。

僕の通っていた高校は俗にいう自称進学校というやつで、一般入試でできるだけいい学校に行かせようとする風潮がありました。何も一般入試以外が禁止されているというわけではないのですが、学年で集会が開かれるたびに「推薦入試やAO入試へ逃げないでください」と言われます。その方針自体は別に構わないのですが、僕はその発言が日頃からストレスになっていました。人が頑張ろうとしていることを逃げ道だと言わないで欲しいと思ったわけです。人のモチベーションを削ぐことようなことを平然と公で語る教育機関、よく考えたら最悪では

学校への不満以外での話をするなら、自分の時間を増やしたかったというのが大きな理由ではあります。僕は今ソフトウェアエンジニアとしてリモートワークでアルバイトしています。全日制の学校に通っていた頃は火水木曜日の17:00~22:00で働いていました。もちろんこれは自分で申し出た時間で働いているので、それ自体はなんの問題もないのですが、自分のやりたいことができていないなぁとは日々感じていました。1日のうち八時間を学校に持っていかれ、そのあと5時間アルバイトとなると、翌日のことを考えると自分の興味のある領域の勉強に充てる時間はほとんど残りませんでした。その状況を打開するための手段として、いくつかあるとは思いますが、僕が最終的に選んだのが「通信制高校への転校」だったというだけです。

個人的には、これは僕にとってだけの最適解ではないと思っていて、この選択をとる人間があまりいないというだけで、もっと多くの人間がこの選択をとってもいいかなと思いました。だいたい、みんなツイッターとかで「学校クソ!!辞めたい!!」とか言っていて、クソなことはわかってるんだから、無理に嫌な所に居続ける必要もないのでは?と、今となっては思います(もちろん、なんとなく躊躇してしまう感情がわからないわけではありませんが)。

転校する時に懸念していたポイント

転校するとなった時に懸念していた点は2つで、1つは「卒業できるのか」です。結局卒業できなければ通い意味はあまりありませんから、ちゃんと調べてみて単位が足りていて卒業できることは確認しました。

2つ目は「多くのお金がかかってしまうのではないか」ということです。これについては、調べてみた所想像していたよりは少ない金額(20万円しないくらい)での転校が可能であることがわかったので、転校することにしました。(このくらいの金額であれば、親から金銭面で反対されても自腹で払えるので。)

今の生活

今は主に、大学の準備をしたりアルバイトをしたり好きな勉強をしたりして生きています。割と多くの時間をアルバイトに割いていますが(週に4日8時間程度)、好きなことはある程度満足にできている状態です。

勤務先のBoostIOには、僕の転校に合わせて給与をあげてもらったので、僕自信も労働に対してリソースの多くを割くようにしたという感じです。

もともと身だしなみに気を遣うタイプではないんですが、家から出て人と会話する機会が圧倒的に減ったため、より一層身だしなみを放棄するようになりました。最近の趣味は毛抜きで顎のヒゲを抜くことです。

まとめ

全日制普通科高校から通信制高校に転校して、良かったと思っています。むしろ、悪かった点を探す方が難しいくらいです。

唯一後悔した点で言えば、学校の人間に本当に直前まで転校することを伝えていなかったことでしょうか。周囲に対して自分が予想していたよりも衝撃を与えてしまったようです。皆さんも転校する時はできるだけはやめに周りに告げておくとフレンドリーでいいと思います。

16歳プログラマから17歳プログラマになっちまったけども。

こんにちは、鈴木(https://twitter.com/szk_ssk_tako) です。僕は2001年の3月1日生まれなので、もう17歳になってしまうわけですが、この一年間の振り返りをしようと思ったわけです。 2017年の振り返りの記事ではプライベートなことを多く書いたので、今回は約一年間、プログラマーとしてアルバイトしていたということに焦点を当てて書いていこうと思います。

経緯

 僕は、2017年の1月下旬からBoostIO株式会社という会社でフロントエンドエンジニアとしてアルバイトさせてもらってます。BoostIO株式会社(旧Masisin&Co)では、日本のベンチャー企業としては珍しく結構大きめなオープンソース・ソフトウェアを開発しています。身内贔屓抜きに結構使いやすいので、使ってみてくださいね。

 僕はもともとこの会社の開発するそのOSSの1ユーザーでした。それで情報を追っていたら、なんかよくわからないんですが、この会社が突如として洋服を販売し始めたんですね(https://boostnote.paintory.com/)。それで、このアプリが好きだったので、少しでも貢献したくて服を買ったんですよ。でも買って着ないのはもったいないので、500ハッカソン にBoostnoteのパーカーを着て参加しました。そしたらなんと、ハッカソンの主催の会社の方とBoostIOの代表が知り合いだったんですよ。なんかノリでその主催の会社の方とツーショットを撮り、BoostIOの代表に送ってみたところ、会うことになり、採用されることになりました。ありえん奇跡ですね。

 当時、特に技術的な成果を残していたわけでもない僕みたいなひよっこ高校生を、ちゃんと給与を払って採用してくれた代表には大変感謝しています。

良いこと

 僕はもともとJavaやらScalaやらKotlinやらが好きだったんですが、なんと、この会社のプロダクトはreact!redux!electron!わーい!そう、これ、一見辛い状況に見えなくもないんですが、今となっては非常に良かったと思います。というのも、一体、誰が好き好んで、今の混沌としたフロントエンド界隈に足を踏み入れるというのでしょう。仮に僕がJavaScalaでサーバーをやる会社に採用されていたら、まず間違いなくフロントエンドの界隈をひたすら避け続ける人間になっていたと思います。今となっては慣れたので、yarnだのwebpackだのbebelだのreactだのreduxだのなんだのっていう環境を割とパっと作れますが、何も知らなかったら発狂していたはずです。この分野、正直独学でやるの結構きついんじゃないでしょうか、、、。少なくとも僕は嫌。

 あとgit、バイトを始めるまでは git add → git commit → git pushくらいしか使わなかったし、「あ、なんかリジェクトしてやがる、ぐへへ、フォースプッシュしてやるぜ」くらいの雑な使い方をしていましたが、割と大きいOSSのメンテナ業をやるにあたってそれは問題なので、勉強し、今ではそれなりに使えるようになったと思います。

 そして、コードリーディングとコードレビュー。OSSの文化とかもよく知らずにひとりで淡々と勉強だけしていると、他人のコードを読むことも、他人にコードを読まれることもありません。バイトを始めてからというものの、先輩エンジニアの書いたコードを読むことも増えたし、きちんとしたレビューをしてもらえるようにもなりました。それこそ、最初の頃は、先輩エンジニアの方はきっと「なんやこのコード、おれはESlintじゃねえ!」とか思ったでしょう、それくらいひどいコードを書いていました。今も相変わらずクソコード生産機をやっていますが、幾分かマシになったはずです。それに、最近はコントリビューターの方々のプルリクをレビューをちゃったりしてます。ほんっとうに良い経験をさせてもらっている。

 最後に給料。以前までやっていたガソリンスタンドのバイトよりは少ない負担で多くの給料を貰えています。興味のないクルマに興味のない液体を注いで食う飯よりコードを書いて食う飯の方が美味いです。

辛いこと

 僕は普通科の全日制高校に通っています。まずその時点で1日のうち8時間が持って行かれます。そして2017年の3月いっぱいまでガソリンスタンドのアルバイトをしていました。それで週に4日くらい、1日4時間、多い日は8時間持って行かれていました。その時が一番つらかった!死ぬかと思った!生きてるけど!生きててよかった!でも今は働く時間を工夫したり、色々したりして深夜0時までには就寝するようにしています。

 もちろん、バイト先には、僕より年上のエンジニアの方がいます。みなさん、本当に優秀(この表現、上から目線な気がしますが、そういう意図はありません。)で、僕は、ある意味でそういう人たちと同じ土俵に来てしまったわけです。コードレビューでたくさん指摘をもらったりすると、「あー、僕無能だなぁ、これレビュワーの人も大変だろうなあぁ、むしろレビュワーが書いた方が全然早いんじゃなかろうか。」とか、たまには思ってしまうんですよ。もちろん、本当にありがたいとおもっていますし、確実に自分のちからになっているとはおもっています。ですが、今まで一人でやっていたものが、自分より優秀な人に囲まれる環境に急に変わるのは、僕にとってちょっとした精神的負担だったりしました。

 英語が書けなくて辛い。これはかんっぜんに、100%、僕の力不足なんですけども。中学英語とGoogle翻訳を駆使したブロークン・イングリッシュは、関係者各位に多大なご迷惑をおかけしたことでしょう。勉強がんばります。

 さっきも言ったとおり、BoostIOで作っているプロダクトは、フロントエンドでは主にReactを使っていて、Javascriptで書きます(余談ですが、社内にJSerが多いため、サーバーもNode.jsで書かれていますね。サーバー側はFlowやらTypeScriptを使っているみたいです。僕はサーバーはめったに触らないのであまり関係ないですが。)。でも、正直、僕、Javascript嫌いなんですよ。オライリーの「Javascript the good parts」の悪いパーツの章を読むと「それな〜〜!」と声が出てしまうくらいには嫌いです。まあ、もともと静的型付けの言語しかやったことがなかったから、まず型システムの時点で苦しかったし、ミュータブル的思想ととイミュータブル的思想が気持ち悪く混在した標準ライブラリも苦しかったし、(これはJavasciptの本質かと言われるとそうではないですが)ありえん数の周辺ツールも、僕を苦しめました。というか今も慣れはしましたけど全部苦しいです。

まとめ

 辛いことは確かにありますけど、よいことの方が多かったです。僕は将来コードを書いてくっていけたらいいなと考えているので、この年齢のうちから実際のプロダクトに触れているのは、そういう意味でも良いことなんじゃないですかね。こうして年齢を重ねていってしまって、終いには「この年齢のうちから〜」とかいえない年齢になるんでしょうけども。どうでもいいですが、友人や姉から「17歳、似合わない」とよく言われますね。16歳か18歳の方が似合うみたいです。セブンティーン。青春ぽい。

 ここまで読んでくれた物好きな方、本当にありがとうございます!うれしいです!ついでに、僕のほしいものリスト(http://amzn.asia/1fjwrls) から、技術書とか、お風呂に浮かべるあひるとか、買ってくれると喜びますよ!