<h1 id="h3a3eee698e">複数のおかしい挙動や機能の連続</h1><h2 id="h4b2374c25c">フォードバックをいただいて気づくことができたこと</h2>少し自分の軸やどういうエンジニアを目指しているのかどうかをお話しさせてください。 自分が目指しているエンジニアは技術はもちろんなのですが、それよりもプロダクトに対して適切な技術を用いてアプローチして<ul><li>この機能を実装したらユーザーにとってどのような恩恵があるのか</li><li>今のニーズに応えるにはこんな機能が必要だからこの技術を用いて開発する<ul><li>実装のコストやパフォーマンスの部分も考えられたらよりいい</li></ul></li></ul>など今この記事を書いているときには他にももっとたくさんあるのですが 何が言いたいかというとユーザー目線で考えられてプロダクトとして愛されるようなものづくりをするエンジニアを目指しています。（自分ではそう思っています） そう考えたときに今回のプロダクトの技術選定として自分は当初 最初にある程度の技術を用いてリリースした方がいいと考えていたのですが 知人にフィードバックをいただいたときに 「実際に利用してもらってフィードバックをいただいた方がユーザーに求められていることを知ることができるのではないか」 とアドバイスをいただきました。<h3 id="h19e02269a3">目指していた軸が少しぶれていた、、、</h3>自分が今回のプロダクトを通して本当にしていたいのは 自己満のためのプロダクト　← とにかくどれだけ時間がかかってもいいから難しい技術を採用して見せつけようとする みたいな方に少しズレていたような気がして振り返ったときに自分が本当に作りたいもに対して考えてみると 実際にユーザーにプラットフォームとして提供していただいてリアルに少しでも喜んで欲しい という自分の経験をもとにそもそも作り始めているものでもあるので改めて原点回帰できてとても良かったのと 定期的に周りの人にフィードバックしてもらって自分のアプリの軸と実際に作っているものが客観的にズレていないかどうかを確認することが必要だったと思います。 このことを初めの段階でフィードバックしてもらったからこそ気がつくことができた部分だと思います。<h2 id="h729c1e6bf9">デザインが本当に苦手</h2>これは少しずつ改善しようと思っているのですが 本当に自分がデザインする必要があるのか？　← ということがいつも頭の片隅にあり結局全然進捗しない ということを最近特に思っていて 自分のプロダクトではtailwindCSSを用いてスタイリングをしているのですが 本当に基礎的な部分しかわからない部分があって せっかく一つのライブラリでスタイリングを完結することができるのに 結局Sassを使って一部すたリングされています。 具体的に話させていただくとリッチエディタ部分は全てSassです。 理由としては二つあって<ol><li>自分自身が全然CSSのことをよく知らない<ol><li>元々Flexあたりから訳が分からなくなって逃げていました</li></ol></li><li>リアルタイムでWatchして適切なスタイリングに変換する必要がある<ol><li>Tailwindでもいいが分割できないということが裏目に出てしまってわかりづらいものになっている</li></ol></li></ol>といった理由があります。 そんなわけでTailwind ± Sassのような構成になっており、ベストプラクティスな構成なのかどうかが分からないのでアドバイスいただけたら幸いです🙇‍♂️ 実際に一例としては<pre><code>.rich-editor
	 &amp;__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;
	 &amp;__wrapper-class
	 padding: 1rem;
	 border: 1px solid #ccc;
	 &amp;__editor-class
	 background-color: #f7f4f4;
	 padding: 1rem;
	 border: 1px solid #ccc;
	 &amp;__toolbar-class</code></pre> のようにコーディングしています。リッチエディタ全体のコーディングの部分です。 これから実際にはここにクラスを定義しなくてもファイル側に直接コーディングするのでも良かったような気はします。 それかJSXファイルとして分割する方法もあったかもしれません。。。。 いずれにしろ頭の中で考えてみるとたくさんの意見ができて、本当に自分の実装がこれで良かったのかと振り返ると自信がないです。 もし自分がフロントエンドエンジニアを目指すとして画面の部分のUXの部分をしっかりとこなすことはもちろんですが、ある程度デザインの知見や考え方がないと自分のためにもプロダクトとしてもいいものができないと改めて実感しました。<h3 id="hc2955fb743">実はヘッダー部分はまだまだ問題だらけなんです</h3>ログイン後のここの部分は現在はゴリ押しになっていて 理由としてモーダル時の表示が画像があると隠れてしまうようになっている。 といった仕様に現在はなっています。。。。 <img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/3753e750488641c9bac91ed6808e07c7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-14%201.57.32.png" alt=""> ふかぼるとまだまだ実装できていない場所などもありますが現在はこれにとどめておいて優先度高くこなしていこうと思います。<h2 id="ha214098e44">まとめ</h2>まだまだこのプロダクトはベータ版もできていないようなものにはなっていますが作りたいものの軸がぶれないことが大切だと思っています。 また本日SNSなども作ったのでよければフォローしてください！！ <ol><li>インスタグラム　← <a href="https://www.instagram.com/acvation">こちらから！</a></li><li>ツイッター　← <a href="https://twitter.com/acvation" target="_blank" rel="noopener noreferrer">こちらから！</a></li><li>Slack ← <a href="https://join.slack.com/t/acvation-dev/shared_invite/zt-13iz0dhwj-tOw8PXHo1EAd~EYKqOlW2g" target="_blank" rel="noopener noreferrer">こちらから参加できます！</a><ol><li>Slackに関しては入って直接アイデアやフィードバックをいただいても構いません。。。</li><li>お願いします✋</li></ol></li></ol> 是非よろしくお願いします。

先月までレスポンシブ対応をされていないからスマホだと操作することができない。
一部の部分がビルドしてデプロイしても途中で途切れるといったユーザーを待たせてしまう処理がある。
機能として使いずらい部分がとても多く、使っていたくはなくなる。
など、実際に周りの方に利用していただいてさまざまなフィードバックをいただきました。
今回はそれを含めて一度レスポンシブに対応できる前提でリプレイスしようと思って取り組んでいた
まとめになります📓

Acvationリプレイスしました。

Acvation replaced.

<h1 id="h9b047028ae">そもそも論</h1>最近コロナウイルスが絶賛流行っていて自粛生活の佐々木です🌳 最近少し忙しかったです。（言い訳でしかありません。） 自分自身、<a href="https://acvation.com/" target="_blank" rel="noopener noreferrer">acvation</a>というサイトを今年に入ってから本格的に開発をしています。 その中で自分がプロダクトとして最大限に提供したい価値として 誰でも簡単に投稿することができて、UI的にも優れていくれるものに変換してくれるといったものが必要不可欠だと考えます。 その部分を考えたときに自分なりの要件として<ol><li>簡単にカスタマイズすることができる。</li><li>前回と比べて格段に投稿しやすいプロダクトにする</li><li>プレビューをさらに実用的にそしてフォーカス時などのパフォーマンスも落とさないようにする</li></ol>という部分を特に意識指定開発していこうと思っていたのが背景です。 また、実際にこの要件を満たすコードを書いていたところ詰まる部分などがとてもたくさんあり、 自分自身最初はそれほど難しいものではないと思っていたのですが、いざ開発してみると ドキュメントのコードがうまく動かなかったりプレビューを導入するならではの難しさなどがあったので共有させていただきます。😀 <h2 id="h88d3ef1cbe">実際に取り組んでみて</h2>実際に考えから開発にするまでは一週間ほどかかりました。（元々の予定は３日間ぐらいで完成できると思っていました。） まず最初に「react リッチエディタ」のように調べてみたら とても有名なdraft.jsというライブラリを見つけて 実績としても申し分なくドキュメントを読んでみても使いやすそうだったので使ってみました。 → 世の中の誰かが作っていただいたライブラリなどを使用してみてよければプロダクトに落とし込むの本当に好きです笑 <h3 id="hdc064bf0f8">実際に作ってみたんだけど？</h3>まずは簡単にドキュメント通りに進めてみましたが早速問題が起こりました え、ツールバー自体は利用することができないの？？ というのもライブラリを入れてインポートすればデザイン周りも含め全てやってくれると思いましたが全然そんなことありませんでした笑 普段どれだけ頼っているのかがとても感じることができた瞬間でした。 そういうことなら自分で作ってみようと思ったところで実際にdraft.jsを中心としているものの 他のライブラリを多用してやってみた時にとてもしっくりくるものがあったのでそちらのスタイルシートを使って開発をしました。 <h3 id="hee9c32d58b">やってみた感想</h3>実際に実装完了して現在は運用していますが　← 是非使ってみてください🔥 個人的にかなり難しい部分がとてもありました。 当初はただ単に入力された文字をhtmlに変換して表示させるというだけしか思っていなかったのですが そのHTMLに変換するときに装飾された部分をどのようにプレビュー表示できるのかどうかという部分にかなり苦戦しました。 <h3 id="h37f44fe987">どんなことあったの？</h3>例えばなんですけど<pre><code>//typeになっていないのが原因である。
// const editorRef = useRef&lt;Editor&gt;(null)
// ref設定をしないと意図しない挙動をする
// ref={editorRef}</code></pre>refの部分をしっかりと設定しなかった時に今までの文字が突然コマ切れのように表示されるようになったり。 こんな感じでどう分割して表示するかを考えていました。<pre><code> const inlineStyle: DraftInlineStyle = editorState.getCurrentInlineStyle()
 console.log('class', inlineStyleHandler(inlineStyle))
 console.log('state', editorState)
 const splitHTML = (htmlTemplate: string) =&gt; {
 const split = htmlTemplate.split(/[]/)
 console.log(split)
 }</code></pre>さらにエディタの部分はしっかりとこだわりたかったので本当に利用する価値のある機能のみのミニマムな構成にしようと思いました。 そのためオプションの選択が難しくなってしまった。。。 また、実際にコンソールで見たときに自分なりのロジックなどや正規表現などを用いて分割することができたりしたのですが どのようにそのロジックを文字変換に変更しようという部分はかなり難しく コード的にも冗長な部分がとてもあるメソッドとなっており、メモ化できる部分もたくさんあるためまだまだ修正は必要そうです。。。<h1 id="h28b62bc2c0">今後の課題</h1>acvationの課題部分にも記述させていただきましたがまだまだ未完成な部分がとても多いと考えております。 その中で自分なりに特に注意したいものになっているのは<ol><li>デザイン部分が完全に自分の主観で作っているので本当にユーザーが使いたいと思うニーズを満たすことができているのか　←　やはりデザインのセンス😭</li><li>情報自体をステートで持っているのでもし途中で接続などが切れてしまったら再レンダリングされることになり入力していた情報が消えてしまう。</li><li>一つの処理の部分がそれぞれとてもウォッチしていて重いものになっているのでさらに高めることができるのではないのか</li></ol>などを特に考えております。 また、もっといいプロダクトよりのライブラリなども改めて調べてみるとありそうなので とりえずこの機能は実装完了として 時間の余裕があれば是非再度付け加えたいと思っています。📝 また、プロダクト自体さらにユーザーに寄り添って使いやすいものになるように精進してきます。 <pre><code>　これからは実際にどのようにコードを記述したかなども含めて共有することができればと考えているので楽しみにしてください！！　
また、少しずつわかりやすいように記述していけるように努めます。</code></pre>

自分のプロダクトに何が足らないか考えた時に今までのUI/UXを完全に無視したものをプロダクトとして作っていました。
draft.jsにカスタマイズを加えてリッチなエディタに仕上げています。
それもあって再現性がとても高いものではないエディタになってしまい、「誰でも簡単に記事を投稿することができるエディタ」を目指していたのに全く違うものになっていたのが現実です。
なので今回、自分なりに試行錯誤に結構の日数はかかってしまいましたが自作のエディタを作ってみました！！✏️
また、リアルタイムでパフォーマンスよく反映されるようにも調整して誰でも簡単に編集できるといったオリジナルです。
ぜひ、実際に触れてみて触ってほしいです！！こだわりいっぱいです。
今回はその備忘録です。

デザインもパフォーマンスもいいおしゃれなエディタを作りました。

We have created a stylish editor with good design and performance.

<h1 id="hc315754485">開幕</h1>早くも2月になってしまいました、、、、！ 一月は何か特別なことをやったかというとなんもしてないかったと振り返って虚しくなる今日この頃です。 （大学の期末課題出すのを忘れて確実に単位落としていることに気づきました🎒） しかも、お正月太りをしてしまいもうわけわかんないです笑 <h2 id="h071ecc4617">Acvation開発したい</h2>自分は元々、大学在学中に一つのプロダクトを作り上げることを目処にこのプロダクトを一人で実装しています！ が、最近すごくサボっていて自分が以前どのようなコードを書いたのか忘れているような状況でした。 ちなみに最後にDevブランチにプッシュしたの16日前という放置をしていました。息混んでいたのに情けない、、、、 というわけでこの機会に元々デザイン部分がひどかったということもあり、もう一度作り直したいと思ったのがきっかけです。 <h1 id="h49153b7347">ここから本題！デザインのお話👨</h1> まずみてもらいたいです。 元々のデザインを <img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9614929ebdb749f99eb8047ea70917d4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-01%203.38.55%EF%BC%882%EF%BC%89.png" alt=""> これが元々のページです。 これだけなら自分自身は、正直あまり悪くもない、かもなく不可もない状態だと思います。（デザインセンスないからこれが精一杯です。。。これでも相当頑張っていたと思います。） <h3 id="h6b59ec7197">しかし！！！！！！！！！！！！</h3>レスポンシブで見てみましょう <img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/49270d5c50cc49b9b75578df28e4d554/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-01%203.43.34%EF%BC%882%EF%BC%89.png" alt=""> What??? これはまぁなんでしょう〜〜 なんと画像部分が邪魔をしていてログインボタンさえも押せないのです！！！ これは大問題なのはわかっています。 原因の方もわかっています。 <h2 id="h8f3266c02e">Next.jsのImageタグ問題</h2>自分自身本当にNext.jsにお世話になっており、Imageコンポーネントも同様です。 簡単に自分が思いつくだけでも<ul><li>ブラウザによってはwebpに変換して出力してくれる</li><li>遅延読み込みは自動的に行ってくれる</li><li><code>objectFit="cover"</code>とかいう使いやすいのがしっかり標準装備</li><li>画像のクオリティまで指定できるとかいうおもてなしっぷり</li></ul>改めて本当に便利なものだと実感しています！！ しかし 全部画像周り自動でやってくれないかな〜とかいう魔法を信じている自分にとってはとても難しい設定となっており、 故に詰まることがとてもたくさんあると思っています。 さらに、自分の認識が正しければ pxしかできない　or　<code>layout="fill"</code>しか設定できないというダブルパンチ👊 こりゃ自分には厳しいな〜と改めて実感してました。。。 ざっとこんなことがあったのでしっかりと作り直そうかなと思いました！ （自分の基準ではログインボタンが押せればいいぐらいを想定していました笑） <h2 id="he1c7a63b51">いざ実装</h2>自分のこのプロダクトはtailwindCSS &amp; Sassで全て書いています。 正直自分自身今でも上手くは使いこなせていないのですが<ul><li>サンプルコードがかなりある</li><li>痒いところに手が伸ばしやすい</li><li>補完の部分で実際にどのような定義がされているのか確認できるのでImageコンポーネントのwidthとheight設定の時に役立つことが多い</li></ul>などあってこれからもしばらくはこれを使っていこうと思います。 しかし、動きを出そうとすると結構難しかったりするんですよねこれが、、 <h2 id="hf04a4ef95b">便利なライブラリ見つけた！？</h2>公式ドキュメント：　https://headlessui.dev/ こちらのサイトです！ どうもtailwindと関係深いらしくとても簡単に記述するだけではなく独自のクラス名などがなく利用できるのでとてもおおすすめです！ 特に一部の部分は参考にするだけでCSSなどの知識などもつけることができるので学べることがとても多いものになっています。 自分も実際にflex部分の知見が全くないのでこれを通して一部の部分はflex縛りで実装しました😀 <h2 id="h417ee6002e">結局のところ</h2>1月最後の夜の時間を使い実装していました。　← こんなんやってないで課題やっておけばと後悔しています笑 <img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e39df46d602f4867b611f62e07a7dc0e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-01%204.07.31.png" alt=""> こんな感じで綺麗め系のデザインになりました。 正直自分はこれを作るのでも相当苦労しました。 marginとpaddingしかわからない自分にとっていい経験になったと思います。 またレスポンシブについても <img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/af7247281d7f422796e67c7f65e60650/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-01%204.10.42.png" alt=""> こんな感じで作ることができるようになって、やっとログインボタンが改善されました笑 <h2 id="h28b62bc2c0">今後の課題</h2>一つとてもでかい問題があって レンダリングの速度がすこぶる悪くスコアがとても低いことです。 このプロジェクト自体はNext.jsで実装しているのですが パソコンの方は95点以上は安定して取れるようになっていますが モバイルの方が64点と意味わかんないくらい問題がたくさんあるので修正するようです。<blockquote>もし実装のヒントなどがあればぜひ教えてほしいです🙇‍♂️</blockquote>また、フロント側の知識自体もまだまだ上手くできていない部分しかなくて メモ化やキャッシュなども考えればパフォーマンス的にも良くなると思います。。。！ 引き続き修正します。 もし技術的な部分も記事などのリクエストなどがあれば書こうと思うので何卒よろしくお願い申し上げます。

自分自身Acvation.comという
肌悩みに悩む人を結びつけることができるようなプラットフォームを開発しています。
その中でもちろん一人で開発することになっているので
フロントとバックエンド側は実務経験の問題もあり割と順調に開発することができるのですが
今まで逃げてきたデザイン部分が苦手な人の1月最後のお話です😭

Souta Tech Blog.

Acvation開発日記 Vol.1

Acvationリプレイスしました。

デザインもパフォーマンスもいいおしゃれなエディタを作りました。

デザイン苦手すぎてプロダクトで詰まる件