yarn create next-app --example https://github.com/lightsound/Next.js-TailwindCSS-ESLint-Prettier
tocchi-739 / qin-team-dev Goto Github PK
View Code? Open in Web Editor NEWqinサロンチーム開発
Home Page: https://qin-team-dev.vercel.app/
qinサロンチーム開発
Home Page: https://qin-team-dev.vercel.app/
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 ]
以下の要素は不要かと思います。
qin-team-dev/src/pages/index.jsx
Line 65 in 7ba7987
パーセンテージバーの実装参考にさせて頂きました!
qin-team-dev/src/components/Github.jsx
Lines 66 to 92 in 7ba7987
これは仕様になく軽微な話ですが、ファビコンが設定されていません。
[Send message]ボタンをクリックして送信完了になる前に、送信中であることを示す何かがあるとよりよいと思います。
Link
で囲まなくても、どのみち別タブで飛ぶのでa
タグのみで括っていいと考えます!
qin-team-dev/src/components/Github.jsx
Lines 13 to 18 in 7ba7987
メニューの各項目の共通処理をNAV_ITEMS配列に入れて、各項目をmapで処理するのは良いと思います。
しかし、NAV_ITEMSが二箇所で同内容で定義されていて、またNAV_ITEMSを使うコードもほとんど同じに見えます。
コンポーネントに切り出すとよいのではないでしょうか?
Blog一覧でページネーションが実装されていて素晴らしいですが、現在どのページにいるかが、URL以外で知ることができるともっとよいと思います。
/oo みたいになっていますので、リポジトリ名にすればいいかと思います!
私もできておらず他の方の実装を見て気づいたのですが、レポジトリにdescriptionがない場合の処理もあるとより良いかなと思いました。
{github.description ? github.description : "no description" }
qin-team-dev/src/components/Github.jsx
Line 20 in 7ba7987
下記ディレクトリの27,35行目のボタンコンポーネントに直接URLを指定しているため画面遷移時にローディングが入り、SPAになっていない。
qin-team-dev/src/pages/index.jsx
下記を参考に修正するといいと思います。
https://mantine.dev/guides/next
/
ポートフォリオの各カード上にマウスポインタが入ったときに、色が薄くなり、ポインタ形状が「指差す手」に変わりますが、クリックしても何も起きません。
これだと4つしか取れないので、8つくらいでいいかなと思います。
qin-team-dev/src/pages/index.jsx
Line 72 in 7ba7987
qin-team-dev/src/components/Github.jsx
Lines 47 to 64 in 7ba7987
以下のように書いたらよりスマートに展開できます!
{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>
);
)}
ここはidを指定したほうがいいかもしれません。
nameは被らないかもしれませんが、ユニークであることが確実なのはidかと思われるので!
qin-team-dev/src/components/Github.jsx
Line 12 in 7ba7987
以下、liで括る範囲を変更したほうがいいかと思います。
アイコンと数値が一つとして見たほうがいいです。
qin-team-dev/src/components/Github.jsx
Lines 22 to 43 in 7ba7987
ツイート内の画像が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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.