学習アウトプット

最近の成果物

GitHub

初期のポートフォリオサイトサイト

以下は初期の成果物の一部です。

1. 最初の練習

翻訳のための改行調整

• 最初の作品です。2019-02-24公開。
• 仕事がら英語のホワイトペーパーやWebサイトを沢山読みますが、今はGoogle翻訳がかなりよくなったので、まずはGoogle翻訳にかけます。
• しかし、PDFなどで右端で改行が入っているものをコピペしてもうまく翻訳できず、非効率です。
• HTMLとCSS、JavaScriptをほんの少しかじった段階で２日かけて作成し、続く2日で実践投入し、不具合修正及び改良しました。
• 簡単なものですが、業務に役立っています。
• これを気にGitも使い始めました。
• 関連記事
  • 最初の作品を作りました(2019-02-24)
  • GitとSourceTreeを同時学習中(2019-02-25)
• デプロイ（エックスサーバー）→ 2021-07-29: Vite (バニラTypeScript）で別途作成
• GitHub → 2021-07-29: Vite (バニラTypeScript）で別途作成

Webサイトの模写

• airbnbのページを模写しました。2019-04-30公開。
• 関連記事
  • やっと模写完了 (2019-05-01)
  • 【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】
• デプロイ（エックスサーバー）
  • パスワード等：heisei/owari
• GitHub（未公開）

2. Node.js/MongoDBの学習

Node.jsによるWeb APIを利用した天気予報Webサイト

• Node.js 及び Express.js を利用しています。
• 天気予報データは、mapbox.com 及び darksky.net から取得しています。
• 関連記事
  • Node.jsアプリケーションをHerokuにデプロイしました (2019-08-13)
  • Node.jsからDark Sky APIを用いて天気情報を得る (2019-08-05)
  • Node.jsのデバッグ方法 (2019-07-13)
• デプロイ（Heroku)
• GitHub

MongoDBを用いたタスク管理アプリ

• サーバーサイドのみ完成。
• 作業保留中。
• 関連記事
  • Mongooseで重複した値が登録できなくするuniqueが利かない (2019-09-12)
  • Postmanはとっても便利 ～ 環境変数と認証トークン (2019-09-16)
• GitHub（未公開）

Socket.IOを用いたチャットアプリ（開発中）

• 途中からReact化しました。
• 関連記事
  • HerokuにデプロイしたアプリがApplication error(2020-02-24)
• デプロイ(Heroku)
• GitHub（未公開）

3. Reactの学習

優柔不断なあなた

• 教材をちょっと改良したやつです。
• 関連記事
  • 最初のReactアプリのデプロイ(2020-01-11)
• デプロイ(エックスサーバー)
• GitHub（未公開）

GitHubFinder

• 教材をちょっと改良したやつです。
• ブログ記事：ReactアプリをNetlifyでデプロイしてみた(2020-03-12)
• デプロイ(netlify)
• GitHub（未公開）

PienMoji

• 関連記事
  • PienMoji その① 構想と下調べ (2020-03-13)
• デプロイ（Netlify）
• GitHub

連絡帳

• 教材をちょっと改良したやつです。
• デプロイ(heroku)
• GitHub

広告リンクのレイアウト

• 関連記事
  • クリップボードAPIを使ってみました (2020-09-09)
  • Open Graph Protocol入門 (2020-09-16)
• デプロイ(Netlify)
• GitHub

4. Gatsby

ポートフォリオサイト

• ブログ記事：Gatsby入門(2020-07-04)
• デプロイ(Netlify)
• GitHub

メディアウイルス

• 日本の沢山あるだろう新聞会社等のメディアの一覧と、それらがある観点でまとも或いはいい加減な報道をしているのかを示すシンプルなWebページを作りたいと思い、土日で骨格を作りました。
• データはAirtableを使用したgatsby-airtable-listingというGatsbyのスターターを利用しています。
• 入力するデータの調査が大変で、学習に差し支えるため更新を中断しました。
• ブログ記事：Airtableとgatsby-airtable-listingの応用 (2020-09-27)
• デプロイ(netlify)
• GitHub

Over 40 Web Clubのランディングページ

• 2020-09-28に最初の会員に加入いただいた翌日に3時間で作成。
• デプロイ(Netlify)
• GitHub

ピータンのお気に入りの映画

• 2回目のぎっくり腰苦しんでいるときに、作ってみました。
• 最初不具合があり2020-11-02に完成。
• GitHub

Gatsby+Shopifyのオンラインストア

• 2020-12-31公開
• デプロイ(Netlify)

本ブログのヘッドレス化

• 2021-02-13公開
• デプロイ(Gatsby Cloud)

たてツイート

• 2022-04-13公開
• 縦書きツイートするためのアプリ。
• デプロイ(Netlify)
• Vite, React, TypeScript, Mantineを使用
• GitHub

6. Next.js + TypeScript

バス時刻表

• 2022-01-04公開
• 会社の送迎バスの時刻表を見るアプリ。問い合わせフォーム付き。会社を退職しため運用は停止しています。
• デプロイ(Vercel)
• Next.js, TypeScript, Auth0, Headless UI等を使用。
• GitHub

今日のお弁当

• 2022-03-01公開
• 会社のお弁当を注文するアプリ。会社を退職しため運用は停止しています。
• デプロイ(Vercel)
• Next.js, TypeScript, Auth0,Headless UI等を使用。
• GitHub

7. その他

Connpassイベント

• Over 40 Web Club の管理者として、イベントを企画しています。
• https://over40webclub.connpass.com/

yorkshire-2014-pwa

• ぎっきり腰で会社を休んだときに、PWAに入門し、3日ほどいじってみました。
• ブログ記事：PWA触ってみました(2020-02-05)
• デプロイ（Firebase)
• GitHub

オンラインコミュニティ Over 40 Web Club

• 2020-09-28:4月くらいから温めていたSlackコミュニティに最初の１人を勧誘し、入会いただきました。2025-12-31に活動を停止しました。