今日の動きを、つかむ。
注目ニュースに加え、日付ごとの一覧には全収録記事を表示。カテゴリー・検索・タグ・アーカイブを備え、詳細では要約、主な事実、注目する理由、原文リンクを読みやすく整理しました。
ニュース画面の実装を見るポートフォリオ
こんにちは、LEI ANDAです。ライ アンタツつくる視点。守る視点。
立命館大学 情報理工学部 情報理工学科
ネットワーク・セキュリティコース · 3年次在学中
読みやすさと、情報源が見えるWebをつくっています。
ReactNext.jsTypeScriptVercel
制作プロジェクト
SHIELD NEWS.
日本のITを、毎日の視点に。
日本のITニュースを、出典とともに届けるニュース集約サイトです。
読む体験から、
更新の仕組みまで。
日本のITニュースを、読みやすく、継続的に届ける。
情報源が見える構成に。
ニュースをJSONで管理し、Zodで入力形式を検証。IDによる統合と履歴の保持に対応したインポートスクリプトを用意し、収録日と原文の公開日時を区別しています。
インポートの実装を見る変更を、公開までつなぐ。
ニュースデータと画面をGitHubで管理し、mainブランチへの反映からVercelの自動デプロイへ。ビルドと公開ページを確認し、更新した内容が届くまでを検証しています。
デプロイ設定を見る技術スタック
開発を支える技術。
SHIELD NEWSで使用している技術です。
実装から公開・運用までを支えています。
フロントエンド
React.
Next.js.
白とミントグリーンのニュースUI、一覧・詳細・分類・検索と、控えめな動きを実装。
React · Next.js · TypeScript
データ・検証
JSON.
Zod.
構造化したニュースデータの検証、インポート、履歴の管理。
JSON · Zod · Node.js
品質・テスト
Vitest.
Playwright.
ニュース表示とインポート、PC・スマートフォンの操作、動きの軽減設定を検証。
Vitest · Playwright · TypeScript
プロフィール
私について。
作品を通じて。
LEIです。
読みやすいWebと、情報を確かめられる仕組みをつくる、情報理工の学生です。
立命館大学 情報理工学部 情報理工学科に在学し、ネットワーク・セキュリティコースの3年次に在学しています。Web制作を通じて、学んだことを形にしています。日本ITニュースサイト「SHIELD NEWS」では、読みやすい画面、出典の明示、ニュース一覧、データ検証、GitHubとVercelによる公開に取り組んでいます。
- 関心のある分野
- Web開発・ネットワーク・セキュリティ
- 制作プロジェクト
- SHIELD NEWS
- 専攻コース
- ネットワーク・セキュリティ
- 公開リポジトリ
- github.com/suppeans
ご連絡は、leianda946@gmail.com へ。