鈴木颯介のブログ

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

「若いのにすごいね」

私は15歳のときからプログラマーとして働いています。

プログラマーとして活動していく中で、色々な大人と出会う機会がありました。その中で、多くの人から「若いのにすごいね」と言われることがあります。

昔、働きはじめたときや、働く前はその言葉は僕にとってとても嬉しいものでした。それまで大した長所もなかったけど、ここでは褒めてもらえるんだということが単純に。

今も、悪く言われるよりは良いと思っていますが、でも「若くなかったらどうなんでしょうね。」と思うことが増えました。

多分、プログラマーとして働いてきて、まだ2年やそこらですが、プログラマーとしてのプライドのようなものが気づかないうちに形成されてしまったのでしょう。

「若いのにすごいね」という言葉は「そのへんの同じ年の人と比べてすごいね」という意味でしょうから、そりゃあ2年間プログラマー(プログラミング歴だけで言えば4年くらい)をやっていればそのへんの同い年の人よりはプログラミングはできるようになるでしょうよって、そんなふうに思ってしまいます。

もともと自己を肯定するのが苦手なタイプなので、傷つくとかそういうことはないものの、「まあやっぱりその程度だよね」という風に思います。

でも、例えば自分が12歳の優秀なプログラマーに会ったら、そのときは「若いのにすごいね」という言葉をかけてしまうかもしれないなとも思います。そうなったときの私には、「そのへんの同い年と比べてすごいね」という気持ちはもちろんないでしょう。

でも、全く正当な目線で見れているかと言われれば、正直わかりません。相手の年齢が低ければ低いほど、実際よりその人の能力を無意識のうちに高く見てしまうのは、やっぱりあるんだと思います。

今の会社では、ほとんどの人が私の年齢を知っています。

会社の人からの私への評価は、本当に正当なのか、という不安というか疑問があります。単に私がひねくれているだけかもしれないですが。

あと、10年後もすごいねと言ってもらえるような技術者でありたいし、自分が大人になって、若い優秀な人に出会ったときにかける言葉はきちんと考えないとなぁって思います。

技術職で、あんまり年齢って公開するもんじゃないかもしれないですね、っていうポエムでした。

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には、僕の転校に合わせて給与をあげてもらったので、僕自信も労働に対してリソースの多くを割くようにしたという感じです。

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

まとめ

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

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