架空ペット保険のサイト(1ページのみ)

OVERVIEW

React.jsの学習のため、サンプルサイトを作成しました。

YEAR 2020

GItHub ページデモ


「React.js」に触れてみたいと思い、学習しながら作成しました。

レスポンシブ対応も順次していきます。


主な使用技術(開発環境)

  • Visual Studio Code
  • Javascript
  • React.js
  • animate.css
  • Font Awesome
  • Fire Alpaca(画像編集アプリ)

<デプロイ>

  • Now

なぜ作ったのか

ReactはJavaScriptがベースとなっているため、Javascriptの学習にいいと感じ、脱jQueryを目指す意味でも一度挑戦してみようと思い、今回制作に至りました。

Vue.jsを利用しアプリを開発した事があるので、その経験からReactの学習コストはそこまで高くないかな?と考えていましたが、Vue.jsと比較してJavaScriptに近い記述が多く、想像していたよりも苦戦してしました。引き続き技術に触れながら学習していきたいです。

サイトのデザインはいくつかの既存サイトを参考にしながら作成しました。

自分の技術力でどこまで再現できるか挑戦できたことはいい経験になりました。


アピールポイント

脱jQueryのため、処理は全てJavascriptで記述しました。

また、ページ内で使用している画像の一部は、フリー素材を加工したり、自分でイラストを追加したものを使用しています。


今後実装予定

  • 細部までレスポンシブ対応を行う
  • 各項目にアンカーを設置し、該当箇所へジャンプできるようにする。

最後に

英語の解説サイトの方が多く、エラーが出た際は苦戦してしまったこともありましたが、ずっと気になっていたReactに触れ、基礎の部分を体験できたのはいい経験になりました。今度はDBとやりとりするようなものを開発できたらいいなと考えています。

最後までご覧いただき、ありがとうございました。


WEBSITE