JavaScriptでアバターに自動的にユーザーの名前が入るようにしよう！！ - Qiita

Webアプリを作っていると、headerなどに表示されているアバターに画像を表示したいと言ったことが出てくると思います。 しかし、ユーザーの新規登録時などアバターの画像を設定していない段階で、何かしら代わりの画像を設定しておきたいことがあります。 そこで、今回はJavaScriptのsliceメソッドを使ってユーザー名を切り出し、イニシャルをアバターとして表示する方法について解説します。 完成形の確認 完成形は以下の画像の通りです。 この画像ではユーザー名を'Guest User'としています。 イニシャルのGが表示されています。 例えば、ユーザー名がTaro YamadaならT、JohnならJのように最初の1文字が表示されます。 実装 今回、ReactとFirebaseを用いて実装しますが、大切な部分はJavaScriptのsliceを使うところだけです。 上記の画像は以下のコードで実装