鈴木颯介のブログ

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

大学に入学して2週間くらい経って、良かったことと困ったこと。

4月から筑波大学情報学群情報科学類の学生になりました。

良かったこと

変な人に会った

同い年のKotlinコントリビューターのウェブエンジニアに会いました。彼と話すと技術的な話で盛り上がります。彼は僕と同じくウェブエンジニアですが、フロントエンドは僕の方が得意で、バックエンドは彼の方が得意なようです。でも彼は僕と違って人と話すのが苦手ではないそうで、どんどん知り合いを増やしています。悲しくなるのでやめてほしいです。

同い年の型大好き好きマンに会いました。彼はもともとゲームを作りたくてプログラミングを始めたそうですが、手を動かしていたら間違えて単純型付ラムダ計算を実装してしまったそうです。よくわかりませんね。ちなみに、Advanced Topics in Types and Programming Languagesが恋人だそうで、彼の家に遊びに行ったら枕元においてありました。

学問に若干触れるのは楽しい

大きな部屋で行われる形の講義でやたらと機械学習とかの話をされますが、機械学習の応用とか如何に利益を出すかとかではなく、数学的な話がほとんどです。内容は理解できないことも多いですが、数学モチベは上がりますし、なにより単純に楽しいです。

パン屋さんが安くて美味しい

学校内にあるパン屋さんが安い上に美味しいです。

困ったこと

決まった時間に動くのは難しい

僕は1年くらい前に津田沼高校という全日制の高校を辞めてから、時間を気にせずに生きていました。前職も現職も働く時間がかなり自由だったし、学校もなかったので、好きな時に起きて好きな時に働いて好きなと時に寝ていました。そんな人がいきなり普通の大学生っぽい生活リズムに合わせて生活をしたら肉体的も精神的にもそれなりにストレスを感じるというのは想像に難くありません。

うわっ私の学力、低すぎ・・・?

僕はAC入試という他大学で言うところのAO入試みたいなもので入ったのですが、当然周りはみんな普通に受験して入ってきています。学類内で一番多いのは当然一般受験を乗り越えて入ってきた人達です。そんな人達と同じ土俵で数学をやるのは結構無理があります。僕は色々あって数学Bと数学Ⅲを履修していないんですが、例えば線形代数の授業では平面ベクトルと空間ベクトルは使えることが前提となって話が進みます。なんとなく独学でやっていたので、致命的に困るレベルかと言われればそんなことはないんですが、普通に考えて直近1年ずっとプロダクト開発のためのプログラミングをしていた人とずっと受験のための勉強をしていた人には大きな差があります。AC入試、良い仕組みだとは思いますが、学力がとっても低い人が入れてしまうので少しは学力でふるいをかけたほうがむしろ受験者に優しいような気がします。

ちゃんと時間をかけてやっていくしかなさそうです。

部屋から腐卵臭がするらしい

僕の部屋からは腐卵臭がするらしいです。なんで? しかもこういうのって自分では気づけないんですよね。来客が指摘してくれるまで腐卵臭に気づきませんでした。とりあえず台所周りをちゃんと管理するのと掃除をしてゴミを出すというのを徹底する必要がありそうです。

一人暮らしをはじめました。辛いです。

4月から筑波大学に進学するため、つくば市で一人暮らしをはじめました。辛いので辛さをまとめておきます。

暗い。

つくば駅付近はショッピングセンター的なものがあって実家付近と雰囲気があまり変わらないものの、自分が住んでいる区域が街灯が少なく夜間暗すぎます。日中に起きれないので夕方起きて深夜に活動していたんですが、知らない暗い街を深夜歩くのは普通に怖いです。それに4月とは思えないくらい寒いし。本当にやめてほしい。

家事ができない。

これは私のせいなんですが、家事ができません。洗濯のやり方とか知らないしゴミの捨て方も知らないし料理なんてもちろんできません。スクランブルエッグの作り方と電子レンジの使い方は教わったのでサトウのごはんを使うことでスクランブルエッグ丼を作ることができます。

寒い。

部屋が寒い上に蛇口からはお湯が出ないので皿を洗うのがつらすぎる。しかも流しの下に最初からゴキブリの死骸があるし全然意味がわからないのでゴキブリホイホイをたくさん置きました。

大切なものは失ってから気づく。

実家に何気なくあったもの、なくなってからその大切さに気づきます。よさげな位置にあるティッシュとかゴミ箱とかタオルとか、、、。両親を尊敬します。

飯は待っててもでてこない。

寝ているだけではご飯はでてきません。作るか買うかしないといけません。でも作れないのでコンビニまで買わないといけなくてすっごくめんどくさい。飯を食わなくなりそうです。

洗濯物かごに洗濯物を入れるだけでは洗濯されることはない。

洗濯物かごに洗濯物を入れてもそれだけでは洗濯されることはありません。ただでさえ洗濯機を使うのが難しいのに終わったあとに干さないといけない。母親は毎日それをやっていたと考えると本当に敬意を払うべきですね。

朝起きれない。

今はまだ学校が始まっていないので大した問題じゃないんですが、フレックスでコアタイムがないのをいいことに仕事を夕方から始めるのがスタンダードと化してる身としては、誰かが起こしてくれない環境で朝起きれる自信が本当になくて、つらいです。

まとめ

今までどれだけ甘やかされて育ってきたかわかりますね。母親曰く「不器用すぎて教えるより私がやったほうがはやかったから教えなかった」らしいですが、この機会に克服したいとは思っています。 ほしいものリストを載せておくので惨めに思った人はなにか恵んでやってください。 https://www.amazon.jp/hz/wishlist/ls/2VMKXAI8J8278?ref_=wl_share

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を使って書いています。肩が平和です。

最後に

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