Souta Tech Blog.

Acvationリプレイスしました。投稿日: 2022年 2月13日

複数のおかしい挙動や機能の連続

フォードバックをいただいて気づくことができたこと

少し自分の軸やどういうエンジニアを目指しているのかどうかをお話しさせてください。
自分が目指しているエンジニアは技術はもちろんなのですが、それよりもプロダクトに対して適切な技術を用いてアプローチして

  • この機能を実装したらユーザーにとってどのような恩恵があるのか
  • 今のニーズに応えるにはこんな機能が必要だからこの技術を用いて開発する
    • 実装のコストやパフォーマンスの部分も考えられたらよりいい

など今この記事を書いているときには他にももっとたくさんあるのですが
何が言いたいかというとユーザー目線で考えられてプロダクトとして愛されるようなものづくりをするエンジニアを目指しています。(自分ではそう思っています)
そう考えたときに今回のプロダクトの技術選定として自分は当初
最初にある程度の技術を用いてリリースした方がいいと考えていたのですが
知人にフィードバックをいただいたときに
「実際に利用してもらってフィードバックをいただいた方がユーザーに求められていることを知ることができるのではないか」
とアドバイスをいただきました。

目指していた軸が少しぶれていた、、、

自分が今回のプロダクトを通して本当にしていたいのは
自己満のためのプロダクト ← とにかくどれだけ時間がかかってもいいから難しい技術を採用して見せつけようとする
みたいな方に少しズレていたような気がして振り返ったときに自分が本当に作りたいもに対して考えてみると
実際にユーザーにプラットフォームとして提供していただいてリアルに少しでも喜んで欲しい
という自分の経験をもとにそもそも作り始めているものでもあるので改めて原点回帰できてとても良かったのと
定期的に周りの人にフィードバックしてもらって自分のアプリの軸と実際に作っているものが客観的にズレていないかどうかを確認することが必要だったと思います。
このことを初めの段階でフィードバックしてもらったからこそ気がつくことができた部分だと思います。

デザインが本当に苦手

これは少しずつ改善しようと思っているのですが
本当に自分がデザインする必要があるのか? ← ということがいつも頭の片隅にあり結局全然進捗しない
ということを最近特に思っていて
自分のプロダクトではtailwindCSSを用いてスタイリングをしているのですが
本当に基礎的な部分しかわからない部分があって
せっかく一つのライブラリでスタイリングを完結することができるのに
結局Sassを使って一部すたリングされています。
具体的に話させていただくとリッチエディタ部分は全てSassです。
理由としては二つあって

  1. 自分自身が全然CSSのことをよく知らない
    1. 元々Flexあたりから訳が分からなくなって逃げていました
  2. リアルタイムでWatchして適切なスタイリングに変換する必要がある
    1. Tailwindでもいいが分割できないということが裏目に出てしまってわかりづらいものになっている

といった理由があります。
そんなわけでTailwind ± Sassのような構成になっており、ベストプラクティスな構成なのかどうかが分からないのでアドバイスいただけたら幸いです🙇‍♂️
実際に一例としては

.rich-editor
	    &__header
	        background-color: rgb(204, 205, 207);
	        min-height: 5vh;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        justify-content: center;
	        font-size: calc(10px + 2vmin);
	        color: white;
	        margin-bottom: 5vh;
	        text-align: center;
	        border-bottom: 2px solid rgb(86, 86, 87);
	        margin-top: 5.2rem;
	    &__wrapper-class
	        padding: 1rem;
	        border: 1px solid #ccc;
	    &__editor-class
	        background-color: #f7f4f4;
	        padding: 1rem;
	        border: 1px solid #ccc;
	    &__toolbar-class


のようにコーディングしています。リッチエディタ全体のコーディングの部分です。
これから実際にはここにクラスを定義しなくてもファイル側に直接コーディングするのでも良かったような気はします。
それかJSXファイルとして分割する方法もあったかもしれません。。。。
いずれにしろ頭の中で考えてみるとたくさんの意見ができて、本当に自分の実装がこれで良かったのかと振り返ると自信がないです。
もし自分がフロントエンドエンジニアを目指すとして画面の部分のUXの部分をしっかりとこなすことはもちろんですが、ある程度デザインの知見や考え方がないと自分のためにもプロダクトとしてもいいものができないと改めて実感しました。

実はヘッダー部分はまだまだ問題だらけなんです

ログイン後のここの部分は現在はゴリ押しになっていて
理由としてモーダル時の表示が画像があると隠れてしまうようになっている。
といった仕様に現在はなっています。。。。


ふかぼるとまだまだ実装できていない場所などもありますが現在はこれにとどめておいて優先度高くこなしていこうと思います。

まとめ

まだまだこのプロダクトはベータ版もできていないようなものにはなっていますが作りたいものの軸がぶれないことが大切だと思っています。

また本日SNSなども作ったのでよければフォローしてください!!

  1. インスタグラム ← こちらから!
  2. ツイッター ← こちらから!
  3. Slack ← こちらから参加できます!
    1. Slackに関しては入って直接アイデアやフィードバックをいただいても構いません。。。
    2. お願いします✋


是非よろしくお願いします。