皆さん、こんにちは！今年のハクトーバーフェストはどうですか？個人的には、今のところ本当に楽しんでいます。 10 月の第 2 週に入ったので、チャレンジを完了するために必要な 4 つのうち 2 つ目のプル リクエスト (PR) を行う時期が来ました。今週は、第 1 週のようにドキュメントだけに焦点を当てるのではなく、プロジェクトのコードベースに貢献することで、自分自身をもう少し前進させることにしました。

第 1 週の要約

Hacktoberfest の最初の PR では、プロジェクトのドキュメントの改善に取り組みました。初心者として、私は小規模で管理しやすいタスクのプロセスに簡単に取り組みたいと考えていました。ただし、この 2 週目は、より技術的なことに取り組むことにしました。それは、GitExplorer プロジェクトに貢献することです。

プロジェクトの概要: GitExplorer

GitExplorer は、トップ GitHub リポジトリの検出と探索を簡素化する Web アプリケーションです。これにより、ユーザーはプログラミング言語、トピック、その他の並べ替え基準に基づいてリポジトリをフィルタリングできます。 UI はまだ開発中ですが、このプロジェクトは貢献者、特に初心者にとって貴重な学習の機会を提供します。リポジトリ内の課題の多くは「良好な最初の課題」としてタグ付けされているため、出発点として最適です。

私の貢献として、リポジトリを参照する際のユーザー エクスペリエンスを向上させるナビゲーション機能を実装することにしました。

問題の特定

プロジェクトには当初、リポジトリの次のページに移動するボタンがありましたが、完全なページネーション システムがありませんでした。ユーザーはページ間を簡単に行き来したり、特定のページにジャンプしたりすることができず、ユーザビリティの問題が生じていました。私はこの制限に気づき、プロジェクトの管理者にこの問題を私に割り当てるよう依頼しました。

プロジェクトに取り組んでいる間、目立った (良い意味ではありませんが) 1 つの側面は、コードベースの構造方法でした。プロジェクトではすべてのロジックが 1 つの script.js ファイルに書き込まれていましたが、プロジェクトが成長するにつれて保守が困難になる可能性がありました。この PR では、ページネーション ボタンのみに焦点を当てていたため、大きな変更は加えたくありませんでしたが、今後の号でコード構造のリファクタリングを提案する予定です。

実は、その前に別の開発者が次のページに移動するボタンを作成しましたが、特定のページだけでなく前後に移動する場合のユーザーエクスペリエンスにとっては良くありません。この理由により、私はメンテナにこの問題を割り当ててもらうようコメントしました。
このプロジェクトに取り組んでいたとき、気に入らなかったことが 1 つあります。これは、メンテナがすべてのロジックを 1 つの script.js ファイルのみに記述していたときのコード ベースを構築する方法です。ただし、この問題はページネーション ボタンを要求するだけなので、あまり修正したくありません。後でコードベースの再構成を要求する新しい問題を作成します。

新機能: 強化されたページネーション

既存の機能には、ページ間を移動するためのボタンが 1 つだけあり、ページごとに 10 個のリポジトリが表示されていました。私の目標は、「前へ」、「次へ」、および番号付きのページ ボタンを備えた、よりユーザー フレンドリーなページネーション システムを実装することでした。これにより、ユーザーは興味のあるページに直接ジャンプできるようになり、ナビゲーション エクスペリエンスがよりスムーズになります。

実装

GitHub API 制約:

ページネーションの実装中に、結果が 1,000 アイテムに制限されるという GitHub の API の制限に遭遇しました。検索で 1,000 を超えるリポジトリが見つかった場合、この制限を超えて移動しようとするとエラーが発生し、未定義のデータが返されます。デザインではページごとに 10 個のリポジトリが表示されるため、この問題の発生を避けるためにページ数の上限を 100 に設定しました。

コードの変更:

• ページネーション用に script.js に新しい

  セクションを導入しました。これにより、いくつかの CSS スタイルを追加して、ボタンの美しさとユーザー エクスペリエンスを向上させることができました。

• ページネーションのコア ロジックは 2 つの新しい関数にカプセル化されました:

  • createButton()
  • renderPagination() これらの関数は、使用可能なページに基づいてページネーション ボタンを動的に生成し、現在のページ ボタンを無効にするスタイルを適用して、ユーザーが誤ってボタンを再クリックするのを防ぎます。また、ボタンにホバー効果を追加して、より洗練された外観を実現しました。

CSS の改善:

ページネーションのデザインでは、現在のページ ボタンが無効になっていて、その状態を示すために別のスタイルが設定されていることを確認しました。他のページ ボタンにはホバー効果が追加され、インタラクティブ性が強化され、ユーザー エクスペリエンスが向上しました。

結論

これで、Hacktoberfest の第 2 週に対する私の投稿が終わりました。私は現在、来週貢献できる別のリポジトリを探しています。理想的には、もう少し挑戦的なプロジェクトを見つけて、自分自身を追い込み続け、徐々にスキルを向上させたいと思っています。

読んでいただきありがとうございます。ハクトーバーフェストの旅についてもっと共有するのを楽しみにしています!