matsutoba’s blog

フロントエンドエンジニアをしています

なっとく!アルゴリズム

paizapaiza.jp のスキルチェックでコーディングをするのが勉強になるのでたまにやっています。

スキルチェックには問題ランクSからDまであります。

Dランクから順番にチャレンジして行って、Aランクの問題までは完全回答できたのですが、Sランクの問題になると急に難易度が上がっているように思いました。


Sランクの問題は、いろいろな設定条件のもとで最適な値はどれか?というような問題が多く、やり方を思いついて再帰関数を作って回答すると実行制限時間やメモリ制約によってNGになってしまうことが多かったのです。

仕様を読んでコードに落とす以前に、こういうお題に対して最適解を見つけるためのアルゴリズムを知っていないと正解できないのでは?という感じです。


業務でコードを書くときも、安易に再帰関数を書くことがあったのですが、もしかしたらこのような最適解を求めるようなアルゴリズムを知っていれば、処理の負荷を下げるコードがかけるのでは?と思い、どこで勉強できるのかと探していたところ、なっとく!アルゴリズム という本を見つけました。

パラパラっと見たところ、ぎっしりコードが書いてあるというよりは読みやすい文体と絵で説明されていたので、これなら読めそう!と購入してみました。

動的計画法のところを勉強すればSランク問題に勝てそうに思うので、勉強して再チャレンジしてみようと思います。

react-windowのVariableSizeListで行の高さが不定のリストを表示したい

備忘録。

react-windowのVariableSizeListで、行の高さが固定ではなく文字数により高さが変化するリストを表示したい。

いろいろ調べた中で一番負荷が低そうでやっていることがわかりやすかったブログ。

code sandbox にサンプルを上げてくれているので、コードを見るとよりわかりやすい。

tiagohorta1995.medium.com

Reactで簡単にアイコンを使いたい

Reactのアプリを作るときにきれいなアイコンを使いたい時は、いつもFontAwesomeを設定して使っていましたが、もっと簡単にいろいろなアイコンを使うことができるライブラリがありました。

react-icons

www.npmjs.com

こちらのページから対応しているアイコンと必要なimportが書いてあります。

たとえばFontAwesome5の場合は、説明ページを引用すると以下のように記述することができます。

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}


FontAwesomeのバージョンなどを気にしながらインストールで迷っている時間がとても短縮されそうです。