サイトアイコン PEOPLE Engineering Blog

営業3年・未経験からエンジニアへ！Java研修を経て知ったFlutterの魅力とこれからの発信

はりねずみ

はじめに

はじめまして、はりねずみです。

日々の学習の整理とアウトプットの習慣化を目的に、記事の投稿を始めることにしました！

最初の記事として今回は、未経験からエンジニアを目指したきっかけや自己紹介に加え、入社後のJava研修を経て現在業務で学んでいる「Flutter」の技術的な気づきについて凝縮してお届けしたいと思います。

1. 自己紹介とバックグラウンド

プロフィール

プログラミングとの出会いと転職のきっかけ

プログラミングと最初に出会ったのは大学時代でした。単位取得のために受けた授業でHTML/CSSに触れ、小さなホームページを作ったときの楽しさがずっと印象に残っていました。
卒業後は営業職として3年間勤めましたが、当時のワクワク感が頭の片隅に残り続けていました。

その後、ゲーム『マインクラフト』にハマり、MODなどを調べる中で「Java」という言語の存在を知り、プログラミングへの興味が再燃。

「挑戦するなら今がラストチャンスかもしれない」と一念発起し、エンジニアへの転職を決意しました。

2. 今後の発信テーマとマイルール

転職して痛感したのは、「インプットだけでは知識が定着しない」ということです。
上司からの「アウトプットの練習としてブログを書いてみたら？」というアドバイスをきっかけに、以下の目的を持って書いていくことにしました。

アウトプットの目的

  1. 学びの言語化：JavaやFlutterで学んだことを自分の言葉で整理し直す
  2. 自分用の備忘録：開発中にハマったエラーや解決策をいつでも振り返れるようにする
  3. 継続的な学習習慣：定期的に書き出すことで学びを日常化する

今後書いていく主なテーマ

記事を書く上でのマイルール

最初から完璧な記事を目指すと手が止まってしまうため、まずは「完成度50%でもアウトプットする」ことを意識して続けていきます。「何に困って、どう解決したか」というプロセスを分かりやすく残すことを大切にしていきます。

それでは記念すべき最初のアウトプットとして、私がFlutterに触れて感じた『戸惑いと感動』についてまとめていきます！

3. Java経験者が最初にぶつかった「Flutterのコードのごちゃごちゃ感」

転職後、まずは3ヶ月間のJava研修を受けました。Javaでバックエンドを学んだ身からすると、「UI（見た目）とロジック（処理）は明確に分ける」のが当たり前でした。

しかし、研修後に初めて触れたFlutter（Dart）のコードは、まさに衝撃的でした。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('ホーム画面')),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('ボタンを押した回数:', style: TextStyle(fontSize: 16)),
          Text('$_counter', style: TextStyle(fontSize: 32, color: Colors.blue)),
          ElevatedButton(
            onPressed: _incrementCounter, // ここに処理が入る
            child: Text('増やす'),
          ),
        ],
      ),
    ),
  );
}

Java風の文法でありながら、HTMLのような構造の中にCSS風のスタイル（TextStyle）が直書きされ、JavaScript風のイベント処理（onPressed）が混ざっているように見えたのです。

カッコのネスト), や ],がどんどん深くなり、「なんだこのごちゃごちゃしたコードは…？ 本当にこれが正解なのか？」と困惑したのを覚えています。

4. 違和感の正体：「Flutterの3大基礎概念」

しかし、Flutterの根底にある3つの基礎概念を知ったことで、このコード構造がパズルのように腑に落ちました。

① すべてがWidget

Flutter最大の思想は「画面上のあらゆるものがWidget（パーツ）でできている」という点です。
テキスト（Text）やボタン（ElevatedButton）だけでなく、「中央揃えにする（Center）」や「縦に並べる（Column）」、「余白（Padding）」といったレイアウト要素すらもすべてWidget（クラス）です。

「見た目も配置もすべてDartのクラスで組み立てる」と理解してからは、ネストの深さもレゴブロックを組み立てるような感覚に変わりました。

② 状態（State）の管理：StatelessとStateful

画面のパーツは大きく2種類に分けられています。

静的なものと動的なものを明確に切り分けることで、パフォーマンスが最適化されています。

③ 宣言的UI（Declarative UI）

Javaのような「命令的UI」では、処理の実行時に「テキストを書き換えて、色を変更して…」と画面に逐一命令を出します。
一方、Flutterが採用する「宣言的UI」では、「現在のデータ（状態）がこうなら、画面はこうなる」という完成図をあらかじめ宣言（記述）しておきます。データが変われば、フレームワークが勝手に画面を再描画してくれます。

コードの中に見た目と処理が混在して見えたのは、この「状態と見た目をセットで宣言する」という思想によるものだったのです。

5. 手のひらを返した「Flutterの圧倒的な便利さ」

概念を理解してコードのクセに慣れてくると、Flutterの強力なメリットが実感できるようになりました。

クロスプラットフォームの感動

Dartでコードを1つ書くだけで、iOSとAndroidの両方のアプリが作れてしまうのはやはり最大の感動です。OSごとにJava（Kotlin）とSwiftを書き分ける必要がないため、開発スピードが段違いです。

開発を爆速にする「エコシステム」

Flutterには、世界中の開発者が作った便利な拡張機能が豊富に用意されています。これらは大きく「パッケージ」と「プラグイン」の2つに分かれます。ここを理解すると、できることが一気に広がりました。

これらを使うことで、「QRコード読み取りアプリ」なども驚くほど簡単に実装できてしまいます。

おわりに

まだまだエンジニアとしては走り出したばかりで、至らない点や知識が浅い部分もあるかと思います。

もし内容に誤りや「もっとこうすると良いよ」といったアドバイスがありましたら、コメントなどで教えていただけると嬉しいです！

1つひとつの学びを大切に成長していきますので、これからよろしくお願いいたします！

モバイルバージョンを終了