2025-11-03
こんにちは どうもー。 社会人になってからというもの（大変社会性に溢れる自分は）ブログを書く機会がなくなり、個人開発もほぼしなくなってしまったので意図せず 3 年ぶりくらいの投稿だけど、11 月になって色々落ち着いてひと段落ってことでちょっと個人的な開発をしてみたので記事にしてみます。 html 風の記法を Rust の構文木に変換するため、syn クレートの Parse トレイトを実装してみたってやつです。 書き味的にはこんな感じ。 rustfn main() { let world = "Japan!!" render! { <div class="foo"> <p>
2022-10-10
こんにちは どうも、僕です。 今週猫がきます。 猫の名前について、友人と雑談をしていて、 名前なんて記号なんだから呼びやすくて聞こえが良ければなんでもいいよ と言われたので、記号だなんてそんなのハッシュではないかと思ったと同時に、ハッシュという名前はとてもいいなと思いました。 ハッシュという名前にしっくりきたので名前はハッシュにしようと思ったものの、筆者はコンピュータサイエンスの学部を出ているのにも関わらずハッシュ化アルゴリズムを自前実装した経験がありません。 そのため、今回は Secure Hash Standard (SHS) を参考にしながら SHA-256 のアルゴリズムを書いてみまし
2022-09-26
こんにちは どうも、僕です。 先日、ブログを新しくしました。=> ブログを SSG にした wmr の prerender mode を使って SSG にしましたが、自分の実装したような wmr の prerender で .md ファイルを使ったブログを書くようなパターンだと、prerender 関数の中で fetch API をオーバーライドしてあげないとプロダクションビルドをする際に fetch API がない旨のエラーが吐かれてしまいます。 javascriptimport { VNode } from “preact”; let initialized = false; export
2022-08-14
こんにちは どうも、僕です。 今回はブログを SSG にしてみたという話をします。 年始に SSR をするような構成にしたばかりですが、色々あって（後述）作り替えてみました。 SSR にする記事は以下からどうぞ。 ブログを作り直した Rust で GraphQL server を書いてみた このブログのソースコードはこちら takurinton/ssg-blog なぜ作り直したか そもそもなぜ作り直したか、理由は 2 つあります。 AWS の料金が高すぎる そもそもの話ですが、筆者の ポートフォリオ やブログ、 技術メモ 等の、サーバと通信をしている場所の周辺の環境は全て AWS の上で動いて
2022-01-14
こんにちは どうも、僕です。 最近、Svelte が市民権を獲得してきているようで、フロントエンド開発において、選択肢に入ってくる機会が増えてきたと思います。 また、Twitter などでも、React よりも Svelte！のような内容のものや、Svelte を勉強してみるといった内容のものが増えてきたように感じます。 それ自体はいいことであり、Svelte が選択肢に入ってくることは面白いとは思うのですが、React と Svelte を同列に考えているツイートや文章を目にすることもあり、難しい感情になっています。 Svelte のユースケースは、他のフロントエンドフレームワークよりも限定
2021-11-16
こんにちは どうも、僕です。 MySQL（MariaDB）に搭載されてる最強な検索、FULLITEXT INDEX について書きます。 前回のブログ で、検索をアプリケーション側で実装する方法について書きましたが、今回はそれのデータベース側からのアプローチです。 このレイヤーでデータを操作するのは賛否が分かれる部分だとは思いますが、簡単に実装してみたのでやっていきます。 そもそも何 インデックスです。 全文検索をデータベースのレイヤーで実装できないか見ていたら出てきました。（参考： https://dev.mysql.com/doc/refman/5.6/ja/innodb-fulltext-
2021-11-15
こんにちは どうも、僕です。 検索エンジンを自作しようとしてうまくは行きましたが、想定していた規模には耐えることができなかったという内容の記事です。 実際、パフォーマンスにこだわると厳しい点が多かったり、検索結果が帰ってこなかったりしてだいぶしんどい実装になってしまいました。 もっとうまくやる方法があったら教えてください。 今回の手法と想定する規模 今回は、転置インデックスを作成して戦います。 転置インデックスについては、 Wikipedia で以下のように説明されています。 全文検索を行う対象となる文書群から単語の位置情報を格納するための索引構造をいう。転置索引、転置ファイル、逆引き索引など
2021-10-30
こんにちは どうも、僕です。 人生初ハッカソン、出場しました。総合すると、毎日忙しかったものの、とても楽しくコードを書くことができたと思います。 また、一緒に出てくれたメンバーや、今回のハッカソンに出場していた皆さん、また、開催してくれた方々には感謝しかありません、ありがとうございました。 作品 https://github.com/jphacks/F2111 チームメンバー チームメンバーは、僕を含めて4人いました。 人の金で焼肉を食うことしか考えていない ましくん と、たくりんとんの真似をすると言って「酒飲まないと yum」と言ってきた会社の同期の てつ と、僕の内定先のインターンに参加し
2021-10-13
こんにちは どうも、僕です。 addEventListener の第3引数って知ってますか。僕は知りませんでした。いや、厳密に言うと、存在は知ってたけど理解してませんでした。 理解するために、DOMのイベントフローとともに見ていきたいと思います。 イベントフローとは まずはイベントフローとは何かについて考えます。 イベントフローとは、DOM に対するイベントの委任（伝播）のことで、例えば以下のようなコードが動くのはイベントフローによるものです。 これは、parent をクリックすると当然 parent clicked と表示されますが、child の方をクリックしても同じように parent
2021-09-20
こんにちは どうも、僕です。 シルバーウィークなのでこれまで書きたくても時間がなくて書けなかった記事をどんどん投下しています。 今回は、最近作ってる GraphQL の DocumentNode を parse して作ったエディタから動的に query を生成する画面のプロトコーディングをしたのでそれを簡単にまとめます。 概要 このツイートの感じです。 https://twitter.com/takurinton/status/1439255940193140739 左側に引数のエディタがあって、右側では動的にリアルタイムで query を生成しています。 GraphQL の AST を監視し
2021-09-19
こんにちは どうも、僕です。 最近、業務や趣味で GraphQL の AST や query を動的にいじるようなことをしていて、その中で print 関数や parse 関数を脳死で使っていたのですが、ふと中身がどうなっているのか気になったため、ちょっと調べてみました。 なお、今回は、AST の見方などは書きません。 print と parse とは parse 関数 print 関数とは、GraphQL の query から AST を生成する関数で、以下のようになります。 js import { print, parse } from 'graphql'; const query = q
2021-09-19
こんにちは どうも、僕です。 先日、Preact を使用して、簡単なアプリケーションのプロトコーディングをしていて、input タグのイベントハンドラを呼ぼうとしたらうまく動かくてハマりました。 以下のように定義していたのですが、結論としては、 onChange ではなくて onInput を使わなければならないようです。 typescript const HogeComponent = (): JSX.Element => { const onChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Even
2021-07-17
はじめに こんにちは、どうも僕です。 Intersection Observer API を使ってスクロール率を用いてコンテンツの表示を操作するためにコードを書いていたのですが、ちょっとこけたのでまとめます。 Intersection Observer API とは Intersection Observer API とは、ターゲットとなる要素が指定した監視対象の要素が指定した viewport の範囲に入ったときに変更を非同期的に監視するための API です。 用途としては、 画像などの要素をスクロール位置を用いて lazy loading する ブログとかでスクロール位置によって見出しを管
2021-06-05
こんにちは どうも、僕です。 最近バンドルツールを作った（というか作ってる途中）なのでその様子を記事にします。 まだ作ってる途中なのと、あまりきれいな構成ではないので多目に見てください。 ではやっていきます。 技術選定 プログラムを実行するためのものと、バンドラーを作成するための補助として使うもののそれぞれを別に悩むことなく以下のように選定しました。 deno プログラムの実行に関してですが、今回は Deno を選択してみました。 存在は知っていたけど触れてなかったやつです、これを機に触れてみよ〜ってなりました。 Deno とは Node.js の欠点を補うために開発されたと言われています。E
2021-02-15
こんにちは どうも，僕です． 今回はみんな大好きマルコフ連鎖についてです． コードは これ ． 与えられた文章をもとにして新しい文章を生成するやつを実装しました．ではやっていきます． マルコフ連鎖って何？ マルコフ連鎖とはどうやら離散マルコフ過程の別称のようです．知らんかった．Twitterで見かけてググってみたら出てきてほへーってなりました． 今回は文章を自動生成するためのマルコフ連鎖を実装していきます．また，何段階にもなるマルコフ連鎖があるようですが（全く知らん）今回は何も手を加えていないものを実装しました．これから勉強していきたいな． 今回実装するアルゴリズムは このサイト に出てくる図
2021-01-27
こんにちは どうも，ぼくです． 久しぶりにブログ書いてる，日本語死んでそう． 今回はSSRについての記事です．頑張るぞ〜 前提 ここしっかり書いとかないと解釈違いとかで怒られそうなので書いておきます． この記事はSSRを理解するためのもの First Viewは初期表示のことをいう，細かい分類はしない，レンダリングした結果がブラウザに表示されたタイミングのこと preactとfastifyを使用している コードは[これ](https://github.com/takurinton/preact-fastify-ssr) 超簡単な構成 create react appでReactの開発経験がある
2021-01-11
はじめに どうも，僕です．今日はGolangでJWTを実装したけどちょっとつまづいたことが多かったので記事にしたいと思います． これ実装したのだいぶ前なので思い出しながら頑張っていこうと思います． JWTについて そもそもJWTとはなんなのかについて簡単におさらいをしておきたいと思います． JWTとは，JSON Web Tokenの略で属性情報（Claim）をJSONの中に丸め込むことで個人を識別することができるようにした仕様のことです． こいつを使うと署名や暗号化ができURL-safeになるということなのです． JWTと書いてジョットと読みます．ショットじゃないです．誰が酒カスやねん． もう
2020-12-11
こんにちは どうも僕です。 この記事は KITアドベントカレンダー11日目 の記事になります。 今回はGolangの名前付き戻り値について簡単にまとめてみました。 そもそも名前付き戻り値って何？ まずこれですよね、僕も最初はわからんってなってましたし、今もよくわかってないです。 簡単にいうと、戻り値に名前をつけておくことができます。比較は以下のコードで。 go // 通常の関数 func nomalFunc(name string) string { return "hello " + name } // 名前付き戻り値 func nomalFunc(name string) (result
2020-11-27
こんにちは どうも、こんにちは、僕です。 今日はDRFのなんちゃらAPIViewについてまとめたいと思います。 自分の推しはAPIViewです。対戦お願いします！ DRFとは？ そんなもんは自分で調べてください（辛辣） 参考までにこれは 前回の記事 でさらっと書いてしまったAPIView周りの深堀りみたいなイメージで描いていきます。 今回使うモデル 今回使うモデルはとてもシンプルで、以下のようなものを想定しています。 User name (strint, primary) age (int) sex (int) Userを格納するためのモデルで、nameには名前、ageには年齢、sexには性別
2020-11-24
こんにちは こんにちは、僕です。 最近、pyparsingというPythonのライブラリを使用していて、面白いなあと思ったので記事にしてみました。 元々自分は言語解析などに興味があって（NLPとか）、今回は形式言語解析になりますがまとめたいと思います。 pyparsingとは？ これ です。 ドキュメント The pyparsing module is an alternative approach to creating and executing simple grammars, vs. the traditional lex/yacc approach, or the use of re
2020-12-04
こんにちは これです どうも、僕です。 この記事は KITアドベントカレンダー の4日目の記事になります。 今回はユーザー認証の機能を実装してみようと思います。 やり方 Djangoではデフォルトでユーザーモデルが定義されています。今回はそれを書き換えることでユーザー認証の仕組みを作成して行こうと思います。 最近だと外部の認証に任せるパターンも増えていますが、こっちの方が楽だと感じることもちょこちょこあるのでこっちで実装します。 初期設定からしていく まずは最初の設定からやっていきます。 今回はプロジェクト名: advent1204 アプリケーション名: myapp としてやっていきます。 p
2020-11-15
はじめに 今日開発してて遭遇したエラーについて話します。短めです。よろしくお願いします。 状況 GoでAPIサーバを開発してる時に、エラーハンドリングについての実装をしていた。 現状の問題としては、DBと接続する時にアプリケーションサーバ（NginxやらGolangやら）が生きてる状態でDBサーバ（今で言うRDS）が死んでる時にDBのIPアドレスとポートがクライアント側に渡されてしまうという問題が起きていた。 そこで、DBサーバが死んでいる時には無条件でinternal server errorを返すという実装をしてた。 問題点 コードで言うと、以下の点で問題が発生した。 DBに接続する部分の
2020-10-21
こんにちは どうも、 僕 です。 この記事は随分前のインターン期間中に自分のために書いた記事を転載してます。 GoでJSON使う時ってだいぶめんどくさいんですよね。まあ型による安心感がバケモンなのでやった方がいいんですけど。 GoでJSONを捌く時はstructを使用します。 クラスとかはないのでこれでいきます。 Unmarshal 早速やってみます。 例えばこんな感じのjsonがくるとします。 go var req string req = [ {"name": "takurinton", "age": 20, "favorite": ["runnning", "baseball"]}, {
2020-10-10
こんにちは こんにちは。僕です。 今日はブログに音声検索の機能を実装したのでつまづいたところ、うまく行ったところ、逆にうまくいかなくて現状では実装できていないところなどを書いていきたいと思います。 全体のコードは こちら にあります。 実装する 実装ですが、今回は文字起こしまでをフロントエンド、形態素解析と処理はバックエンドで実装しました。 フロントエンドでも文字起こしはできたのですが、形態素解析から処理までの流れを一連の動き（型や言語なども含めて）にしたかったためバックエンドで実装しました。 そのうち余裕があったらフロントエンドでの形態素解析もやってみたいと思います。 全体像 上でちょろっと
2020-10-09
はじめに こんにちは、ブログに MaterialUIを導入してルンルンの 僕 です。 今回はSkyWayで1対1の音声通話、またそれを文字起こしをしてGASに投げる処理までを書いたのでまとめたいと思います。 GitHub Pages でデプロイしたサイトは こちら になります。 レポジトリは こちら になります。 SkyWayって何？ SkyWayとは、Webでリアルタイムコミュニケーションを実現する標準技術、WebRTC（Web Real Time Communication）をかんたんにアプリに導入できるSDK&APIです。（ こちら から引用） WebRTCが簡単に導入できるとはとても便