ここ２年ほどモダン・フロントエンドを頑張っている話

2022年10月18日 01:53

ただあきさんが振り返りを書いていたので、自分ものっかる。

40の手習いでございますよ。わたくし。

自分の特性として、エンジニアの中では話すのが得意で、文章を書くのも得意だった。プログラミング一本で行くイメージはなく、現場監督のほうが向いているかなーと思ってFA宣言したのが７年前。そこから流れに流れて、今はFlutterを書いている。フロントエンドわかりたい。

モダン・フロントエンドの衝撃

Flutterがモダン・フロントエンドかという議論はあるかもですが、いわゆる「宣言型UI」のスタイルに触れて、強い衝撃を受けた。

受託で作った業務系のネイティブアプリがあったので、それをFlutterに焼き直したら、戻れなくなった。アプリ開発が初めて面白く感じた。自分が持ってる前提知識では、アプリはUIを作るのがとにかく面倒。FlutterでUIが全部コードになって再利用性が高まることを体験して、面白くなってきた。

wasabeefさんのテンプレートレポジトリを何度も読んで、UIのコードがシンプルになりSoCが明確に分けられているのを感じて「マジかよ〜、フロントエンド嫌いだったのに好きになりそう」と心が変わった。

フロントエンドと私

既存のアプリケーションのメンテを楽にしたかった

前職は雑貨製造業のひとりエンジニアで、社長が色んな話を持ってきてくれた。その結果、WPF・Android・iOSでアプリを作ることができた。独立後も自分が引き続きメンテしているが、IDEのバージョン上げてビルドを通すだけの日々が続いていた。まずいなぁと思いつつ。

Flutterに飛びついたのは、既存モバイルアプリのメンテを楽にするため。

Dartは自分にとって読みやすく、ワンソースで管理できる実感が湧いて、Flutter好きになった。手を入れるのが億劫ではなくなったのも大きかった。ToB向け、ToC向けのプロダクトもリリースできた。Flutter様々だ。

WPFは.NET Framework 4.8が長くサポートされているため、時間を稼げる。前職の社内システムを作る要件を満たすため、当時の自分にはWPFしか選択肢がなかった。月日が流れてWPFである必然性がなくなったので、Reactで焼き直すことにした。WPFを今後ガッツリやるモチベーションはなかった。

既存資産の引き継ぎの観点から、フロントエンドをどう管理するかを考える機会が多く、結果的にフロントエンドがメインになった。

Reactを見て何のことかわからなかった

import React, { useState } from 'react';
 
export const InputToDo = (props) => {
  
    const [text, setText] = useState('');
 
    const handleChange = e => setText(e.target.value);
    const handleEnter = e => {
     if (e.key === 'Enter') {
        if (!text.match(/\S/g) ) return;
        props.onAdd(text);
        setText('');
      }
    };
  
    return (
      <div className="panel-block">
        <input
          class="input"
          type="text"
          placeholder="Enter to add"
          value={text}
          onChange={handleChange}
          onKeyPress={handleEnter}
        />
      </div>
    );
  }
 
export default InputToDo;

この種のコードを初めてみた時、完全にこうなった。

全く自分が知らない世界線がそこにあって、興味を持った。なぜ人類はこのようなコードを書くのだろうか、と。Flutterの始祖(らしい)から、少しでも分かり合いたいという気持ちもあった。

FlutterもReactもゼロから覚えているが、学習コストは「React >>>>>> Flutter」という印象です。

というのも、Reactは初心者が参考にすべきコードに出会いにくいと感じた。TypeScriptの勘所・コンポーネントの設計・APIクライアントの実装・Hooksの活用・CSS管理…..まずはこれで戦えるぞというイメージが、なかなか見えなかった。TypeScriptのlintが吐くエラーも全部初見だから結構苦労した。

まずは戦えるイメージが湧いたのは、このエントリを写経した時です。

Flutterは公式のドキュメントも充実しており、提供されているウイジェットが豊富で、イベントハンドラ+setStateでまずは戦えた。本も買ったけど、ほとんど活用しなかった。まずは戦えたことで、Provider/Riverpod/Flutter Hooksを自分なりに咀嚼することができた。

クラウド・インテグレーションにテンションが上がらない

AWS、テンションが上がらない。もっとやりたいって気持ちに、自分はならなかった。SRE的なポジションは恐らく今現在最も需要が多いと思うけど、テンションが上がらないんじゃ、しょうがない。

Flutterトレーニングはやりたい

自分では積極的にやらなかったけど得意なことが、トレーニング業。Pythonの新人研修であったり、OJTで業務システムを作る講師業をやった。Flutterのトレーニング業はやってみたい。自分がテンション上がったように、他の誰かがFlutterやってみて楽しいと思えるなら素敵なことだ。

7月から自分の仕事を手伝ってくれる人が入ってくれて、Flutterをやってもらうために、サンプルレポジトリを作るようになり、ドキュメントも充実してきた。Notionに溜め込んでる。

これを体系だったものにすれば、最低2日はかかると思うけど、良いメニューが出来る。12月は無理だから2月かな… やっていき。トレーニングってどこに売り込んだから買ってくれるのかな？教えてえらい人。

来年いっぱい(2023年12月)までは、Flutter/Reactメインで、自社のビジネスをFlutter開発/トレーニングと自社プロダクトで、行けるところまで行くぞ！

この記事が気に入ったらサポートをしてみませんか？