岸原オカルト研究部

プログラミングを勉強していくブログです

ISUCON13に参加しました

素敵な夜ですね。ISUCON13に参加しました。
約680チーム中約380位でした。2倍のチューニングができました。
とても楽しかったです。
任意のステークホルダーにお礼申し上げます。

ログや反省は詳細をzennに書きました。
ISUCON13参加ログ
ISUCON環境構築(一人チーム版)

次回目標としては、

  • また一人参加なら上位30%、その次に入賞
  • チーム参加なら入賞

を考えています。がんばります。

転職しました(2023年9月)

素敵な夜ですね。転職し、状況が落ち着いたので、今回の転職について報告する。

私はどういう人間か

kisihara.cと言います。IT開発職です。趣味としては十五年程度断続的に、業務としては三年程度プログラミングに取り組んでいます。使える言語はJavaScript、(Ruby、)C#です。小物を作った事がある言語はもう少し多いです。ゲームが好きで、プレイする側としては高難易度or対人のアクションゲームを好みつつ、たまにVRSNS(VRChat)でイベント開催の経験もあります。

今回の転職でどこから何をなぜ目指したか

エンタメ系の自社開発スタートアップから、同じく自社開発の企業への転職を目指しました。理由は率直に言って技術面でより成長できる環境を探す必要が出ていた事、及び業績不振によって生活を守るため転職しなければならなくなった事です。前回とかなり似てはいるのですが、螺旋のように少しだけアップデートされているかもしれませんし、いないかもしれません。

どうなったか

大手の新規事業部含めた4件の内定をいただく事ができました。

今何をやっているか

大手の新規事業部の開発チームにジョインしました。Golang、TypeScript、AWSを触る事になります。単純に会社の技術(アバウトな言い方ですが)に惹かれた事、事業が好調で成果を様々な方に届けられそうな事と、エンタメ領域で自分の勘が働きそうだと思った事が理由です。

全然共通性のないスタックに飛び込んだ(前職はRails/Unity/GCPで、被る部分がない)ので求められる技術が広がり、増え、大ですが、楽しいです。週によっては一週間で20個くらいなんらかのgetting startedを見た気がします。

入社時の自分よりは技術力が高いであろう、有名な方も多い会社です。かなり身構えていたのですが、それでも、領域によっては通用しないわけではなさそうである事がわかりました。

仕事としては、チームの関係で職務領域が難しい事になっており、やりがいはあるがコントロールに力量がいりそうです。インフラは完全に専門外でしたが、terraform力を鍛える必要がありそうで、というかもう必要に応じて最低限のキャッチアップを行いました。事業についても、BtoBtoCに近い部分もあったり、お手伝いする必要がある様々な課題がありそうだったり、BtoBtoCの勘は全くなくて数字方向にはしばらくバリューを発揮できそうになかったりで、なかなか難しいです。ただ何より、事業領域は考えていた通り楽しくて、良かったです。

今まさにやっているタスクも、自分のようなエンタメ系を志向するエンジニアにとってとてもテンションが高まるもので、嬉しく思っています。

なぜ、について

一度は一緒にやっていきたいと考えた会社を離れなくてはならなくなったことについて、思うところはたくさんあります。そういった機会は今回が初めてになった為、転職時点では慣れた反応をする事ができかねました。ずっと一緒にやれるならやりたかったという部分がございます。他方、技術的成長の機会が限られ、技術的投資も限られている中で、このままでは私の未来が袋小路になるとも考えておりました。また、業績不振については、現場でのレベルでやるべき事はやっておりましたが、それだけではどうしようもありませんでした。一度は一緒にやりたいと考えた事業が、目の前で延々と堅調な成長を続け、(大学の専攻や職歴により)経営についてもある程度理解している為にスタートアップの堅調な成長というのが何を指すかというのは常に突きつけられ、まさにこういった結果になった事は、非常に楽しい経験でした、感謝の気持ちでいっぱいです。もともと成長への意欲はありましたが、自身のキャリアアップができて、責任と権限持って貢献できる土壌がある場所を探す事が重要というのは、今回の職場でも改めて心に刻みました。

どうやったか

自分の立場は、恐らく世間一般の区分でいえばメンバーエンジニアという事になると思いますが、ポテンシャル層である事も決して否定できません。通常の求人にただ応募するだけでは、やはり落ちる事も多かったです。しかしながら、しっかり自分が貢献できる場所にジョインしなければ、必ずまた同じ状況になります。長期的な手を打たず、短期的な手を繰り返し、来るとわかっている未来になるたびにもがき、同じことを繰り返す事は、行いません。

私は他の方に外注する小規模プロジェクトのような活動をずっと行い、もろもろ整える経験も、そろばんを弾く経験もある程度しています。また、営業職をやっていたので、コミュニケーション能力にも不足を感じておりません。技術についても、競プロ等を通して最低限の勉強はしています。必ず、自分の力を必要としている場所があると考えました。よって、「職場の技術レベルは高いが人手が足りない場所」という観点に絞って応募しました。「そりゃシニアを雇えるならシニアを雇いたいが、ポテンシャル層でも自走できる人間であれば欲しい」職場です。得意な事業領域において、技術のキャッチアップが済めば、とても貢献余地があるだろうし、会社もそう思うと考えたのです。

使用プラットフォームは、転職ドラフトとforkwellを一応使いました。転職ドラフトでは条件面含めて素敵なスカウトがたくさん来て自信に繋がりましたが、他方事業に拘りがあり実績が中途半端な現状だとあまり良い結果には結びつかなかったように思います。forkwellは、経由して一件内定も頂きお世話になりました。使いやすいサービスだったと思い、おすすめ致します。

選考総括

AtCoderで所持している緑ランクについてはやはり受けは良かったなと考えています。(これは茶色の頃と同様ですが、)コーディング試験でもまず落ちません。他方、おそらくポテンシャル層を超えてくると力不足になりそうな気配がありました。実際に面接でも、「うちは黄色とか結構いるけどね」だったり、「緑にした時点で止めてるみたいだけどこれはなんで?」みたいな話題が出ました。以前の入緑記事でも書いた通り、水には上げなければいけません。一年半前の前回に比べると、AtCoderを知らない面接官様はだいぶ減ったように感じます。今回スカウトを大量に頂いたので、ある程度技術的に貢献できそうな会社から優先して応募させて頂いた結果そうなったのか、AtCoderがマクロ的に浸透しているからそうなったのかはわかりません。

ほか、実績について聞かれる質問が非常に困りました。先述の通りこの一年半は状況が悪い事業において、厳しい戦いだったので、自分個人の実績という意味ではどうしても弱くなってしまった部分があります。ただ、振り返って見れば、しっかり説明すれば大手企業様でも刺さるポイント刺さらないポイントはあって、しっかり説明すればマイナスに思う必要はなかったかなと今は思います。前述の通り結局のところポテンシャル層を欲しがる場所に行くしかなかったので。

関連して、転職サービスのエージェントさんからは、「経歴書には事実と数値実績だけでなく、ソフトスキルや定性的なチームへの貢献実績も書け」というアドバイスを頂きました。自分の経験や周囲の経験だと、そういったものは書いても仕方ないものだ(読まれない、逆に面接官の立場に立つと読むべきではないもの)と考えておりましたし、今もイメージは変わりません。一件だけ最終面接で「ベテランを雇うわけじゃないんだからソフトスキルや定性的な人柄的な事も知りたい」とはっきり仰った面接官様がいらっしゃいましたが、他の言動に失礼なものが多く、大変恐縮ながら面接は不快な内容でした。結局のところどういうキャリアのステージであれ(業務 or プライベート問わず)目に見える実績を積むしかないのかなと思わされました。

ついでにいうと、ある会社様の採用面接というのは特殊なものがあって面白かったです。自分自身ポテンシャル層という事もあってか、人柄重視の課題が多く、最終面接は、非常に学生時代の事をたくさん聞いて頂けました。新卒の頃の面接を思い出しました。

システム設計試験の対策もしたのですが、今のキャリアだと不要でした。他方、分野別トップを誇る一社様だけ、メンバーエンジニア採用の際もシステム設計試験を課す会社様があり、実績重視の面接をされるという事で不利を自覚し選考応募はしなかったのですが、やはり見るところは見るのだなとも思いました。

想起されると、「◯◯みたいなタイプだね」と言われると困り、結果も悪い事が多かったです。自分の履歴書には誰が見てもわかる弱点が一点ありますが、それはもう過去の話で俺の仕事人としての弱点ではなくなっています。それをもっと瞬発力と説得力持って説明していけるようになりたいですし、そこがミスマッチになる会社様にはそもそも入社するべきではないのだろうなとも思います。人間頑張ったらいろんなことができると思っていて、実際に「意外だね」と言われる趣味を複数持っている人間なので、そういった「タイプで理解するタイプ」とはそもそもの相性が悪いのかもしれませんし、自分のコミュニケーション力はまだまだ伸びしろがあるのかもしれません。

総じて、コーディング試験は楽だったので、面談選考の記憶が強いです。自分の競プロ力は一般の方に比べると非常に強いと思っています。他方、競プロ勢から見ると競技のスタートラインにすら立っていない程度でしか有りません。面接をハックしている感があり、思えば期待の持たせすぎに繋がらないかは非常に気になる部分ではあります。ただ、現職だともっと強い方がたくさんいるので、もう気にしなくてもいいのかもしれません。

反省点

ここ一年半の学習に関して、読書については興味を持ってしっかり有用な知識を得ていけたなと思っていますが、ISUCON過去問に取り組むのはもっと早くても良かったなと思いました。敷居の高さ故に足踏みをしてしまっていたのですが、いざ初めてみれば中身は本当に面白いし、勉強になりますし、解説記事を読めばなんとかなります。

そういった中で選考については素敵な内定も複数頂けたので良しとしており、あとは前職での業務についての反省…というか悔いは非常に多いです。

そもそも、俺の選択は合っていたのか? 前回の転職では、最後に技術と給与は高いが事業への興味がそれなりなA社、事業への興味は強いが給与が低く技術はわからないB社の選択となり、興味があることのバフが強い自分の性分を考え、最終的にB社を選びました。A社の事業への興味も決して低くはなかったです、SES時代に殺意を持って作業していた部分の自動化サービス事業という事で、モチベは十分にありました。キャリアが浅い中では、A社に進むべきだったのではないか? 少なくとも、オファー面談にて、ほんとうの意味でお互いを理解し合うという気持ちはしっかりあったか。

得た教訓は非常に多いです。

総括

今回の新しい職場もキャッチアップから始まります。サーバーのパフォーマンスについてはこれからも取り組みます。

今後やりたい事については、前回の転職記事とほぼ変わっていないと思います。技術力がほしい。もっと言うと、確固な学術的知識をベースにして動けるようにしたい。サーバーのパフォーマンス周り、クリエイティブコーディング/Unityなどの実践的な勘所を一通り抑えつつ、ゲーム/エンタメと親和性がある特定領域で修士になりたい。それらを用いて数字についても役割を持てるようになりたい。そして前回からの追加で言えば、責任と権限が必要な場面では得られるようにする。

今回の転職ではお友達に相談したり、同僚の方にリファレンスチェックをお願いしました。生活が懸かっていたので応援が心強かったです。本当にありがとうございました。マイクロブログ相互の皆さん、VRChat相互の皆さん、いつもお話してくださってありがとうございます。これからもよろしくお願いします。

仕事していきます。よろしくお願いします。よければSNSフォローお願いします。

転職します(2022年3月)

素敵な夜ですね。 今回の転職について整理する。

私はどういう人間か

kisihara.cと言います。IT開発職です。十年程度断続的にプログラミングに取り組んでいます(主に、同人活動を含む創作活動にて)。得意な言語はJavaScriptだったはずです。最近Rails競技プログラミングC#)にも取り組んでいます。ゲームが好きで、プレイする側としては高難易度or対人のアクションゲームを好みつつ、最近はVRSNS(VRChat)でイベント開催等もしています。

今回の転職でどこから何をなぜ目指したか

非IT営業からプログラマを目指しました。プログラマとはプログラミングを行う職業を指します。多くの理由がありますが、端的に一つ言うと、プログラミングで飯を食っていきたいと思ったからです。一応足掛け十年プログラミングをやっており(やり込んでいる人からすると児戯だと思いますが)、もっとたくさんプログラミングをしたいと思いました。

どうなったか

かなり望んだ通りの企業に転職できました。

  • BtoCで、勘が働きやすそう
  • ネット文化の文脈(ネット文化への貢献は将来的に絶対にやりたい事でした、まさかこんな早く成るとは思ってなかった)
  • 望めばUnityも触れる

伺っている話だと、ずっと頑張っていきたいです。力不足な部分はありますのでまずは戦力外通告を受けないようキャッチアップがんばります。

どうやったか

最初に営業から未経験で転職するにあたり、当時はすでにITエンジニア転職バブルが破裂していました。ずっとプログラミングやってるのに迷惑な話だと思いながら、肺炎禍も被さりつつ、まずは飛び込んでみようとSESに入社しました。そこではお世話になったものの、SESという仕組み自体については悪感情ができました。生活苦・キャリア面から勤務を継続できないと判断し、再転職先を探しました。

プログラマになってからジュニアなりに実力をつけるために行った事は以下のとおりです。

どれも頭一つ抜けて極められたとはいえませんが、どれも選考によっては必要となった為、この戦略をとってよかったと思っています。なぜこの戦略を取ったかについては、根本的な説明は長くなるので書くにしても別エントリとなりますが、一言でいうと自分に最適な形で就職への最短経路だと思ったからです。

そうして、20件程度求人に応募したり、スカウトの面接を受けたりして、今回の仕事につくことができました。よかったです。

個別事例

500字・10社程度のメモ書きを持っています。参考にしたい方はDMで連絡いただけたらお渡し可能です。

選考総括

素振り程度のポートフォリオは役に立つ場面少なかったです。面接の種になる場面はあったくらい。やはり必要とされているのは作った素振り程度のものではなく、レベルの高いプロダクトという感じがしました。具体的に言うと、2社様から、「ユーザー満足を作れているプロダクトがあるか見ている」という話を伺い、2社様ともこちらから辞退した記憶があります。キャリアと生活苦の為、それを作り上げるまで転職を待てません。他、応募した中でgithubを見られた事は一切ありませんでした。

競プロは対コーディング試験で極めて役に立ちました。競プロ界隈では若輩ですが、時間制コーディング試験は全て通りました。エンジニアの方が面接官なら、面接の種にもなりました。ただ書類選考面で有利になった感じはないです。存在や内情を知らない方のほうが圧倒的に多いです。茶色(当時)だと足りなくて緑(AtCoder800レート~)は要るだけなのか、そうではなくそもそも着目する方の数が少ないのか、界隈全体の事まではわかりません。この状況が続けば緑になってからテック系大企業にまとまった数応募してみて様子を見るつもりでしたが、それはもう必要なくなりました。検証不能になります。

技術の学習は役に立つ場面がありましたが、どの学習が具体的に役に立ったというのが難しく、意識して学習できる事ではないと思いました。例えば参照渡しと値渡しの説明を求められ、興味本位で正答率の目安を聞いてみたところ「キャリアに関わらず(不正解者はいる)、答えられない方は答えられない」という話を伺いました。例えば知っているgemの数で技術力を測る面接があり驚きでした(ただ実際相関関係はありそうだと思いその点は面白かったです)。プログラミングスクールに通う事をおすすめする会社様もいらっしゃいました(例えばN高とかかなと聞き返したらそうではなく、「N高は難しいからやめておけ」との事でした)。何を聞かれるかは会社によると思うので、具体的に何をやればいいというのは存在しないはずです。

基本的には業界全体で人手不足なのだろうという感触がありました。その中の一人として頑張ります。

ここ一年睡眠時間をゴリゴリに削っていました。壊れてしまう前に内定貰えてよかったです。内定に伴って生活リズムを変えられます。今よりは長期的な視野で動く事だってできます。

反省点

基本的には自分に向いた方法かついい形でアプローチできる方法を取れたと考えます。

唯一反省点があるとすれば、ポートフォリオの作り方について、こだわりすぎて前に進めない時期を作ってしまった事です。あの数ヶ月が非常に惜しく、その後結局別のことを思いついてそちらを進めたのですが、さっさと切り替えて「できるようになってから戻ってくる」ような気持ちでよかったです。上達は螺旋を描くものだと知っていたはずなので、戦術眼がまだ足りないです。

総括

新しい職場ではまずはキャッチアップからになるものの、馴染めたらサーバーのパフォーマンス周りとUnityについて取り組んでいきたいです。戦力外通告されないようがんばります。マジで。

今後やりたい事については絶対また変わるタイミングあるだろうしちゃんとした文章書きたいと思っていますが、一段落で書くと以下のとおりです。技術力がほしい。もっと言うと、確固な学術的知識をベースにして動けるようにしたい。サーバーのパフォーマンス周り、クリエイティブコーディング/Unityなどの実践的な勘所を一通り抑えつつ、ゲーム/エンタメと親和性がある特定領域で修士になりたい。それらを用いて数字についても役割を持てるようになりたい。

各種アドバイス頂けた皆さんありがとうございました。twitter相互の方、引き続き技術の話させて下さい。鍛えてもっと技術力をつけたら、今後はもっと面白い趣味開発の話題持っていけると思っています。VRChatフレンドの方、今後気を抜く時間を作るので、とりとめないお話させてくれると嬉しいです。

やっていきます。よろしくお願いします。

超インスタント競プロ環境構築 TypeScript

素敵な夜ですね。
TypeScriptの練習の為、Atcoderをやれるように環境整備してみました。

参考文献

初手参考文献で恐縮ですが、こちらを見れば全部解決します。

js/tsで競プロをやるという事

話を聞いただけでも致命的な話がいくつか聞こえてきます。

  • 普通の入出力がWindowsで動かない 面倒です。
  • 64bit整数値を扱えない つらそう
  • 再帰が使えない つらそう
  • 使用メモリ量が多い うーん…。

というわけで、恐らくC問題からすでに辛そうです。今は単にTypeScriptに慣れたいだけなのでA~Bだけ解いていきます。

環境構築

先の記事に従い、npm initの後、npm install -D typescriptをぶちこみます。

さて、Windowsでの入出力、色々試しましたが断念しました。3つめの記事に従い、txtファイルから読み込みます。Linux使えというのも確かにそうなんですが、いや仮想環境はちゃんとあるものの起動時間は0ではなく……。ts-nodeもぶちこみます。npx ts-node hoge.tsを実行してlocal.txtを実行する形がいいです。

また、jestもぶちこみます。npm testを使うと、テストファイルを元にテストしてくれます。やったぜ。txtファイルは一ケースしか受け取りませんので、jestは難問と繰り返し戦う際に使います。

index.ts

使っているindex.tsを公開します。よければそのままお使い下さい。3つめの記事を元に何度かチューニングしながら実践しました。C問題を考えなければ各種ライブラリは要らなさそうでした。

// 手元の実行 npx ts-node index.ts
// 入力 同ディレクトリ test.txt
// jestによるテスト npm test

import { Console } from "console";
import { DEFAULT_MIN_VERSION } from "tls";

// 手元時"l"、提出時"u"、テスト時"t"
const onlineOrNot : string  = "u";

//resolve
const program = (args: any) => {

  answer = "hoge";

  return answer;
}

const io = (input :string)=> {

  // 入力を受け取り、行ごとに分割 本番と手元で挙動が少し違う
  let args;
  if (onlineOrNot === "on") { args = input.split('\n'); } else { args = input.split('\r\n'); }

  console.log(program(args));

}

//jest用
module.exports = program;

if(onlineOrNot === "u"){
  io(require('fs').readFileSync('/dev/stdin', 'utf8'));
}
if(onlineOrNot === "l"){
  io(require('fs').readFileSync('local.txt', 'utf8'));
}

tsconfig.json

使っている設定ファイルはこちらです。参考文献4番めの知恵を拝借し作りました。よければそのままぶちこんで下さい。

{
  //https://eh-career.com/engineerhub/entry/2019/04/16/103000
  //米印は未適用設定

  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": ["es2018"],                             /* Specify library files to be included in the compilation. */
    // "jsx": "react", ※                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "./build",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
    "removeComments": false,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,  ※             /* Enable strict null checks. */
    // "strictFunctionTypes": true,    ※        /* Enable strict checking of function types. */
    // "strictBindCallApply": true,      ※      /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true, ※  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,           ※      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */

    /* Module Resolution Options */
    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */

    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

現在岸原オカルト研究部では、黒魔術(TypeScript)を研究しています。
twitter:@kisihara_c

apollo、prisma、hasuraについて調べる(資料漁り編)

素敵な夜ですね。

graphQLについての文脈でよく聞くapolloprisma、hasuraについて、調べたことを纏めます。これから調べる方は調べる手間の省略になるかもしれません。

筆者はhasuraだけおもちゃ程度に触りました。他2つもこれから触らないといけないと思っており、小物アプリでスクラップアンドスクラップして試すつもりではいます。

graphQLについて

https://graphql.org/

各プロダクト一覧兼目次

Apollo

参考文献:

Apollo Client

  • 「ローカル・リモートのデータをJavaScript+GraphQLで操作する」。
  • Apollo ClientとはGraphQL APIをシンプルにクライアント側で操作するためのライブラリ」

Apollo Server

  • オープンソースの、スペック準拠のGraphQLサーバー」
  • 「GraphQLクライアント(ApolloClient含む)と協働し、GraphQLAPIを作るのに最適」

Apollo Federation

  • 複数のGraphQLサーバーを一つのサーバーとして扱えるプロダクト

prisma

参考文献:

prisma1

  • 元来graphcoolというGraphQl as a Serviceのバックエンドを切り出したもの。
  • ORM
  • 単体だとクライアントを弄り放題:prisma server(Apolloでも可)を使う必要がある

prisma2

  • Photon(ORM)/Lift(マイグレーションエンジン)から構成。
  • GraphQL以外も動くという点でGraphQLだけとの繋がりのものではない
  • ORMに徹しており、公式もサーバー系のプロダクトと一緒に使ってほしいとのこと
  • コアはRust製

hasura

参考文献

hasura engine

  • hasuraのCore部分。自分でサーバーを建てられる

hasura Cloud

  • heroku等で自動でhasura engineを立ち上げてくれる

まとめ

結局どれをどう組み合わせれば良いのかわからないので、とりあえずいつか全部やる事になりそうだと思いました。

現在岸原オカルト研究部では、黒魔術(Web)を研究しています。 twitter:@kisihara_c

習作ネタWebアプリbrainfxxk.cログ

素敵な夜ですね。

Webアプリの概要

brainfxxk.c https://brainfxxk-c.herokuapp.com/

作りました。brainfuckという記号だけで出来たプログラミング言語の各記号を置き換えるシンプルなWebアプリです。
怪文書を作れます。

構成

素reactをサクッと勉強したいので、全てを投げ捨ててreact-create-appを使いました。
他は何もありません。
express+reactで環境構築する計画もありましたが、両者間の接続にハードルを感じ今は退却。

作った流れ

reactの学習

zenn.dev

zenn.dev

辺りでちょっとだけ予習して
公式へ ja.reactjs.org

チュートリアルは本当にチュートリアルで、自分のものを作る時にあまり繋がりませんでした
ドキュメントこそ正義
ja.reactjs.org

CSS

miniを使っています。
ちょっとダサくなりましたがこれは私の腕のせいです。

デプロイ

herokuを使いました。3秒で終わりました。

おわりに

2作目のWebアプリ完成しました。
前作よりは少しネタ的な実用性が出たと思いますが、次はもっと人の役に立つアプリを作ります。

現在岸原オカルト研究部では、黒魔術(WEB開発)を研究しています。 twitter:@kisihara_c

簡単習作Webアプリcrypt.cログ

素敵な夜ですね。

Webアプリの概要

crypt.c
https://crypt-c.herokuapp.com/

作りました。 文書を簡単に簡単な鍵で暗号化できる簡単なWebアプリです。
インターネット上の友達にクイズ問題を出題して頂いたりスパイごっこをして遊んで頂く為のアプリです。

構成

express,milligram(css)

作った流れ

expressの学習

単ページなので公式チュートリアルのルーティングあたりだけ読みました

expressjs.com

CSSフレームワーク

Web開発は初めてなのでさっぱりわからず、とりあえずシンプルなやつを探しました。
BootstrapのようなjQueryも混ざるようなものは意味不明になってしまうので……。
本格的なものもそのうち触りたいですが。

uikit,Semantic,Milligram,mini,Skeletonをパッと見で候補としまして、uikitとSemanticはjavascriptも絡むものの為排除、MilligramとminiとSkeltonを様子見しています。

Milligram

一番雰囲気が良かったのでこれにしました。
シンプル志向で作られており、シンプルすぎて配置等に関する機能も最小限です。

mini

ちょっとだけランディングページが好みに合わず避けました。
ヘッダーフッター等も揃っており、Milligramよりは多機能です。
最低限度をしっかり揃えたものと思われます。次はこれを使います。

Skeleton

Milligramと同程度機能のCSS
デザインカッコいいのでそのうち使います。

暗号化フレームワークの選定

苦労しました。
当初crypto.jsというフレームワークがシンプルでいいと思っていたのですが、うまくHTMLに入れ込めず断念。
forgeというフレームワークをお借りした結果もうまく行かず、最終的に気合でcrypto.jsを使用しました。

暗号化

AESを応用した形式で、単一のパスフレーズを入れてフレームワークを暗号化してくれます。

セキュリティ対策

app.disable('x-powered-by');でバージョン問い合わせを無効化した後、

"></script><script>alert(0)</script>  

上記コードでXSSのテストを行いました。

最初はセキュリティモジュールhelmetを触ってみたのですが、うまく動かせませんでした。
恐らくcrypto.jsを読みに行く動作が良くないのではないかと思っています。
次は使います。

zenn.dev

expressjs.com

デプロイ

zenn.dev

herokuを使いました。3秒で終わって怖かったです。

おわりに

はじめてWebアプリの開発に成功し興奮しています。 ですが実用性には程遠く、今年中に人の役に立つアプリを作りたいです。

現在岸原オカルト研究部では、黒魔術(WEB開発)を研究しています。 twitter:@kisihara_c