Giter Site home page Giter Site logo

qin-team-dev's Introduction

Next.js + Tailwind CSS + ESLint + Prettier

yarn create next-app --example https://github.com/lightsound/Next.js-TailwindCSS-ESLint-Prettier

qin-team-dev's People

Contributors

tocchi-739 avatar pitang1965 avatar

Watchers

avatar

qin-team-dev's Issues

ページネーションに関する配列生成の方法

src/components/Pagination.jsx のページネーションに関する配列生成の方法がわかりずらかったです。

以下は、Reactのmapで回すために必要な key={index} やその他簡略化したコードです。

現状のコード

const range = (start, end) =>
  [...Array(end - start + 1)].map((_, i) => start + i);

const PER_PAGE = 10;
  
function test(totalCount) {
  console.log(range(1, Math.ceil(totalCount / PER_PAGE)).map((number) => (number)));
}

test(0);  // []
test(1);  // [ 1 ]
test(10)  // [ 1 ]
test(11); // [ 1 ]
test(20); // [ 1, 2 ]
test(21); // [ 1, 2, 3 ]

変更案

const getRangeArray = (totalCount, perPage) => [...Array(Math.ceil(totalCount / perPage))].map((_, index) => index + 1);

function test2(totalCount, perPage) {
  console.log(getRangeArray (totalCount, perPage));
}

const PER_PAGE = 10;

test2(0, PER_PAGE);  // []
test2(1, PER_PAGE);  // [ 1 ]
test2(10, PER_PAGE)  // [ 1 ]
test2(11, PER_PAGE); // [ 1 ]
test2(20, PER_PAGE); // [ 1, 2 ]
test2(21, PER_PAGE); // [ 1, 2, 3 ]

Languagesのパーセンテージバーの実装

パーセンテージバーの実装参考にさせて頂きました！

qin-team-dev/src/components/Github.jsx

Lines 66 to 92 in 7ba7987

<div className="mt-2">
<ul className="flex flex-wrap">
{github.languages.edges.map((language) => {
return (
<li
className="mr-2 flex items-center"
key={language.node.name}
>
<span
className="h-2 w-2 rounded-full"
style={{ background: language.node.color }}
></span>
<span className="ml-[6px] text-xs font-bold">
{language.node.name}
</span>
<span className="ml-[6px] text-xs font-bold opacity-70">
{Math.round(
(language.size / github.languages.totalSize) *
1000
) / 10}
%
</span>
</li>
);
})}
</ul>
</div>

ファビコン

これは仕様になく軽微な話ですが、ファビコンが設定されていません。

よいと思ったところ

これは対応が必要なissueではありません。
以下が良いと思いました。

  1. 性能がすごい！
  2. Figmaとの一致度が高い!
  3. ダークモードでピンク色のところが暗めの色に調整されています
  4. ホバー効果が設定されています（メニューやPortfolioの画像）

image
bitmoji

問い合わせ送信時の挙動

[Send message]ボタンをクリックして送信完了になる前に、送信中であることを示す何かがあるとよりよいと思います。

NAV_ITEMSに関するコード

メニューの各項目の共通処理をNAV_ITEMS配列に入れて、各項目をmapで処理するのは良いと思います。

しかし、NAV_ITEMSが二箇所で同内容で定義されていて、またNAV_ITEMSを使うコードもほとんど同じに見えます。

コンポーネントに切り出すとよいのではないでしょうか？

Layoutコンポーネントを作成する

  • Layoutコンポーネントを作成し
  • 各ページごとにインポートしているHeader/FooterをLayoutコンポーネントにインポート
  • 各ページではLayoutコンポーネントで囲むことでレイアウトが完成させる
  • レイアウトに関するコードは一つのディレクトリにまとめる

Portfolio上にマウスがあるときの挙動

ポートフォリオの各カード上にマウスポインタが入ったときに、色が薄くなり、ポインタ形状が「指差す手」に変わりますが、クリックしても何も起きません。

mapの書き方について

qin-team-dev/src/components/Github.jsx

Lines 47 to 64 in 7ba7987

{github.languages.edges.map((language) => {
return (
<span
style={{
width:
Math.round(
(language.size / github.languages.totalSize) *
1000
) /
10 +
"%",
background: language.node.color,
}}
key={language.node.name}
></span>
);
})}
</span>

以下のように書いたらよりスマートに展開できます！

{github.languages.edges.map((language) => (
    <span
      style={{
        width:
          Math.round(
            (language.size / github.languages.totalSize) *
              1000
          ) /
            10 +
          "%",
        background: language.node.color,
      }}
      key={language.node.name}
    ></span>
  );
)}

マークアップ修正

以下、liで括る範囲を変更したほうがいいかと思います。
アイコンと数値が一つとして見たほうがいいです。

qin-team-dev/src/components/Github.jsx

Lines 22 to 43 in 7ba7987

<li className="mr-1">
<Image
src={"/assets/svgs/Star.svg"}
width={25}
height={25}
alt="Starのマーク"
/>
</li>
<li className="mr-4 font-bold text-gray-500">
{github.stargazers.totalCount}
</li>
<li className="mr-1">
<Image
src={"/assets/svgs/Fork.svg"}
width={25}
height={25}
alt="Forkのマーク"
/>
</li>
<li className="font-bold text-gray-500">
{github.forks.totalCount}
</li>

Twitter API関係のIssues

導入したいこと

  • ツイート内の画像がurlでのみ表示されている
    →画像を表示できるようにしたい

  • users/:id/tweetsでuser.fieldsのprofile_image_urlも取得したい
    ツイートを取得する際に、以下コードも併記してみたが、うまくいかなかった。
    includesというのをどこかに記載する必要がありそう。。

expansions: ["author_id"],
"user.fields": ["profile_image_url"],

参考：APIドキュメント
https://developer.twitter.com/en/docs/twitter-api/tweets/timelines/api-reference/get-users-id-tweets

修正した方がよいかもと思っていること

  • user_name、user_idを環境変数にしている箇所もあるが必要ないかもしれない
    （ツイッターのブラウザページでソースを表示したら見ることができるし）

  • ユーザー情報はreadOnlyClient.v2.userByUsername
    ツイート情報はtwitterClient.v2.get(url)
    と、APIの叩き方？に統一感がないので合わせた方がよいかも

該当のファイル

データの取得
https://github.com/tocchi-739/qin-team-dev/blob/main/src/pages/index.jsx

データの表示
https://github.com/tocchi-739/qin-team-dev/blob/main/src/components/Tweet.jsx

その他
https://github.com/tocchi-739/qin-team-dev/blob/main/src/libs/twitterClient.jsx

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.