ポートフォリオ ~ オリジナルECサイト ~

未経験からITエンジニアを目指すにあたり絶対に必要なもの、

それは自分で作ったポートフォリオです。

でも、どんなものを作ればいいか分からないという方すごく多いと思います。

私も最初は全然分からず、基礎勉強だけをし続けたりしていました。

そこで、今回は私が最初に初めて作成したポートフォリオであるオリジナルECサイト「SELL-BUY」について解説します。

コンセプト

サイト名:SELL-BUIY

※↓クリックすると、実際のページにアクセスします。

解説

このポートフォリオはネットショッピング感覚で株式を買うことができるサイトです。

なぜ、このサイトを作ろうと思ったかというと、

私は趣味で株式投資をやっていまして、これを題材にしたテーマのサイトを作ろうと思いました。

ECサイトにしたのはオンラインスクール「CodeCamp」の最終課題で指定があったためですが、

ECサイトはログイン機能、ユーザー登録、DB操作などなどwebサイト制作において

基本となるものを一通り使用するので勉強になりますし、転職活動で評価してもらう上で評価が高くなります。

下が実際のECサイトを操作している映像です。

 

※↓クリックすると、操作映像が流れます。

映像では、「ログインページ」>「トップページ」>「カートページ」>「購入完了ページ」>「商品管理・登録ページ」の順で操作しています。

[affi id=4]

コードリソース

実際のコードは下のリンクのGithubに上げてあります。

「www」フォルダ以下にMVC形式でプログラムが入っています。

コードは結構汚いです笑

 

https://github.com/kmno4hno3/SELL-BUY

機能

このサイトの機能としては以下の通りです。

  • ログイン
  • ユーザー登録、管理
  • 商品のカート追加、カート追加後の変更、購入
  • 商品の管理(商品登録、在庫数変更、削除)
  • 株価取得(登録時のスクレイピング)
  • 日経平均、DOWチャートの表示
  • Cronによる市場が開いてから閉じるまでの30分間隔での株価の取得

特に工夫した点としては商品登録およびCronを使ってのスクレピングによる株価の取得機能です。

どうせだったら、本当の株価を利用したいと思い、某サイトからスクレイピングにより

リアルタイムでの株価を取得するようにしました。

使用した技術

制作に使用した技術は以下の通りです。

<言語>
  • HTML/CSS:ページ全体の外観
  • Javascript:チャート表示
  • MySQL:商品のデータ情報管理
  • PHP:サーバーサイドの操作
  • Bootstrap:ページの外観(レスポンシブ機能)
<ライブラリ>
  • Chart.js:チャート表示

https://www.wp-benricho.com/chart-js/

  引用:Web制作ナビ

 

  • Guzzle6:非同期通信によるスクレイピング

https://dstrikes.net/2018/04/10/%E3%80%90php%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%80%91guzzle6%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0-%E3%81%9D/

  引用:稼げ!アフィリエイトパワーズ

 

<その他>
  • サーバー:Xserver

https://www.xserver.ne.jp/

  引用:XSERVER Inc.

  • 画像素材など:freepik

https://jp.freepik.com/

  引用:Freepik Company

 

制作期間

総制作時間は1ヶ月半でした。

プログラミング学習を始めたのが6月下旬で約1ヶ月の基礎学習を経て制作に取り掛かりました。

基本機能は比較的難なく実装できたのですが、苦労した点はデザイン面とCronによるスクレイピング機能です。

デザインはご覧の通りシンプルであまり見栄えはそこまで良くないです。

Bootstrapのおかげでまだ見ることができるレベルにすることはできました。

今後はjQueryなどで動きを付けたwebサイトを作って行きたいと思います。

Cronによるスクレイピングですが、基本的にCronとスクレイピングの資料があまり多くないこともあって最も手間取りました。

制作期間の大部分はこれに手間取ったのではないでしょうか。

 

転職活動での評価

実際に転職活動でこのポートフォリオを引っさげて臨みました。

正直なところ、そこまで突っ込んだ質問はされませんでした。

基本的にサイトのコンセプトや技術などそういった点に関して浅く聞かれましたが、

その中身がレベルの高いものかどうかよりもいかにちゃんと考えて作って説明できるか

問われている印象でした。

ただ、Cronとスクレイピングを使った機能に関しては少し関心を持たれた企業もあったので、

ポートフォリオを作る上では何か他の人とは違うオリジナリティーを入れると良いのではないでしょうか。

まとめ

未経験からITエンジニアになるために初めて作ったポートフィリオについて紹介しましたが、いかがでしたか?

私は自社開発企業に行けましたが、意外とレベルは低いですよね?(笑)

このポートフォリオで行けたのなら、自分なら余裕だという自信を持って、学習に取り組んでいただけたら幸いです。

[affi id=4]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です