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

Webアプリを作っていると、headerなどに表示されているアバターに画像を表示したいと言ったことが出てくると思います。

しかし、ユーザーの新規登録時などアバターの画像を設定していない段階で、何かしら代わりの画像を設定しておきたいことがあります。

そこで、今回はJavaScriptのsliceメソッドを使ってユーザー名を切り出し、イニシャルをアバターとして表示する方法について解説します。

完成形の確認

完成形は以下の画像の通りです。

この画像ではユーザー名を'Guest User'としています。
イニシャルのGが表示されています。

例えば、ユーザー名がTaro YamadaならT、JohnならJのように最初の1文字が表示されます。

実装

今回、ReactとFirebaseを用いて実装しますが、大切な部分はJavaScriptのsliceを使うところだけです。

上記の画像は以下のコードで実装しています。

HeaderRight.jsx

export default function HeaderRight() {
  const classes = useStyles();
  const { currentUser } = useAuth();
  const [userNameInitial, setUserNameInitial] = useState();

  useEffect(() => {
    const id = currentUser.uid;
    db.collection("users")
      .doc(id)
      .get()
      .then((snapshot) => {
        const data = snapshot.data();
        const username = data.username;
        const initial = username.slice(0, 1);
        setUserNameInitial(initial);
      });
  }, []);

  return (
    <div className={classes.headerRight}>
      <Link to="/postform" className={classes.postFormLink}>
        <Button className={classes.postFormButton}>新規投稿</Button>
      </Link>
      <Link to="/bookmarkList">
        <IconButton className={classes.bookMark}>
          <LibraryBooksIcon />
        </IconButton>
      </Link>
      <Link to="/dashboard" className={classes.avatarLink}>
        <Avatar aria-label="recipe" className={classes.avatar}>
          {userNameInitial}
        </Avatar>
      </Link>
    </div>
  );
}

ここで注目して欲しいのは、useEffectの中に書いてあるconst initial = username.slice(0, 1);です。

ここでusernameというのはデータベースから参照してしるユーザー名です。

そしてusernameに対して、slice(0, 1)とすることで、最初の一文字を切り抜けます。sliceの0は切り抜きの開始位置、1は何文字切り取るかを示しています。

例えば、文字列の先頭から2文字切り取りたいなら、slice(0, 2)とすればOKです。

あとは、切り抜いた文字をアバターとして表示するだけです。
※今回はMaterial uiのAvatarを使っています。

今回はuserNameInitialという変数に格納していますが、それを表示すれば完了です。

参考

String.prototype.slice()

先頭、末尾の文字を取得する方法