<h1 id="h074d11aeda">改めてご挨拶</h1><p>お久しぶりです！<br>この記事から本文の部分でも英語で自分なりに考えて書いていきたいと考えております。<br>（今まではDeepL使って翻訳していたのは内緒です💭）<br></p><h2 id="h466aae930b">内容に関して</h2><p>現在どのような内容を記述していこうか検討しているのですが、<br>自分なりに考えているのは最近興味を持つことが多いトピックや自分の勉強の振り返り<br>乱暴に利用している参考書などから学ぶことができた知見などを記述していこうと考えております。<br><strong>なるべく参考書で学んだ言葉なども多発したり、勉強ノートに立ったりすると思うのでそこの部分はご容赦いただけると嬉しいです。</strong><br><br>⬇︎現在、Youtubeなどから仕入れた乏しい知識で購入した参考書たち<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/ad3bd6809bbd4f989c917d809a12d472/IMG_1517.webp" alt=""><br></p><h3 id="hd264b50d46">お願い</h3><p>自分自身ご存じだと思いますが、英語に対しての抵抗が強いのと今まであまり勉強してこなかったため<br><strong>勉強法そのものを知りません</strong>☔️<br>もしこれからの日記の中でこうした方がいいのではないかやこうしたらさらに効率的などがあれば教えてほしいです！！<br></p><h2 id="h8d78e14043">感想</h2><p>また、周りに英語学習をしている人がとても少ないこともありモチベーションていう部分もまだまだ低いのが現状です。<br>（実際に3月から勉強を始めようと思っていたのにもう今月が終了していました。日が過ぎるのって早いですよね笑）<br>今後ともどうぞよろしくお願いいたします！！！！</p>

<h1 id="hcdc8c1fbcc">Greetings again</h1><p>Long time no see!<br>I would like to write my own ideas in English in the text section from this article.<br>(Don't tell me you used to translate using DeepL.💭)<br></p><h2 id="hbe3caefaf8">Regarding contents</h2><p>I'm currently considering what kind of content to describe.<br>My own ideas are topics that I have recently become interested in and reflections on my own studies.<br>I am thinking of describing what I have learned from the reference books that I use wildly.<br><strong>I will try my best to use words I have learned from reference books, and I will stand in my study notes, so I hope you will forgive me for that.</strong><br><br>⬇︎Reference books currently purchased with the scant knowledge I have acquired from Youtube and other sources.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/ad3bd6809bbd4f989c917d809a12d472/IMG_1517.webp" alt=""><br></p><h3 id="hdfc3d01896">Request</h3><p>As you probably know yourself, I have a strong resistance to the English language and have not studied much in the past.<br><strong>I dont know how to study itself.☔️</strong><br>If you have any suggestions for future diaries that might be better or more efficient this way or that, I'd love to know!<br></p><h2 id="h176b4bb99f">Inpressions</h2><p>Also, there are very few people around me who are learning English, so my motivation is still low.<br>(In fact, I was planning to start studying in March, but this month has already ended. The days go by so fast, don't they?)<br>Thank you for your continued support!</p>

先日の記事でも投稿させていただきますが
自分自身この度英語の学習日記を始めていきたいと考えております。
主にTOEICを中心に一年間で800点取得します。
ぜひアドバイスや勉強法などがあればご連絡の程よろしくお願い申し上げます💨

英語学習の日記を始めます。

Start an English study diary.

<h1 id="hd264b50d46">お願い</h1><p>現在、記事の開発を中断しています。<br>自分自身新卒入社するにあたって必要な勉強があるため、エンジニアリングのアウトプットも<strong>中断</strong>しております。<br>しかし、勉強につかれたときはコードを書いたりトレンドをキャッチアップしていたりするのでもしかしたら再開もあるかもしれませんが頻度は落ちてしまいます😢<br>自分自身、アウトプットすることがとても好きなので今やならないけば行けない課題をなるべく早く片付けられるようにして一日でも早く再開できることができるように尽力します。<br>ぜひ応援していただけると幸いです💦<br>いつも記事を楽しみにしていただいている方及び参考にしていただいている方には大変恐縮ですがご容赦頂ければ嬉しいです。<br>何卒よろしくお願いします！<br>自分も頑張るので一日でも早く再開できるように楽しみにしていてください！！！</p>

現在、新卒で就職するにあたってエンジニアリング以外の部分で必要な勉強があるためそちらにコミットしている関係もありアウトプットを中断しております。


※Acvationの開発及びテックブログの開発を中断しています。

Development of Acvation.com and the Techblog has been suspended.

（この記事で誤った情報などがありましたら報告いただけると幸いです🙇‍♂️）
※ Dockerで簡単に環境構築することができるハンズオンになっています！！
最近自分自身フロントエンドの勉強を中心にしています。
しかし、いまだにreduxはおろか簡単なstateの部分しか理解することができていません。。。。
以前、サービスを作った際にバケツリレーになってしまったことがあって
もうあんな思いはしたくないと考えているので今回は最近注目しているFacebook（Meta）が開発している
「Recoil」という状態管理ライブラリを自分で学習しつつハンズオンを試してみようと思います。

Next.js × TypeScript × Recoil での状態管理を学ぶためのハンズオン

Hands-on to learn state management with Next.js x TypeScript x Recoil

<h1 id="h3a3eee698e">複数のおかしい挙動や機能の連続</h1><h2 id="h4b2374c25c">フォードバックをいただいて気づくことができたこと</h2><p>少し自分の軸やどういうエンジニアを目指しているのかどうかをお話しさせてください。<br>自分が目指しているエンジニアは技術はもちろんなのですが、それよりもプロダクトに対して適切な技術を用いてアプローチして</p><ul><li>この機能を実装したらユーザーにとってどのような恩恵があるのか</li><li>今のニーズに応えるにはこんな機能が必要だからこの技術を用いて開発する<ul><li>実装のコストやパフォーマンスの部分も考えられたらよりいい</li></ul></li></ul><p>など今この記事を書いているときには他にももっとたくさんあるのですが<br>何が言いたいかというと<strong>ユーザー目線で考えられてプロダクトとして愛されるようなものづくりをするエンジニア</strong>を目指しています。（自分ではそう思っています）<br>そう考えたときに今回のプロダクトの技術選定として自分は当初<br><strong>最初にある程度の技術を用いてリリースした方がいい</strong>と考えていたのですが<br>知人にフィードバックをいただいたときに<br><strong>「実際に利用してもらってフィードバックをいただいた方がユーザーに求められていることを知ることができるのではないか」</strong><br>とアドバイスをいただきました。</p><h3 id="h19e02269a3">目指していた軸が少しぶれていた、、、</h3><p>自分が今回のプロダクトを通して本当にしていたいのは<br><strong>自己満のためのプロダクト</strong>　← とにかくどれだけ時間がかかってもいいから難しい技術を採用して見せつけようとする<br>みたいな方に少しズレていたような気がして振り返ったときに自分が本当に作りたいもに対して考えてみると<br><u>実際にユーザーにプラットフォームとして提供していただいてリアルに少しでも喜んで欲しい</u><br>という自分の経験をもとにそもそも作り始めているものでもあるので改めて原点回帰できてとても良かったのと<br><strong>定期的に周りの人にフィードバックしてもらって自分のアプリの軸と実際に作っているものが客観的にズレていないかどうか</strong>を確認することが必要だったと思います。<br>このことを初めの段階でフィードバックしてもらったからこそ気がつくことができた部分だと思います。</p><h2 id="h729c1e6bf9">デザインが本当に苦手</h2><p>これは少しずつ改善しようと思っているのですが<br>本当に自分がデザインする必要があるのか？　← ということがいつも頭の片隅にあり結局全然進捗しない<br>ということを最近特に思っていて<br>自分のプロダクトではtailwindCSSを用いてスタイリングをしているのですが<br>本当に基礎的な部分しかわからない部分があって<br>せっかく一つのライブラリでスタイリングを完結することができるのに<br>結局<strong>Sass</strong>を使って一部すたリングされています。<br>具体的に話させていただくとリッチエディタ部分は全てSassです。<br>理由としては二つあって</p><ol><li>自分自身が全然CSSのことをよく知らない<ol><li>元々Flexあたりから訳が分からなくなって逃げていました</li></ol></li><li>リアルタイムでWatchして適切なスタイリングに変換する必要がある<ol><li>Tailwindでもいいが分割できないということが裏目に出てしまってわかりづらいものになっている</li></ol></li></ol><p>といった理由があります。<br>そんなわけでTailwind ± Sassのような構成になっており、ベストプラクティスな構成なのかどうかが分からないのでアドバイスいただけたら幸いです🙇‍♂️<br>実際に一例としては</p><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><p><br>のようにコーディングしています。リッチエディタ全体のコーディングの部分です。<br>これから実際にはここにクラスを定義しなくてもファイル側に直接コーディングするのでも良かったような気はします。<br>それか<strong>JSX</strong>ファイルとして分割する方法もあったかもしれません。。。。<br>いずれにしろ頭の中で考えてみるとたくさんの意見ができて、本当に自分の実装がこれで良かったのかと振り返ると自信がないです。<br>もし自分がフロントエンドエンジニアを目指すとして画面の部分のUXの部分をしっかりとこなすことはもちろんですが、ある程度デザインの知見や考え方がないと自分のためにもプロダクトとしてもいいものができないと改めて実感しました。</p><h3 id="hc2955fb743">実はヘッダー部分はまだまだ問題だらけなんです</h3><p>ログイン後のここの部分は現在はゴリ押しになっていて<br>理由として<strong>モーダル時の表示が画像があると隠れてしまうようになっている。</strong><br>といった仕様に現在はなっています。。。。<br><br><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=""><br>ふかぼるとまだまだ実装できていない場所などもありますが現在はこれにとどめておいて優先度高くこなしていこうと思います。</p><h2 id="ha214098e44">まとめ</h2><p>まだまだこのプロダクトはベータ版もできていないようなものにはなっていますが作りたいものの軸がぶれないことが大切だと思っています。<br><br>また本日SNSなども作ったのでよければフォローしてください！！<br></p><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><strong>Slack</strong>に関しては入って直接アイデアやフィードバックをいただいても構いません。。。</li><li>お願いします✋</li></ol></li></ol><p><br>是非よろしくお願いします。</p>

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

Acvationリプレイスしました。

Acvation replaced.

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

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

Souta Tech Blog.

ブログ記事一覧

英語学習の日記を始めます。

※Acvationの開発及びテックブログの開発を中断しています。

Next.js × TypeScript × Recoil での状態管理を学ぶためのハンズオン

Acvationリプレイスしました。

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