l
o  spinning kotaro  e
v

2021
現 在

November

Maincoonブリーダー様のサイトの制作および公開

使用技術:Next.jsTailwind cssTypeScriptVercel + Netlify

ご希望の多いお問い合わせ機能と依頼主さま本人が投稿できるシステム。Google Analytics導入によるさらなるパフォーマンス改善を実現が可能になりました。

Lighthouse performace scorecanon-catへのリンク

September

コーポレートサイト構築検証

使用技術:Next.jsTailwind cssmicroCMSauth0SendGrid

コーポレートサイト構築の打診を受け、技術検証。お問い合わせメールの送信処理にSendGrid、ログイン処理にAuth0を検証。
パフォーマンス、SEOに強い高性能のJavaScriptサイトを、必要な方に適正な価格でお届けできるように、 テンプレート化も同時に進行中。

GitHubコード非公開

July

ポートフォリオサイト(本サイト)の作成

使用技術:Next.jsTailwind cssTypeScriptVercel + Netlify
開発環境をNetlify、本番環境をVercelに置く。 SEO、OGP、問い合わせフォーム、 言語属性に対応。 Lighthouseパフォーマンススコア98点。JSXの記法についてはほぼマスター。TypeScriptは学習を開始した程度。CLIはかなり自由に使えつつある。
今後の課題:グローバルな状態の保持、現状のスキルはプログラミング全般で基本概念を抑えた程度であり、props、stateの管理など全般により早く正確に実装するスキルが望まれる。OGPはページごとのmetaデータの出しわけが要学習。

To GitHub

June

ブログサイト構築検証

使用技術:Next.jsTailwind cssmicroCMS
ブログサイト構築の打診を受け、技術検証を実施。APIを取得してデータを更新できることを確認する。フルスクラッチでループ処理などを実装する実力はないが公式サイトのブログなどの具体的なコードが示された場合は、実装してスタイリングが可能。課題:行間やマージンの取り方など。

To GitHub

May

お題投稿アプリの開発

使用技術:ReactMaterial UI + 素のCSSVercel + Firebase
オンラインコミュニティイベントでメンバーからのお題を投稿するためにアプリにチャレンジ。ローカルストレージにメモを登録するコードを参照して、フロントの実装を進めたが、複数人による投稿を可能にするためにFirebaseでバックエンド処理を実装した。 実際にはバックエンド処理は自力ではできず、現役エンジニアとの初の共同開発となった。ブランチを切って開発する実践を経験。アプリとして多くの課題があったものの、制作からデプロイまで1週間以内で完成にこぎつけ、プログラミングに自信を得た作品。これを機に、素のCSSでの実装に課題を感じる。 バックエンド(DB)の設計がアプリに与えるインパクトについて実例を持って理解。

To GitHub

March

Ring the Bells(LT会登壇用アプリ)

使用技術:ReactMaterial UI + 素のCSSNetlify過去の出来事を物語調に語るために作ったアプリ。過去のJavaScriptのコードをReactに応用。スムーズスクロール、React-mouse-particleなど、美しくて便利なライブラリを知る。

To GitHub

February

チャットアプリの開発

使用技術:ReactMaterial UI + 素のCSSVercel + Firebase
はむさんのUdemyの井戸端会議アプリの講座を受講してほぼそのまま使用しています。 オンラインイベントで過去3回使用された経験があり、その度ごとに模様替え、その後質問が分かりにくなどの課題があり、質問にチェックを入れると質問タブに表示されるように進化を重ねています。

To GitHub

2021

メルカリサイトのクローン

使用技術:React素のCSS + BEMNetlify+ Heroku
初めてReactを知り、html/cssでクローンしたサイトをjsx化。ログイン、データベース処理(PostgresQL)を学ぶ。Reactの基礎、json, jwt, async awaitなどの構文,ローカルストレージなど広く浅く学ぶ。

To GitHub

November

Webサイト作成

使用技術:React素のCSSNetlify(お問合せフォーム)
学びたてのReactを使ってみたくてサイトを作成。さまざまなミニアプリを量産していた時期。お問合せフォームの実装に苦労しました。Netlifyではお問合せフォームが無料で設置できるため、練習してみました。

To GitHub

April

学習の開始

使用技術:HTML素のCSSAWS (S3/Route53)
Progate、ドットインストールで独学を開始。初めてのWebサイトをネットで見つけたBootstrapテンプレートを用いて作成。AWSのS3にホスティングし、Route53でルーティングをしてみた。AWSを剪定したのは、前職でのサービスがAWSを使用しており、離職後も理解を深めてみたいという思いが強かったため。

2020
学習開始