ポートフォリオサイトついては、親族が経営している会社のコーポレイトサイトをリニューアルするという設定で制作しました。初めてのWEBページ制作なので、シングルページの簡単な構成ですが、一般的によく見られる仕様を実装するよう心掛けました。ハンバーガーメニューやお問い合わせフォーム、レスポンシブ対応、アニメーションなど。下記URLから参照できます。
https://tomohiro-yamashina.github.io/portfolio-site/
私事で恐縮ですが、Apple製品を所有しておらず、Safari、iOSでの動作確認はできておりません。Windows環境下において、IE以外の主要ブラウザでの動作確認は済ませております。ご了承ください。
コーディング、またコンピューターサイエンスについて専門的な教育は受けておりません。昨年から8月頃からプログラミングに興味を持ち、半年ほど独学で学習しております。学習初期において、右も左も分からない状態でしたので「Reactの構文が理解できるようになる」という目標を立てて取り組みました。今から思えば、WEB制作においてReactの重要度は余り高くなく、他のライブラリーの学習に時間を割ければと少しばかし後悔しております。
そのためポートフォリオでは、UIの構築のためのライブラリーはjQueryではなく、Reactを使用したSPAとなっております。jQueryは学習しておりませんが、Reactの学習に先立って、ECMAScriptに準拠した文法や構文は学習したので、Vanilla JavaScriptは、初級レベルですが理解できます。
ポートフォリオのサイト制作にあたり、デザインの初学者向けの本を数冊読了した程度です。コーディングに比べて、学習時間は少ないのが正直なところです。デザインの専門的な教育は受けておりませんが、学生時代からAdobeソフトに触れる機会がありましたので、IllustratorやPhotoshopは、業務レベルではないですが利用はできます。Web制作に特化したソフトのXD、またはFigmaの学習はしておりません。
今回のポートフォリオ制作にあたって、まず一貫するコンセプトと全体的なデザインを決定し、細部を調整するという手順を取らず、コーディングの学習進捗に応じて、パッチワーク的にデザイン作業を平行してしまいました。手段が目的化してしまった反省点があります。グラフィックデザインについても初学者ですが、視覚情報を通じてコミケ―ションをすることには、強い興味があります。
基本的な文法や構文は学習済みです。HTMLのリントツール「Markuplint」を導入して学習を進めましたので、W3Cに準拠した記述になっているかと思います。ただ、アクセシビリティへの対応など、実践的な知識の学習はできておりません
基本的な文法や構文は学習済みです。CSSのリントツール「Stylelint」を導入して学習を進めました。一般的なレイアウトやレスポンシブ対応は、調べながら実装できます。今回のポートフォリオ制作にあたっては、SCSSの導入。加えてReact環境下でしたので、CSSModuleの導入しました。そのためグローバルスコープの汚染を防ぐ命名規則などは設けておりません。BEMやFLOCSSといったCSSの潜在的な諸問題を回避するためのCSS設計は学んでおりませんが、概念は理解しております。
基本的な文法や構文は学習済みです。ECMAScriptに準拠した言語仕様そのものの理解にも苦労しましたが、それよりもECMAScriptを中核としたJavaScriptのエコシステムが、初学者の私には非常に複雑に思えました。全体像をぼんやりと理解するのに多くの時間を要しました。
今回のポートフォリオ制作にあたっては、トップビューの背景画像がアクセスする時間帯によって変更される処理や、GSAPを使用したスクロールアニメーション、Lenisを使用したスムーススクロールなどを、JavaScriptで実装しました。Ajaxなどの非同期処理については、HTTPメソッドやWebAPIとの連携方法と一緒に学習中です。
PHPよりもJavaScriptの学習を優先したので、WordPressのテーマ制作ついては未学習ですが、ローカル環境にWordPressを構築してドキュメントは一度だけ読みました。CMSツールがサーバー上で、どのように機能するかは理解しております。
