入社半年の新卒エンジニアの頭の中でぐるぐるしてたことを書き出す

まえがき

今回の記事はなにか解決策やがあって記事にしたわけではなく、自分の頭の中を整理して、考えのログとして残すために書いてます。
もしかしたら、不快に思う人もいるかも知れませんし、オフラインでリアルのノートに書けばいいやん。って思う人もいるかも知れませんが、自分の考えていることを外に出すことで、フィードバックをいただけるかも知れないし、自分がどういうことを考えているのかを知ってもらうことでメリットがあると思ったので、オンラインのnoteに書くことにしました。

もし可能であればフィードバック貰えれば嬉しいですし、もらえなくても自分のためになると思っています。

前提・なぜこれを書いたのか

まず前提として、今日午前中にフロントエンドの設計の話をしました。
どんなことかと言うと、JSをイベント志向だけで設計して開発してしまうのは、結果として辛くなる。ということでした。
具体的にはイベントを元に大小様々な形でスコープを絞った関数を呼び出す形で開発していると、新しく関数やイベントを作るときにどれ位の粒度でスコープを絞ったらいいのか迷う（≒メンテナンス性が下がる。）という話で、ざっくりそんな事を考えてそれを同じプロジェクトを行うデザインユニットの方にどこかのタイミングで話させてくださいというジャブを打ってました。

時間は変わり、夜、所属部署での全体キックオフ飲み会と前日の部署の長の方とのランチがきっかけで、自分が過去、どんな動き方をしていたのか？と、今後どうするのがいいのか？考えていました。
今回書くことは、上記のフロントの設定と、自分の動きを紐付けて考えた話です。

考えたこと

結論から言うと、

自分は今までイベント駆動で能力開発（コーディングに親しいこと）をやっていて、
今後はイベント駆動の開発はもちろんのこと、それよりもその先の設計（クラス化やスコープの粒度統一化）も考慮して開発をしていかないともっとすごい人にはなれないなと感じた

多分上の結論から言われてもどういうことなのかわけわからないかなと思うので、自分の中でつながったロジック（それを説明しても人に伝わるかは怪しいですが）をつらつら書きます。

まず、「イベント駆動のJSの設計」と「イベント駆動で能力開発」って何がつながるの？というところから書きますと、JSのイベントって

document.querySelector(".button").addEventListener("click", () => {
    /* 粒度が固まっていないいろんな処理 */
    let valueDomLists = getDom(); // 何を基準にDOM取るのかわからん
    let rawData = getData();
    let data = rawdata.map(e => {
        e * 2
    })
    data = convert(data) // この辺とか、
    data.filter(e => {   // この辺、setDataの関数の中にまとめたほうが良くね？getData()に比べて粒度細かすぎじゃね？みたいな
        e > 10
    })
    setData(data) 
}

みたいな感じで書くと思うんですが（酔っ払ってるのでなんかコードミスってたらごめんなさい。）、この書き方でなんのルールも置かなかったらボタンが増えるたびにイベントが増えて、上記でイベントを設定している .button と新しく増えた似たようなことをする（例えばデータを送信するボタンが複数あって、送信ボタンその2みたいな）ものの .button-A が増えても、そこって近くでイベントリスナー追加をしていないと気づかなかったり、後で気づいて、ここ共通化出来たのかよ！的な感覚になると思うんです。

何が言いたいのかと言うと、コードで言うと、そこってはじめから似たような処理をクラス化（データ送信する処理をまとめたクラスを作る）してれば、よかったんじゃね？となりそうなのと、今までの自分の能力開発の仕方はそれに近くて、やることは同じ・もしくは類似なんだけど、別のものとして認識してた。&clickイベント以外にも、focusイベントや、tapイベントやtouch-endイベントなどなど、ひとつのものに対して、別のイベントもあったほうがいいんじゃないか？みたいなところを考えられるだけ考えて実装するみたいなやり方をやっていました。
=> それって良くないんじゃない？と気づいた次第です。

どこが良くないのかと言うと、一言に尽きて、
有限な時間を似たようなことでもう一度使っちゃうのはすげぇもったいない
というところです。

最初は能力の伸ばし方についていろいろ考えながら夜道を歩いていてそんな感じのことに紐付いて、気づいて、今後はどうしていこうかな？と考えたときに、今日午前中に話したコードの設計の仕方に習って、クラス化をしていけばより効率よく能力開発もできて良いんじゃないのか？という自分の中で繋がりました。

具体的にどういう事するかはまだ抽象度高くて実現までに落とし込めてはないのですが、何となく思うのは、上記のコードを、

document.querySelector(".button").addEventListener("click", () => {
    /* 粒度が近い関数たちでの処理 */
    let valueDomLists = getDom(".value");
    let rawData = getDataBy(valueDomLists);
    let data = rawdata.map(e => { // 思想にもよるがここは自分はデータの処理なのでここに置いとくのがいいと思うタイプ
        e * 2
    })
    setData(data)
}

みたいな感じで関数の粒度を近づけたり（近づいてるのか？）、いっその事

document.querySelector(".button").addEventListener("click", () => {
    /* クラス化しちゃうとか */
    let setter = new DataSetter(".value")
    setter.someProcess()
    
    setter.save()
}

クラス化しちゃえば、DataSetterは他のところで再利用できるし、抽象度高くみれるから、まとめれて再利用も出来て嬉しいし、考え方での方で言えばの再利用ができるし、一つ一つの状態に0から考え方をわざわざあてがわなくていいから、覚えもよくなって（要領がいいってこういうこと？）スピードも上がって嬉しいこといっぱいになりそうな感想。

まとめ

という見出しはつけましたが、そんなにまとめになる気はしませんｗ

結局やりたいことは

すごい人になりたい（現状近いゴール。もっと大きくてやりたいビジョンはwantedlyとか見てください）
→そのためには成長速度をあげたり、吸収できることが大きく関わりそう
→その方法として今回JSの設計と絡めて、クラス化して再利用できるようにすることで上がるかも？手法がある程度腹落ちした。
→今後はもっと精度上げるのと具体化して実行していきたいなー

です。夜中につらつら酔った勢いで書きましたが、多分恥ずかしさで明日の朝消したりはしないと思います。

なんかこれだけ書くのももったいないので、気になったのであれば、自分のTwitterとかFacebookとかWantedlyつながったり見てください🙇

おやすみなさい

リンク

タイトル未設定

古賀友輝

古賀 友輝 プロフィール - Wantedly