F.Shibusawa

都内で Web エンジニアをやっています。雑記を書いたり、プログラミングに関する知見ま…

F.Shibusawa

都内で Web エンジニアをやっています。雑記を書いたり、プログラミングに関する知見まとめたり、絵を描いたりするかもしれません。

  • 技術的な知見・Tipsまとめ

    主にプログラミングに関して得た知見や Tips をジャンル問わずここに詰め込んでいきます。

  • お絵かき帳

    描いた絵の書評とか反省点とか意図とかを書き綴っていこうかなと思っています。

LeetCodeで頭の体操とコンピュータサイエンスのお勉強

この記事は note株式会社 Advent Calendar 2022 の 15 日目の記事です。 LeetCode はプログラミング問題の対策サイトだというのが専らの紹介文だと思うんだけど、別にそれだけに限定した使い方じゃなくても十分楽しいサービスだよ、という話をしたい。 LeetCodeとは改めて LeetCode とはなにかを説明すると、ソフトウェアエンジニアの就職面接でよく出題されるプログラミングの問題を集めた Web サイトである。このサイトで多くの模擬問題を解

F.Shibusawa

    • 『ぼくらの』アニメ版を観て気になったので原作漫画をいったん全巻買った。

      ちいさな子どもたちが巨大なロボットに乗って、正体不明の敵と戦う。けっこうポピュラーな設定なんだけど、戦う子どもたちのバックグラウンドもそれぞれ深いものがあったりして、グッときた。と同時に、なかなか気持ちの悪い人間模様も見せられてウッとなった。 ざっくりとしたストーリーを説明すると、自然学校にきていた十数人のこどもたちが、偶然みつけた洞窟でココペリと名乗る人間に「ゲームをしないか？ちょうどテストプレイヤーを探していたところなんだ」と誘われるところから始まる。黒いロボットに乗っ

      F.Shibusawa

      • 何も考えずに描くときに出る癖の由来

        模写をするときは、まず対象を注意深く観察して、丁寧に丁寧に再現しようとする。その作業は、最初から最後までカロリーを大量に消費するのだけど、特にどういうところに消費するかというと、自分の気持ちいい描き方を無視して（というか反して）腕を動かさないといけないストレスと戦うところだと思っている。 だいたい、描いていて、てんで気持ちよくない。スラッとか、シャッとか流れるような曲線なんて世の中にほとんどないんじゃないだろうか。 「これって…こんな形になってたっけか…？」とか「思ってた

        F.Shibusawa

        • 「飯つくるのもうしんどい…」と思ったなら食事宅配サービスを使うとよいかも

          ※この記事は noteのみんな Advent Calendar 2020 の 20 日目の記事です。 コロナ禍でしばらくリモートワークになって以降、外出するのはもっぱら食料を調達する時くらいになっていました。日に日に外に出るのが億劫になっていき、それでも空腹はやってくる。 自粛期間に入りたての頃の冷蔵庫の状況が Slack に残っていました。 しんどいな。 たまにスーパーで買いだめしたり、コンビニで軽く済ませたりして頑張っていましたが、それすらももうめんどい。本当に面

          F.Shibusawa

        LeetCodeで頭の体操とコンピュータサイエンスのお勉強

        F.Shibusawa

        • 『ぼくらの』アニメ版を観て気になったので原作漫画をいったん全巻買った。

          F.Shibusawa

        • 何も考えずに描くときに出る癖の由来

          F.Shibusawa

        • 「飯つくるのもうしんどい…」と思ったなら食事宅配サービスを使うとよいかも

          F.Shibusawa

        マガジン

        • 技術的な知見・Tipsまとめ
          21本
        • お絵かき帳
          2本

        記事

          初めて4Kモニタ買ったんだけど調べるべき仕様が多すぎて休日全部溶かした。

          ながらくお世話になっていたアイ・オー・データのモニタが召されたため、これを機に新しいモニタでも買おうか、といろいろ調べ始めて沼にハマったのが昨日のことのように感じられます。 …モニタって確認すべき仕様多すぎないか…！？ ・インチ ・解像度 ・色域 ・パネルタイプ ・表面処理（グレア、ノングレア） ・応答時間 ・輝度 ・VESA規格 ・ハードウェアキャリブレーション対応 ・外部端子（HDMI, USB Type-C, Display Port） ・高さ、傾き調整、など こ

          F.Shibusawa

          初めて4Kモニタ買ったんだけど調べるべき仕様が多すぎて休日全部溶かした。

          F.Shibusawa

          在宅勤務するかどうか、社員自身で決められるとよりハッピーだよなと思った

          2020 年 7 月から note 株式会社で新たな出社制度「フレキシブル出社制度」がスタートするそうです。 ざっくり言うと「基本在宅だけど、いつ出社するかは自分で決めていいよ」という制度です（端折ってるので上の記事を読んでみてください）。 上の記事の中で、導入の背景をこんなふうに説明しています。 コロナ禍を通じて、リーダーシップを発揮しながらクリエイティブな仕事ができる社員であれば勤務スタイルは自由でよいと再認識できる機会となりました。 さらに従業員が働きやすく、かつ

          F.Shibusawa

          在宅勤務するかどうか、社員自身で決められるとよりハッピーだよなと思った

          F.Shibusawa

          Cコンパイラを写経して4ヶ月が経ちました。わからないことが増えました。

          Ueyama Rui さんという Google のエンジニアの方が書いている『低レイヤを知りたい人のためのCコンパイラ作成入門』というサイトがあります。これをやるのに 4 ヶ月かかりました。今回はその経緯とか今後の展望とかを話そうと思います。 結論だけ先に言うと、言語処理系のざっくりした全体図と C 言語の基礎知識をいい感じに獲得できて良かったです。また、こうしていわゆる低レイヤの技術に触れられたことで、他の関連する技術にも思いをはせることができました。視野が広がった（つま

          F.Shibusawa

          Cコンパイラを写経して4ヶ月が経ちました。わからないことが増えました。

          F.Shibusawa

          『Rubyもくもく勉強会@ピースオブケイク2020年2月4日（火）』運営レポート

          2020年2月4日（火）に株式会社ピースオブケイクとして初の試みとなるもくもく勉強会を開催しました。 探り探りで準備しつつゆるく運営してみた当日の様子を振り返っていきたいと思います。 そもそもなぜ Ruby のもくもく勉強会をするのか弊社のサービス、note、cakes、note pro はいずれも Ruby を使って開発されています。つまり普段から Ruby には大変お世話になっているわけですが、いかんせん Ruby のコミュニティへの貢献はこれからといった状況です。

          F.Shibusawa

          『Rubyもくもく勉強会@ピースオブケイク2020年2月4日（火）』運営レポート

          F.Shibusawa

          『Rubyのしくみ -Ruby Under a Microscope』を読んだ所感と次に勉強するもの

          冬休みの課題図書として『Rubyのしくみ』を読みました。もうとっくの昔に冬休み終わってるんですけど。大まかな理由は単純に「使っているプログラミング言語の中身を知りたい」という欲求からでした。 この本を読んで得た知見を以下の通りざっくり紹介したいと思います。 Rubyコードが実行される流れがざっくり分かった普段書いている Ruby のコードがどのように機械が分かるように変換されていくか（実際は YARV 命令列まで）がざっくり分かるようになりました。字句解析→構文解析→コン

          F.Shibusawa

          『Rubyのしくみ -Ruby Under a Microscope』を読んだ所感と次に勉強するもの

          F.Shibusawa

          VSCode のオートフォーマットが実行されない時は "editor.formatOnSaveTimeout" の値を疑う

          ある日突然！というわけでもないんですけど、なんか VSCode のフォーマットの調子悪いなあ…と思っていろいろ調べてみました。 保存時に実行するフォーマットのオプションはこれらが代表的かと思います。 { "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true, "files.trimFinalNewlines": true} 通常、`"editor.formatOnSave":

          F.Shibusawa

          VSCode のオートフォーマットが実行されない時は "editor.formatOnSaveTimeout" の値を疑う

          F.Shibusawa

          Slack のカスタム絵文字を一括でダウンロードする Ruby のスクリプト書いた

          いくつかのワークスペースを行き来してると「あの絵文字とかもろもろ引っ越ししたいんだよなあ…」と思うことあると思います。いや知らんけど。 そこで、Slack のカスタム絵文字を一括でダウンロードするコード書いてみみました。これを実行すると実行したディレクトリに /emoji が作られ、そこに絵文字の画像が全部入ります。 こんな感じのコード# frozen_string_literal: truerequire 'json'require 'down'SLACK_OAUTH_

          F.Shibusawa

          Slack のカスタム絵文字を一括でダウンロードする Ruby のスクリプト書いた

          F.Shibusawa

          docker-compose up 時にポート指定してもコンテナ内のデフォルト設定も上書きしないと意味ない

          複数のプロジェクトを同時並行で開発している時、ローカルの Docker 環境のポートがかち合うことってよくあると思います。こういう時は素直に片方のコンテナを docker-compose stop で一旦止めてから docker-compose up し直すのも手ですね。めんどいですね。 そんな時は docker-compose.yml でかち合わない port を指定してあげればうまくいきます。うまくいくんですけど、実際にコンテナ内に入って MySQL やら Redis

          F.Shibusawa

          docker-compose up 時にポート指定してもコンテナ内のデフォルト設定も上書きしないと意味ない

          F.Shibusawa

          localhost を https にする方法が結構簡単だった（Nuxt）

          必要なのは mkcert とそれによって生成される証明書と鍵を nuxt.config.js に入れ込む作業だけ。 $ brew install mkcert$ mkcert -install$ mkcert localhost この段階で、カレントディレクトリに localhost.pem と localhost-key.pem が生成されます。 それらを nuxt.config.js の server キー内に追加します。 import path from 'pa

          F.Shibusawa

          localhost を https にする方法が結構簡単だった（Nuxt）

          F.Shibusawa

          layout ファイルに書く nuxt-link のパスが子ページでずれてしまう問題はどうすればよいのだ

          今簡単なポートフォリオサイトを Nuxt.js で作ってるんですけど、現状構成はこんな感じになってます。 pages/--| works/-----| illustrations-----| webgl-sandbox--------| index.vue--------| foo.vue--------| bar.vue-----| webgl-sandbox.vue pages/works/webgl-sandbox.vue の中身はこんな感じ。 <template

          F.Shibusawa

          layout ファイルに書く nuxt-link のパスが子ページでずれてしまう問題はどうすればよいのだ

          F.Shibusawa

          WebGL でマウスクリックしたら点が描画されるやつ作った

          『WebGL+HTML5 3DCGプログラミング入門: 第3章 はじめの一歩』読了しました。 マージしました！ 今回第 3 章に沿って学習してきましたが、buffer をバインドしなくても gl.vertexAttrib3f, gl.uniform4f で直接座標をシェーダ側に渡せるの初めて知りました。 よく CodePen とかで見かける WebGL のコードでは、gl.bindBuffer とか gl.bindTexture とかをしてから buffer にデータを

          F.Shibusawa

          WebGL でマウスクリックしたら点が描画されるやつ作った

          F.Shibusawa

          Base64のしくみを理解するためにRubyで実装してみる

          Base64とは、A-Z, a-z, 0-9, +, / の64文字のみを用いてデータを表現するためのエンコード方式です。電子メールや Basic 認証なんかによく用いられているそうです。 さて、この Base64 という方式。プログラミングしていたらよく聞く単語だと思うんですけど、具体的にどんな処理をしているかまではちゃんと理解していませんでした。ので、今回中身の処理を理解するために Ruby で実装してみました。 class Base64 class << self

          F.Shibusawa

          Base64のしくみを理解するためにRubyで実装してみる

          F.Shibusawa