Zenn
👻

私のポートフォリオ①："Together"の紹介と参考にしたものや考え　

2023/05/14に公開
AWS
React
Rails
個人開発
ポートフォリオ
idea

未経験から転職　-学習からポートフォリオまで

簡単に自己紹介
  • 1998生まれの25歳🍎
  • 前職：　鍼灸師・柔道整復師　(2019.3 ~ 2022.12 / 役職：主任)

命捧げていた競泳人生の中でたくさんケア面で助けてもらった影響で、
私も誰かの力になりたい！という経緯。あとは身体の勉強が好き。

  • 2022.11~ 興味を持ちpaizaで勉強を始める(独学)

身近にエンジニアがいるので、指導もらいながら。
とはいえ、PCノータッチで生きてきたのでFileやフォルダもわからないところからでした。

  • 2023.01~04 DMM WEB CAMPにて学習

2023.01~04 DMM WEB CAMPにて学習開始

この内容は、また多くなるので別記事にて掲載したいと思います。

ポートフォリオの制作で意識すべきこと

ただ作ればいいものでもない！！！！

  • 今まで学んだ基礎技術はしっかり取り入れ、説明までできるようにしておくこと。
    スクール出身者だから歓迎されているかといえば、そうとも言えない。
    スクール出身だからこそ、メンターがいるから手助けをしてもらえる(自分一人ではない可能性も)ということなので、もし技術について聞かれた時には最低限答えられる必要がある。
    作る時点で説明できなかったとするならば、作りながらしっかり学んでいく姿勢があれば大丈夫！
  • 作成動機から、ゴールが一貫していること。
    ストーリーを持たせられたら最高！
  • ポートフォリオのテーマに対して、必要な機能が実装され、余計な機能が実装されていないか
    ただ機能を盛り込むといいもんでもないので、必要な機能を

【可能であれば】

  • 最新のトレンドにもチャレンジする
    => 積極的な姿勢を見せることができる
    => 私でいえば(最近でいえば）トレンドのAIのAPIを使って取り入れてプロンプト書いてみた！
    (やってみたかった笑)

【個人的に、この要素は長期的にいいと思ったこと】

  • 私は自分の今後の方向性(活動していきたいこと)を入れました。
  • これから少しずつ運営しながら行くことで、自分も自分のサイトも、レベルアップできる！のような形にしました。

Portforioは2つです.

製作したPortforio① "Together"

こちらのページからご覧ください

https://narita-airi.com/


トップページ

さまざまなエンジニアや企業様にみていただきましたが、
"このままリリースしてもいいくらい"や、"完成度が非常に高い"との意見を頂けたので、
自分としても自信になったし、もっと頑張るぞとモチベになりました。
UIを褒めていただけることが多かったです。
(もちろん！まだまだ改善の余地あり。改善余地たくさん！)

開発環境
OS：Linux(CentOS)
言語：　HTML,　CSS,　SASS,　JavaScript,　Ruby,　SQL
フレームワーク：Ruby on Rails,RSpec(test)
JSライブラリ：jQuery
API :Swiper.js,Google Maps API,OpenAI API
IDE：Cloud9
分析：Google analytics4

サイトテーマ

"If You Want To Go Far, Go Together" (遠くへ行きたいならみんなで行け)

一人ではなし得ないことも、みんなで協力すれば成し遂げられる。
ここには仲間が、たくさんいる。ともに目指す場所へ。

テーマを選んだ理由

このテーマを選んだ理由は、大きく2つ。

  1. エンジニアの方々や受講生の方々と勉強をする中で、一人でやるよりも、
    仲間と協力しながら学び、問題を解決していく方が学びは深まることを体験し、
    自分でそのようなeventの場を作成したいと感じたから。
  2. 自分自身学習をする中で、zennにアウトプットを行なってきて、自分でブログ系のサイトを
    立ち上げてみたいと感じたため。

このような経験から、上記2点を組み合わせたブログサイト兼学習イベント開催ができる
コミュニティサイトがあるとすごく効率も知見も広がると考え作成した。
同じような学ぶ人たちの力になれると嬉しい。

機能一覧

補足欄にも記事リンクを貼っていますが、
実装方法について聞かれて答えられないということは避けたかったし、
なんとなくで実装したくなかったので、基本的にはzennに実装方法や注意すべき点も載せていました。振り返りにも便利なのでやってよかったです。

機能(大枠) 詳細機能 補足・使用したものなど
USER ユーザー登録/ログイン機能 gem: devise
他）gem 'simple_form'も使用
入力formのカスタマイズを容易に
ユーザ編集機能
admin画面 管理、監視のため
コメント削除、user status変更可
ゲストログイン ※PFを見ていただくため ※GUESTはUSER編集なし
follow・follwer 実装方法はこちら
(応用課題の時期のまとめです)
通報機能 userからの通報機能 実装方法
不適切な投稿者などで不愉快になる人を
減らすために
通報回数に伴う自動利用停止機能 実装方法
3回通報を受けたら自動的に利用停止
adminからの通報内容確認 実装方法
技術ブログ 投稿機能
マークダウン機能 実装方法はこちら
その際のｾｷｭﾘﾃｨ問題:XSS
gem: RedcarpetとRouge
下書き保存機能 実装方法はこちら
やはり技術ブログなので、markdownでの投稿必須！
いいね、コメント ajax化することにより、開発的な側面もあるけど、UXの向上にもなる
ハッシュタグ みたい分野で見やすくするため。
USERが投稿時に設置可能
イベント機能 オンラインorオフライン開催
まとめはここ！ 		オフラインは
google map API
google map APIまとめはここ
各USERのイベント管理ページ 参加するもの、したもの
作成したものの管理のため
検索機能 ジャンル(user,event,ハッシュタグなど)選択　可 実装方法はこちら
完全一致、部分一致の選択可
chatBOT openAIの使用
実装方法はこちら
これは最近のトレンドとしてプロンプト設定を体験した

使用gem一覧

使用したgemに関しても以下のように、なぜ入れたのか、なんの役割があるのか、
まとめてみました！参考までに。

使用するgemについての決め方に関して：
使用するgemは、実装したい機能を決めて機能リストを作る際に、実装方法を調べるとともに、
それに適応するものはないかも同時に調べて、あれば使用gemとして入れていく(memoしておく)
というふうにして決めていました。

gem 概要 実装理由
gem 'simple_form' 簡易的に
formの作成できるようにするgem.
カスタマイズも容易に
できるため使用。		 入力フォームのカスタマイズを容易にするため。
gem 'meta-tags', :require => 'meta_tags' メタタグを簡単に生成するためのGem。 SEO対策
・meta-tagとOPGについて
・requireについて
gem 'byebug' bybugの使用 エラー解決を素早く行うため
gem 'rspec-rails' RSpecテストフレームワークを使用するためのGem Rspecテストのため
gem 'faker’ テストのためダミーデータ挿入 ※developの時のみ。
本番、開発環境、別々のseed作成方法
gem "factory_bot_rails" Ruby on Railsアプリケーションで、ファクトリー（テストデータ）を生成するためのGem。テスト用のデータを簡単に作成するもの。 テスト用のデータを作成するため.
seedとは
gem "redcarpet" Rubyのマークダウンパーサーライブラリ.
マークダウンを使用してドキュメントを書くことができるようにするもの。		 投稿をマークダウンで出来るようにするため
マークダウン実装方法
gem 'rouge' コードのシンタックスハイライトを
行ってくれるgem		 白ではなく、コードの色をつけるため。
gem 'kaminari', '~> 1.2.1' ページネーションを行うためのgem ページネーションの実装のため
gem 'enum_help’ 環境変数を管理することができるgem. 自身で作成したアプリケーションの直下に
.envファイルを作成することで、
パスワードなどネット上に公開させたくない情報を扱い、自動で読み込むことが可能です。
gem 'httparty’ open AIのAPI使う時に、それでも出来ると思うが、少々複雑だったので使用 他のAPIとの通信を簡単にするため。
gem "ruby-openai” Ruby でopenAIを使用するためのgem
gem 'data-confirm-modal’ Rails の jquery-ujsをフックして、表示されるモーダルダイアログを Bootstrap のやつと差し替えてくれるライブラリ アラートの表示を綺麗なものにしたかったため

DB設計

  • テーブル定義書：　Googlesheetsで作成

https://docs.google.com/spreadsheets/d/1N7G1s3Di0b0VrLpVU6wXEhB8krQ56zkRehrSucyjqvk/edit#gid=0

  • ER図

こだわり

■ 全体として

  • UXにはもちろんこだわって作ったのですが、
    フロントが綺麗じゃないと使っていただくこともできないなと思ったので、
    フロントに力を入れました    。

  • MVCを意識したコードにするよう気をつけた
    => MVCについてはこちらにまとめがあります！

  • さまざまなAPIをそれぞれの目的に応じ、取り入れてみました。(今後はAPIも作成したい)

  • また、私の実現したいことを詰め込んだので、今後も運用していくことを考えて作成しました。
    => SEOの部分で詳細を掲載

■ 1. フロント部分

  • デザインの統一感を出すために、基本的にはpartial化

  • デザインは8の倍数、もしくは４の倍数で調整
    => 人間が見た時にきもちいいバランス
    ※ベースを8の倍数とし、レスポンシブにも対応するために4の倍数使用。

  • Scssを利用し、BEM記法の使用

  • tooltipを使用してわかりやすく

  • デザインはfigmaを使用して大まかなデザインを作成したのですが、
    以下のようなものを参考にイメージをつけました。

参考書類

■ 2. バックエンド

  • さまざまなAPIの使用に挑戦(openAI, google map APIなど)
  • scopeの利用(MVCの意識)

■ 3. インフラ

４. SEO対策

私の考える完成度を高められた要因

今後、学習機関にやったことや、自己学習について意識して行ってきたこと、toolは載せるが、

  • スクール学習期間、スクールの内容は理論から理解できるようにしたこと。

    • ひとつひとつ、とまってずっと深掘りすぎるのは良くないが、たくさん数をこなしながら、
      大事なところ、理解しなければいけない時が(スルーできない時が)絶対来る。その時は時間かかってでも調べる。
    • 必要なことなのか、今は違うのか、シニアエンジニアに質問した
    • その積み重ねが、基礎力となり、自分で作る際も活用できる。コピペは絶対厳禁！！！

  • 必ず、その日学んだことはその日の夜にアウトプットする

    • このzennは学習始めた昨年１１月から毎日続いている！
    • 少しでもいいからする。いいインプットがあってこそ、アウトプットができるし、
      これを毎日していると、わかったつもり、の部分も見えてくるよ。周りにそれを共有していくのも、一つの手！

  • スクール期間中、スクールの内容だけの学習にしないこと！
    これに関しては意見分かれると思うが...

    • ITのニュースチェックでもいいし、エンジニアと色々お話しするとか、周りにいなかったらメンターでもいいと思う。視野を広げることは大事だと思う。気になること聞いたり。
      レガシーも大事だけど、トレンドも大事。少しずつ、そこを繋げられたらさらに楽しさも出てくるし、
    • そのようなものを見る中で、お話の中で、PFのアイデアとなるものに出会えるかもしれません。
      どのようにしてこの言語ができたんだろう...とかでもいいし、いろんなものに触れることが私のおすすめ！

  • 自分である程度考えた上で、エンジニアにアドバイスをもらう。答えではなくヒント的な。
    デザイン部分で言うと、８の倍数とかは自分一人では調べて出てこなかった内容だった。
    デザインで意識すべきことを、エンジニアの方に聞いて、それを自分で調べて学んだ。

製作したPortforio② "Introduction site"

開発環境
OS：Linux(CentOS)
言語：　HTML,　CSS,　JavaScript
フレームワーク：Next.js
JSライブラリ：REACT
分析：Google analytics4

これは最近学んだREACT,NEXT.jsを使用した自己紹介サイト！
これは実際に使って触れてみた、のものなので今後もっとREACT学ぶ中で機能などを足して
成長させたい私のサイトです！❤️

以上！！！！

Discussion