２０２５年２月１７日から学習を始めて、３月１３日に受験して、合格することができました。
この記事では、私自身、AWS・SAAの取得に向けて、どういった勉強を行ったかを記事にしてみたいと思います。これから、SAAを受験しようと考えている方の少しでも参考になれば幸いです(^^)

学習開始前の前提知識

プログラミング学習を始めて、半年以上経ったくらいの状態でAWSは触ったことすらない状態からスタートしました。当然、実務未経験の状態です。レンタルサーバーを借りて、ポートフォリオを閲覧できる状態のレベルからのスタートです。学習しようと思ったきっかけとしては、知らないワードが出てくるとすごく気になってしまう性格のため、AWSの勉強をしないと、この先、エンジニアになったときに会話の中で知らないワードが多く飛び交う可能性があると感じたため、学習しておこうと思ったのがきっかけです。

取得スコアは？

私の取得したスコアは、743でした。合格スコアが720なので、結構ギリギリですね(^_^;)
ただ、生徒たちにも伝えていますが、『どんな試験でも合格するためにはどうすればいいかを常に考え、戦略を練って試験に望むこと』が大切で、私の場合、インフラの学習がメインではないため、必ず１ヶ月以内の短期間で勉強して合格しようと決めていました。

最初に行ったことは？

当然ですが『情報収集』です。どのような教材を使用すれば効率良く勉強できるのかをネットなどで調べました。調べる際は、教材の難易度やレビューを参考にしながら行いましたが、Ping-tの評判は、ダントツで良かったため、まずはPing-tを使って学習することを決めました。

それと、どんな試験においても私が１番最初に確認することなのですが、どんな問題が出題され、どれくらいの制限時間で解かなければいけないのかの確認です。これを確認するために、書籍「AWS認定ソリューションアーキテクトアソシエイトテキスト＆問題集」を書店で購入して、最初に模擬問題を印刷し、問題のイメージと傾向、どんな知識が身につけば問題を解けるようになるのかを分析しました。

そこでは全く解けなくていいです（解こうなんて思っていません笑）。４択問題で出題されることや、４分野のカテゴリーがあること、また、何問正解すれば合格できるのか、１問にかけることができる時間はどれくらいかを計算したりします。

調べると、AWS資格試験にて、Non-native english speakersなら受験時間を追加で30分延長することができることが分かったりするので、時間に余裕はありそうであることや、試験の申し込みするタイミング（どのような申込み方法で、いつまでに申し込むべきかなど）なども、最初に確認しておくことをオススメします。オンラインで受験する場合は、意外と２・３日前でも申込みができるが、時間帯が限定されていたりする可能性は高くなるので、１週間以上前から、受験日は決め、申し込みをすることをオススメします。

使用した教材一覧

①Ping-t
②書籍「AWS認定ソリューションアーキテクトアソシエイトテキスト＆問題集」
③Youtube「AWS資格 対策講座」
④Udemy「【ベストセラー完全日本語化】AWS 認定ソリューションアーキテクト アソシエイト SAA-C03 対応 2023 最新版」

上記４つをメインに使用して勉強しました。
上記の中で圧倒的に使用したのは、やはりPing-tでしたね。３週間の期間、問題を解かなった日はありませんでした。入浴中や寝る直前なども問題を解いて解いて解きまくりましたね(^^)
最終的にはレベル１５になった状態で受験しています。さすがに、ここまで繰り返す必要はないと思います。

費用の目安

●Ping-t：無料
●書籍価格：2000円程度
●Udemy：セール時に購入すれば、1500円程度
●受験料：約16,500円（税込）
●総学習コストの目安：20000円程度

1日の学習時間配分

平日：１〜２時間、休日：５〜６時間くらいは毎日、勉強を続けました。仕事と両立しながら、勉強していましたが、仕事柄、勉強するのが習慣化していたので特に苦にはなりませんでした。ただ、勉強中、「飽きてきたら違う教材を使いながら、気分を変えて勉強する」ということは、意識していましたね。Ping-t解きまくって、疲れてきたらYoutubeで１周して、見てるだけだと眠くなるから、なぐり書き（読めない字レベル）しながら視聴したり、書いた内容を白紙にざっとOutPutして書き出してみたりと飽きない工夫を考えてやっていました。疲れてきたら、場所を変えて気分を変えたりもよくやっていますね。私の場合、朝のカフェ→図書館→自宅という流れが多かったです。ちなみに、仕事の休憩時間でも、Ping-tは解いていました(^^)

行った勉強手順

STEP1:Ping-tを解きまくれ！解説フォローはChatGPT！

まずは、Ping-tを片っ端から解きました。私は、Inputからではなく、OutPutから始める勉強をよくやります。分からなくても問題を解きます。解いてどういう知識を頭に入れればいいかを確認していく作業のイメージですね。１周目は、全く分からなくても、勘などを頼りに選択肢を選びます。「間違ってもいいので、これじゃないかな？？」と思って選択して間違えた経験の方が記憶に残るので、分からないなりにもこれかもしれないと思いながら解く経験も結構大切だと思います。

解説はしっかりと熟読して次に進めます。このとき、解説で分からないところは、ChatGPTに聞くようにしていきました。ChatGPTに問題と解説を張り付けて、「この問題に対して、専門用語をなるべく使わずに具体例を多く入れて解説してください。」とプロンプトを入力して、その解説で分からないところを深堀していけば、当然内容が頭に入っていきます。ほんと、いい時代になりましたね(^^)

当然、１周目を解き終えたあとは、2周・３周繰り返して、全部解答がスラスラ答えられるようになるまで、繰り返し問題を解きます。そんな感じで、ある程度どんどん進めていきます。

STEP２:ある程度、OutPutできたらInput！

私の場合、疲れた合間にInputとして、②書籍「AWS認定ソリューションアーキテクトアソシエイトテキスト＆問題集」を読んだり、③Youtube「AWS資格 対策講座」や、④Udemy「【ベストセラー完全日本語化】AWS 認定ソリューションアーキテクト アソシエイト SAA-C03 対応 2023 最新版」を視聴していました。

今なのであれば、Inputに使う順番は、

③Youtube「AWS資格 対策講座」
↓
②書籍「AWS認定ソリューションアーキテクトアソシエイトテキスト＆問題集」
↓
④Udemy「【ベストセラー完全日本語化】AWS 認定ソリューションアーキテクト アソシエイト SAA-C03 対応 2023 最新版」

という流れが良いかなと思っています。

Youtube「AWS資格 対策講座」の内容は、イラスト付きで、覚えるべきポイントがシンプルに頭に入ってくるので、ノートになぐり書きではありますが、要点のまとめとなりそうな部分はすべてまとめていきました。

AWSには、さまざまなサービスがありますが、それぞれのサービスを、一言で言えばこういうもの！
って言えるようになるのは非常に大切だと思います。以下のようなイメージですね(^^)

コンピューティング系

• EC2 → 「クラウド上の仮想パソコン」
• Lambda → 「必要な時だけ動くプログラム実行環境」

ストレージ系

• S3 → 「インターネット上の巨大な倉庫」
• EBS → 「EC2専用の外付けハードディスク（USBみたいなもの）」

データベース系

• RDS → 「お任せデータベース管理サービス」
• DynamoDB → 「超高速なNoSQLデータベース」

ネットワーク系

• CloudFront → 「世界中にデータを高速配信する仕組み」
• Route 53 → 「インターネットの住所録管理」

監視・管理系

• CloudWatch → 「システムの健康状態を見張る監視カメラ」
• IAM → 「誰が何をできるかを決める警備システム」

開発・デプロイ系

Elastic Beanstalk → 「アプリを投げ込むだけで動かしてくれる箱」


④Udemy「【ベストセラー完全日本語化】AWS 認定ソリューションアーキテクト アソシエイト SAA-C03 対応 2023 最新版」に関しては、ハンズオンは全然やっておりません。Ping-tを解いてもYoutubeを見ても書籍を読んでもイメージが抽象的な感じがする部分は重点的に視聴をするようにしました。

STEP３:Ping-tをすべて解き終えたら、模擬試験問題を時間を測って解く！

最後は模擬試験で占めるのがいいですよね(^^)
②書籍「AWS認定ソリューションアーキテクトアソシエイトテキスト＆問題集」でダウンロードできる模試を試験３日前くらいに解き、やり直しをして終了です。特に２回目解いたりはしていません。

まとめ

AWS初心者から約1ヶ月でSAAに合格することができました。振り返ってみると、「短期集中で効率よく合格する」という明確な目標設定と、「分からなくてもOutPutしまくる学習スタイル」が功を奏したと思います。

特に重要だったのは以下の3点です。

①戦略的な教材選択
情報収集に時間をかけて、自分に合った教材を厳選したこと。Ping-tをメインに据えて、他の教材で知識を補完する形が効果的でした。

②ChatGPTをフル活用
分からない解説をそのままにせず、ChatGPTで理解できるまで深掘りしたこと。

③飽きない工夫
同じ教材ばかりでなく、疲れたら違う教材に切り替える、場所を変える、なぐり書きでアウトプットするなど、モチベーション維持を意識しました。

これからSAAを受験される方へ
AWS未経験でも、正しい戦略と継続的な学習があれば必ず合格できます。特に短期集中を目指す方は、「完璧を求めすぎず、合格点を取る」という割り切りも大切です。

この記事が、これからSAAに挑戦される方の参考になれば嬉しいです。頑張ってください！(^^)

こんにちは(^^)
今回の記事では、プログラミング学習を始めて１年が経ち、プログラミングスクール「ウェブカツ」を無事卒業することができたので、今の心境などを記事にしたいと思います。

１年を経て思うこと

まず、プログラミングを学習したことによって、普段の仕事や生活における「思考」が変わりました。「これはAIに聞いたらすぐに解決するな」から、「こういったものが作れたら、楽になるな」という思考が常に頭の中に出てくるようになりました。いい意味で「楽をする」「効率化」するためには？を考える思考は、どこにいっても大切な思考法だと思うので、プログラミングを学習して良かったと思います。

コードを書くのは楽しいか？

楽しいか楽しくないか？と２択で聞かれると、現状は「楽しい」です(^^)
ただ、コードを書くこと自体に、楽しさはそれほど感じません。

「なぜそうなるのか？」や「どんな仕組みで動いているのか？」を理解することの方が好きです。
そして、実際に周囲の役に立つものを作って、喜んでもらうことに快感を覚えます。

実は、現職の会社で２つのアプリを作成して、運用させてもらいました。
（さすがにポートフォリオにはできないですがほんとはしたい、、、笑）

１つはシンプルに、塾生が与えられたパスワードでログインして、授業解説動画を閲覧できるウェブサイトを作成して運用しています。講師ごとのページがあり、自由に解説動画や解説PDFなどをアップロードをすることができる仕様で、講師側はGoogleアカウントでもログインできるようにしました。

もう１つは生徒との面談予約システムです。事前に講師が面談可能日時をチェックしておき、その枠に対して、生徒が面談をウェブ上で申し込むというシステムです。今までアナログで電話や直接電話での面談予約だったため、かなり効率化されて、特に事務のお姉さんたちに、非常に喜ばれました✨️
ただ、こういったものは導入して使ってもらえるまでの説明や、ITに関する考え方そのものに対して、いろいろな人がいるので、使うのに抵抗があるな〜と思っていそうな方に、事前に上手に歩み寄り、メリットなどを説明しながら、巻き込んでいくという作業の方が大変でした。
難しい言葉を使わずにITの良さを感じてもらう「営業」の練習にもなったかなと今となっては思っています(^^)

１年を振り返っての反省点

結構、考えたのですが特に思いつきませんでした笑。色々と遠回りもしたのかもしれませんが、遠回りって実は大切で、愚直に色々と行動し体験しないと深みは出ないと思っています（ポジティブすぎる？）

ただ、Xやブログ記事での発信はもっと数を多くするべきだなとは思いました。

どれだけ頑張ったとしても、発信して認知されなければ意味がないですよね。そのあたりは、反省点として捉え、今後、発信数やブログの記事投稿を増やしていこうと思っています。

プログラミングスクール「ウェブカツ」について

２０２５年５月２３日（金）に無事、卒業することができました✨️
レギュラー部員だったため、１年以上かかりましたが、１年〜２年修行期間で頑張ると決めていた私にとっては、非常にありがたかったです。ウェブカツのおかげで、業界のことを、右も左も分からなかった状態から、ウェブの根本の部分から始まり、フレームワークの使い方まで幅広く学習することができ、１年前の自分と今日の自分とでは別人のように成長できたこと、大変感謝しております。

ウェブカツで１番学ぶべきこと

ウェブカツの１番の強みだと間違いなく言えるのは、「ビジネス視点」の考え方だと思います。プログラミングのスキルも学習できますが、これに関しては、UdemyやYoutube、書籍でも学習可能です。

でも「営業部」や「起業部」で学習する内容は、本当にその通りだなと共感できるところであり、プログラミングができるだけのエンジニアになるのではなく、「稼げるエンジニア」とはどういったエンジニアなのかを具体的に教えてくれるスクールはここだけではないでしょうか？

私は経営側のポジションでもあるため、売上・数値、こういったものばかりをこの数年間、扱ってきたのですが、お金の話って、職員に話すと嫌がられたりします。私はそれが不思議とまでは言わないですが、「商売なので、お金の話をして何が悪い。綺麗事では何も守れない。」と思っていました。そんなときに、ウェブカツのかずきち顧問のメッセージを読んで、ウェブカツを受講し、卒業した今となっては、「心の中のモヤモヤ」が晴れた感じがしています。引き続き、周囲の役に立ち、売上に貢献し、尽力できる人財を目指して、精進していこうと思いました。

なので、これから、ウェブカツを受講しようと悩んでいる方が、もしこのブログ記事を読んでくださっているのであれば、伝えたいのは、ウェブカツは、「技術も当然学習できるスクールですが、どんな業種でも役に立つ考え方や、綺麗事だけではない本質が学べるスクールだよ」ということですね。

実際に、ウェブカツの後半に突入したくらいからは、ドキュメントを調べて、パパっと実装に取り組めるようになったり、エラーに対して何の抵抗もなくなったり、多分こんな感じで実装できるだろうな〜というイメージがすぐに沸き、AIとの会話のキャッチボールも、より具体的でスムーズにできるようになったと感じています。つい２日前ほどから、Next.jsを学習しながら、自己紹介HPを作っていますが、何の抵抗もなく、サクサク作りたいものに合わせて、調べ、実装していくという流れを身につけることができたと思います。ほんと、感謝です。

卒業試験について

卒業試験は、４月１１日に受験を開始して、１回目の納品が５月７日。レビュー後、２回目の納品が、５月１９日という流れで卒業することができたため、約１ヶ月ちょっとでの卒業となりました。

卒業試験のおかげで、始めてレビューというものを受けましたが、やっぱり誰かにレビューしてもらうことの大切さを実感しましたね。自分では気付けないことや、思いもしなかったことの指摘、また、改善策のアドバイスなどがいただけるということが、どれほど成長につながるかという体験をさせていただきました。
今後、つよつよのエンジニアの方と出会い、一緒に働き、レビューをいただきながら、どんどん成長していきたいなと感じることができましたし、卒業試験では、顧客のことを想像しながら、あったら嬉しいだろうな〜という機能の実装や、こっちのほうが使いやすい・一目で分かりやすいだろうな〜という観点で実装することができたので、この経験が非常に大きいなと感じております。

これから試験を受けることを考えておられる方にアドバイスをするとしたら、他の先輩方も書いてくださっていますが、実際に本番環境の「デプロイ」まで、きちんとEC2やレンタルサーバーなどで行っておくことが大切だと思います。私は、卒業試験前にAWSのSAAの資格を取得できたので、EC2へのデプロイなどはあまり抵抗なくスムーズにできました。GitHubAcitonsによって、CI/CDも構築できたので、開発を比較的スムーズに行うことができたと感じています。この経験がないまま、卒業試験に挑むともっと時間がかかったんだろうなと感じています。やっぱり環境構築が１番挫折しやすいと思うので、嫌いなこと、効率化できそうなことは、前始末が大切だと思います。

今後に向けて

技術面で言えば、React、Next.js，Laravel、AWSの深堀りをして学習していきたいです。
今、興味があるのは「りあクト」と呼ばれる書籍、Laravel12を本格的に触る、AWS Skill Builderを使って、実際にAWSをもっと色々と使ってみると言ったところですかね。購入したいUdemyもたくさんありますが、欲張り過ぎはよくないので、ちょっと我慢、、、笑。

ちょっと我慢しつつ、ここからはひとまず、転職活動、本格スタートですね🔥
人生で始めての転職活動、不安でいっぱいですが、死ぬまでに「新しいことに挑戦してみたい！」と自分で決めてから、ここまで、ほぼ毎日努力を積み重ねてきた自分を信じて頑張っていけたらと思っていますし、素敵なご縁、出会いがあればいいなとワクワクもしております。

現在は、自己紹介HPを作成中ですが、来週中には完成させて６月頭より、本格的に動いていこうと思っています🔥

住まいは、生まれてからずっと大阪ではありますが、関西だけで探すのではなく、家族ぐるみで関東へ進出することも考えております。

エンジニア転職を必ず成功させ、良い報告ができるように頑張りますね。

ここまで読んでいただき、ありがとうございました！！

この記事では、ポートフォリオ「Quizopia」のコードの一部を説明しています。

PokemonCryQuizController.php の一部紹介

 // 問題セットを生成するプライベートメソッド
    private function generateQuestionSet()
    {
        $questions = [];
        $usedPokemonIds = [];

        // 5問の問題を生成
        for ($i = 0; $i < 5; $i++) {
            do {
                $randomPokemonId = rand(1, 251);
            } while (in_array($randomPokemonId, $usedPokemonIds));

            $usedPokemonIds[] = $randomPokemonId;
            $options = $this->generateOptions($randomPokemonId);

            $questions[] = [
                'pokemonId' => $randomPokemonId,
                'options' => $options,
            ];
        }

        return $questions;
    }

    // 選択肢を生成するプライベートメソッド
    private function generateOptions($correctId)
    {
        $options = [$correctId];
        
        // 正解以外の3つの選択肢を生成
        while (count($options) < 4) {
            $randomId = rand(1, 251);
            if (!in_array($randomId, $options)) {
                $options[] = $randomId;
            }
        }
        
        // 選択肢をシャッフル
        shuffle($options);
        
        return $options;
    }

1. generateQuestionSet() 関数

• 5つのランダムなポケモン問題を生成
• 各問題について重複しないポケモンIDを選択（1-251の範囲）
• 各問題に4つの選択肢を設定

2. generateOptions($correctId) 関数

• 正解のポケモンID ($correctId) と、他3つのランダムなポケモンIDを選択肢として生成
• 選択肢をシャッフルして返す

コード実行途中のイメージ例

// generateQuestionSet内の処理
$randomPokemonId = 25; // 例: ピカチュウのIDが選ばれたとします
$usedPokemonIds = [25]; // 使用済みIDリストに追加

// generateOptions(25)の呼び出し
$options = [25]; // 最初に正解のIDを追加
// 3つのランダムなIDを追加（重複しないように）
$options = [25, 4, 129, 150]; // 例: フシギソウ、コイキング、ミュウツーが追加されたとする
// シャッフル後 
$options = [129, 25, 150, 4]; // シャッフル後はこのような順序になる可能性がある

// generateQuestionSetに戻り、問題を追加
$questions = [
    [
        'pokemonId' => 25, // ピカチュウのID
        'options' => [129, 25, 150, 4] // シャッフルされた選択肢
    ]
];

5回分のループが完了した後（最終状態）

$usedPokemonIds = [25, 149, 6, 151, 39]; // 選ばれた5匹のポケモンID

$questions = [
    [
        'pokemonId' => 25, // ピカチュウ
        'options' => [129, 25, 150, 4] // コイキング, ピカチュウ, ミュウツー, フシギソウ
    ],
    [
        'pokemonId' => 149, // カイリュー
        'options' => [149, 36, 78, 94] // カイリュー, ピクシー, ギャロップ, ゲンガー
    ],
    [
        'pokemonId' => 6, // リザードン
        'options' => [123, 6, 45, 249] // ストライク, リザードン, ラフレシア, ルギア
    ],
    [
        'pokemonId' => 151, // ミュウ
        'options' => [74, 151, 114, 130] // イシツブテ, ミュウ, モンジャラ, ギャラドス
    ],
    [
        'pokemonId' => 39, // プリン
        'options' => [39, 145, 88, 201] // プリン, サンダース, ベトベトン, アンノーン
    ]
];

3. playRandom 関数 – クイズを開始する処理

public function playRandom()
{
    // 新しい問題セットを生成
    $questions = $this->generateQuestionSet();
    Session::put('quiz_questions', $questions);
    Session::put('current_question_index', 0);
    Session::put('score', 0);

    // 現在の問題を取得
    $currentIndex = Session::get('current_question_index');
    $questions = Session::get('quiz_questions');
    $currentQuestion = $questions[$currentIndex];

    return Inertia::render('Play/RandomPokemonCry', [
        'pokemonId' => $currentQuestion['pokemonId'],
        'options' => $currentQuestion['options'],
        'questionCount' => $currentIndex + 1,
        'score' => Session::get('score'),
    ]);
}

この関数はクイズの開始時に実行され、ランダムな問題を生成してクイズの最初の画面を表示します。

具体的な処理の流れ

1. generateQuestionSet()を呼び出して5問のランダムな問題を作成
2. 問題セット、現在の問題インデックス（0）、スコア（0）をセッションに保存
3. 最初の問題（インデックス0）の情報を取得
4. Inertia.jsを使ってフロントエンド画面を表示するためのデータを渡す

以下は具体的なイメージです。

// 生成された$questions配列の例（セッションに保存される）
$questions = [
    [
        'pokemonId' => 25, // ピカチュウ
        'options' => [129, 25, 150, 4] // コイキング, ピカチュウ, ミュウツー, フシギソウ
    ],
    // ... 以下4問分の問題データ
];

// フロントエンドに渡されるデータのイメージ
[
    'pokemonId' => 25, // この音声が再生される
    'options' => [129, 25, 150, 4], // 選択肢として表示される
    'questionCount' => 1, // 「1/5問目」と表示
    'score' => 0 // 現在のスコア
]

4. nextQuestion 関数 – 次の問題へ進む処理

public function nextQuestion()
{
    $currentIndex = Session::get('current_question_index',0);
    $questions = Session::get('quiz_questions', []);
    $currentIndex++;

    if ($currentIndex >= 5) {
        // クイズ終了
        Session::forget(['quiz_questions', 'current_question_index']);
        return redirect()->route('play.random-pokemon-cry');
    }

    Session::put('current_question_index', $currentIndex);

    return Inertia::render('Play/RandomPokemonCry', [
            'pokemonId' => $currentQuestion['pokemonId'],
            'options' => $currentQuestion['options'],
            'questionCount' => $currentIndex + 1,
            'score' => Session::get('score', 0),
        ]);
}

ユーザーが「次へ」ボタンを押した時に実行され、次の問題に進めるか、クイズを終了するかを制御します。

具体的な処理の流れ：

1. 現在の問題インデックスを取得して1増やす
2. もし問題が5問すべて終わったら（インデックスが5以上）：
   • セッションから問題関連のデータを削除
   • クイズ開始画面にリダイレクト（新しいクイズがスタート）
3. まだ問題が残っている場合：
   • 新しいインデックスをセッションに保存
   • 同じ画面にリダイレクト（次の問題が表示される）

以下は具体的なイメージです。

/ セッションの状態変化
// 例：2問目が終わって3問目に進む場合
// 変更前
Session::get('current_question_index') = 1; // 2問目（0からカウント）
// 変更後
Session::put('current_question_index', 2); // 3問目に更新

// 例：最後の問題（5問目）が終わった場合
// 変更前
Session::get('current_question_index') = 4; // 5問目
// 変更後
// 新しいクイズを開始

5. updateScore 関数 – スコアを更新する処理

public function updateScore()
{
    $currentScore = Session::get('score', 0);
    Session::put('score', $currentScore + 1);
    return response()->json(['success' => true]);
}

ユーザーが正解を選んだときに呼び出され、スコアを1点増やします。

具体的な処理の流れ：

1. 現在のスコアをセッションから取得
2. スコアに1を加えて更新
3. 成功したことを示すJSONレスポンスを返す（Ajaxリクエスト用）

以下は具体的なイメージです。

// 例：現在のスコアが2点で正解した場合
// 変更前
Session::get('score') = 2;
// 変更後
Session::put('score', 3); // 3点に更新

// フロントエンドに返すレスポンス
{ "success": true }

6. resetQuiz 関数 – クイズをリセットする処理

public function resetQuiz()
{
    // セッションを完全にクリア
    Session::forget(['quiz_questions', 'current_question_index', 'score']);

    return redirect()->route('play.random-pokemon-cry');  
}

クイズを中断して最初からやり直したい場合などに、クイズデータをリセットします。

具体的な処理の流れ：

1. クイズ関連のセッションデータをすべて削除
2. 成功したことを示すJSONレスポンスを返す

以下は具体的なイメージです。

// セッションから以下のデータが削除される
- 'quiz_questions'（問題セット）
- 'current_question_index'（現在の問題インデックス）
- 'score'（現在のスコア）

// フロントエンドに返すレスポンス
{ "success": true }

フロントエンド部分の説明（RandomPokemonCry.tsx）

1. コンポーネント構造と状態管理

RandomPokemonCry = ({
    pokemonId,
    options,
    questionCount,
    score: initialScore,
}: {
    pokemonId: number;
    options: number[];
    questionCount: number;
    score: number;
}) => {
    // State管理
    const [pokemons] = useState<Pokemon[]>(pokemonData);
    const [currentQuiz, setCurrentQuiz] = useState<CurrentQuiz | null>(null);
    const [selectedAnswer, setSelectedAnswer] = useState<Pokemon | null>(null);
    const [showResult, setShowResult] = useState<boolean>(false);
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [isQuizFinished, setIsQuizFinished] = useState<boolean>(false);
    const [score, setScore] = useState<number>(initialScore);
    const TOTAL_QUESTIONS = 5;

このコンポーネントはサーバーから受け取った情報（pokemonId, options, questionCount, score）によって、ポケモンのなき声クイズを表示します。具体的には、以下の状態を管理しています。

• pokemons: 全ポケモンデータの配列（JSONファイルからインポート）
• currentQuiz: 現在の問題データ（選択肢と正解）
• selectedAnswer: ユーザーが選んだ回答
• showResult: 回答結果を表示するかどうか
• isLoading: 音声ロード中かどうか
• isQuizFinished: クイズが終了したかどうか
• score: 現在のスコア

2. 音声再生機能

// オーディオ参照
const audioRef = useRef<HTMLAudioElement | null>(null);

// 音声再生関数
const playSound = async () => {
    if (isLoading) return;

    try {
        setIsLoading(true);

        // 音声ファイルのパスを設定（M4A形式を使用）
        const paddedId = pokemonId.toString().padStart(3, "0");
        const audioPath = `/audio/pokemon_cries/${paddedId}.m4a`;

        // 既存のオーディオ要素をクリーンアップ
        if (audioRef.current) {
            audioRef.current.pause();
            audioRef.current.removeAttribute("src");
            audioRef.current.load();
        }

        // HTML5 Audio要素を使用
        if (!audioRef.current) {
            audioRef.current = new Audio();
        }
        
        // ...イベントリスナー設定、再生処理など
    } catch (error) {
        // エラーハンドリング
    }
};

この部分はポケモンの鳴き声を再生するための機能です。

• audioRef: HTML Audio要素への参照
• playSound関数: 選択されたポケモンIDに基づいて音声ファイルをロードして再生
• エラーハンドリング: 特にiOSデバイスでの再生問題に対応する詳細な処理

3. クイズゲームのロジック

// 回答チェック関数
const checkAnswer = async (pokemon: Pokemon) => {
    try {
        setSelectedAnswer(pokemon);
        setShowResult(true);

        if (pokemon.pokeapi_id === currentQuiz?.correct.pokeapi_id) {
            // 正解の場合、スコアを更新
            const response = await axios.post(route("play.update-score"));
            setScore(response.data.score || score + 1);
        }
    } catch (error) {
        console.error("回答処理エラー:", error);
        alert("エラーが発生しました。もう一度お試しください。");
    }
};

// クイズ生成関数
const generateQuiz = () => {
    if (isQuizFinished) return;

    // 問題数が上限に達した場合は結果画面を表示
    if (questionCount > TOTAL_QUESTIONS) {
        setIsQuizFinished(true);
        return;
    }

    const selectedPokemons = options
        .map((id) => pokemons.find((p) => p.pokeapi_id === id))
        .filter((p): p is Pokemon => p !== undefined);

    const correctAnswer = selectedPokemons.find(
        (p) => p.pokeapi_id === pokemonId
    );

    if (correctAnswer) {
        setCurrentQuiz({
            choices: selectedPokemons,
            correct: correctAnswer,
        });
        setSelectedAnswer(null);
        setShowResult(false);
    }
};

上記の関数がクイズゲームの中核ロジックを実装しています。

• checkAnswer: ユーザーが選んだ回答が正解かどうかをチェックし、正解ならplay.update-scoreエンドポイントを呼び出してスコアを更新
• generateQuiz: サーバーから受け取った選択肢IDを実際のポケモンオブジェクトに変換し、クイズ問題を構築

4. ゲーム進行管理

// 次の問題へ進む関数
const handleNextQuestion = () => {
    if (questionCount >= TOTAL_QUESTIONS) {
        setIsQuizFinished(true);
    } else {
        router.get(route("play.next-question"));
    }
};

// クイズをリセットする関数
const resetQuiz = () => {
    setIsLoading(true); // ボタンを無効化してユーザー操作を防ぐ
    router.get(route("play.reset-pokemon-cry"));
};

上記の関数は、ゲームの進行を管理します。

• handleNextQuestion: 現在の問題が最後なら結果画面に移動、そうでなければサーバーに次の問題をリクエスト
• resetQuiz: クイズをリセットしてサーバーから新しい問題セットを取得

5. 副作用とイニシャライズ

// 初回マウント時にクイズを生成
useEffect(() => {
    // 問題数が上限に達した場合は結果画面を表示
    if (questionCount > TOTAL_QUESTIONS) {
        setIsQuizFinished(true);
    } else {
        generateQuiz();
    }

    // モバイルデバイスの場合、オーディオ初期化のためのダミー要素を作成
    if (isMobile) {
        // オーディオ要素の初期化と各種イベントリスナーの設定
    }

    return () => {
        // クリーンアップ処理
    };
}, [pokemonId, options, questionCount]);

このuseEffect部分は、

• コンポーネントのマウント時にクイズを初期化
• 問題数が上限を超えている場合は結果画面を表示
• モバイルデバイス（特にiOS）向けの音声再生初期化処理
• コンポーネントのアンマウント時のクリーンアップ

6. UI部分

return (
    <PlayMainLayout>
        <div className="container mx-auto px-4 py-8">
            {/* 非表示のオーディオ要素 */}
            <audio
                ref={audioRef}
                style={{ display: "none" }}
                preload="none"
                playsInline
            />

            <Card className="w-full max-w-2xl mx-auto">
                <CardHeader>
                    <CardTitle className="text-center text-2xl">
                        ポケモン なきごえ クイズ
                    </CardTitle>
                    <div className="text-center text-lg">
                        {!isQuizFinished && (
                            <div>
                                もんだい {questionCount}/{TOTAL_QUESTIONS}
                            </div>
                        )}
                        <div>スコア: {score}</div>
                    </div>
                </CardHeader>

                <CardContent>
                    {!isQuizFinished ? (
                        <>
                            {/* なきごえを聞くボタン */}
                            <div className="flex justify-center mb-8">
                                <Button onClick={handlePlayButtonClick} /* ... */}>
                                    <Volume2 className="w-6 h-6" />
                                    {isLoading
                                        ? "よみこみちゅう..."
                                        : "なきごえを きく"}
                                </Button>
                            </div>

                            {/* 選択肢ボタン */}
                            <div className="grid grid-cols-2 gap-4">
                                {currentQuiz?.choices.map((pokemon) => (
                                    <Button
                                        key={pokemon.pokeapi_id}
                                        onClick={() => checkAnswer(pokemon)}
                                        disabled={showResult}
                                        variant={/* 条件付きスタイル */}
                                    >
                                        {pokemon.pokeapi_species_name_ja}
                                    </Button>
                                ))}
                            </div>

                            {/* 結果表示と次の問題ボタン */}
                            {showResult && (
                                <div className="mt-8 text-center">
                                    <p className="text-xl mb-4">
                                        {selectedAnswer?.pokeapi_id ===
                                        currentQuiz?.correct.pokeapi_id
                                            ? "せいかい！ 🎉"
                                            : `ざんねん... せいかいは「${currentQuiz?.correct.pokeapi_species_name_ja}」でした`}
                                    </p>
                                    <Button
                                        onClick={handleNextQuestion}
                                        className="text-lg"
                                    >
                                        {questionCount === TOTAL_QUESTIONS
                                            ? "けっかを みる"
                                            : "つぎの もんだい"}
                                    </Button>
                                </div>
                            )}
                        </>
                    ) : (
                        // クイズ終了時の結果表示
                        <div className="text-center">
                            <h2 className="text-2xl mb-4">
                                クイズ しゅうりょう！
                            </h2>
                            <p className="text-xl mb-4">
                                {TOTAL_QUESTIONS}もんちゅう {score}もん せいかい！
                            </p>
                            <Button onClick={resetQuiz} className="text-lg">
                                もういちど ちょうせん する
                            </Button>
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    </PlayMainLayout>
);

UIはクイズの状態に応じて異なる内容を表示しています。

クイズ進行中

• 問題番号とスコア表示
• 「なきごえを きく」ボタン
• 4つの選択肢ボタン
• 回答後の結果表示と次の問題へ進むボタン

クイズ終了時

• 結果概要（全5問中何問正解したか）
• 「もういちど ちょうせん する」ボタン

まとめ. フロントエンド・バックエンド連携フロー

1.初期表示時

• サーバー側のplayRandomメソッドが5問分の問題データを生成
• 最初の問題データをフロントエンドに送信
• フロントエンドのuseEffectでgenerateQuizを実行し、UIを構築

2.回答選択時

• checkAnswer関数が実行され、選択されたポケモンが正解かチェック
• 正解の場合、axios.post(route(“play.update-score”))でサーバーにスコアを更新させる
• 結果表示と「つぎのもんだいへ」ボタンを表示

3.次の問題へ進む時

• handleNextQuestion関数が実行され、router.get(route(“play.next-question”))で次の問題をリクエスト
• サーバー側のnextQuestionメソッドが問題インデックスを進め、次の問題データを返す
• 新しい問題データでページが再レンダリングされる

4.クイズ終了時

• 最終問題の結果表示後、結果画面に切り替わる
• 「もういちどちょうせんする」ボタンが表示される
• ボタンクリックでresetQuiz関数が実行され、router.get(route(“play.reset-pokemon-cry”))でクイズをリセット
• サーバー側で新しい問題セットが生成され、最初からクイズが始まる

このフロントエンドの実装はサーバーサイドのコントローラーと連携して、双方向の通信でクイズゲームの状態を管理しています。

今回の記事では、作成したポートフォリオについて、まとめていきたいと思います。

下記が、今回、ご紹介するポートフォリオ「Quizopia」のサイトURLです。

https://quizopia.oz006.com

quizopia.oz006.com

「Quizopia」作成の経緯

プログラミングスクール「ウェブカツ」では、たくさん手を動かし、自ら考え、アウトプットしていくスタイルのスクールのため、毎月のように、何かを作りながら学習を進めていました。このアプリを作る段階では、入部後９ヶ月が経過しており、Laravel部まで終了していた状態でした。JS上級部でReactも学習済みだったため、LaravelとReactの２つを組み合わせたアウトプットを作りたいと考えていたところ、小１の娘が最近、クイズにハマっており、普段から、「クイズ出して～、クイズ出して～」と頻繁に言うので、クイズアプリを作って喜ばせてあげようと思ったのがきっかけです。

TypeScriptもせっかくなので学習しておこう♫

せっかくなので、未学習のTypeScriptについても触っておこうと思い、TypeScriptの使用も決めました。使用した感想は、型定義は最初は手間を感じましたが、コードが増えるにつれて、コードが読みやすくなり、その恩恵を実感することができ、すぐに慣れて使用することができました。

作成手順①：Udemy教材の活用

まず、初めにUdemy教材
~【Laravel11】クイズアプリを作りながら自力でアプリ開発する力を身に着けよう【要件定義・設計～プログラミングまで~

を取り組み、アプリの骨組みを作成しました。この講座は、要件定義・設計の流れを丁寧に解説してくださっており、draw.ioの使い方やマインドマップの使い方、アプリでコードを書き始める前に、どのようなことを考え、準備しておくべきかの説明が具体的にされており、また説明も分かりやすく聞きやすいため、非常にお勧めの講座です。

【Laravel11&12対応】クイズアプリを作りながら自力でアプリ開発する力を身につけよう【要件定義・設計〜実装まで】

Laravel11 or Laravel12 を用いたクイズアプリ開発を通してプログラミングを学ぶだけではなく、要件定義から基本設計・詳細設計を行い、それを元にプログラミングをするという実践的なアプリケーション開発の流れを体験して、自分で作...

www.udemy.com

講義を進めるときに意識したポイント

Udemyの講義をそのまま模写して真似しているだけでは、頭をあまり使わないため、

バックエンドでは、Laravel11を使用して、
フロントエンドでは、Reactを使って、

講義を進めていきました。
その際、Inertia.jsを使用することになるため、Inertia.jsのドキュメントも読みつつ、開発を進めるにつれて、英語のドキュメントに対しての抵抗感も薄れていきました。

Udemy教材終了時の実装内容

こちらの講義を終了した時点で実装が完了したのが、以下の機能です。

• 管理者として登録・ログインすると、４択クイズの問題の作成者になれる
  →ただし、ログイン認証において、メール認証機能などはない状態（Laravelのデフォルト状態）
  
• クイズはカテゴリーを作成し、各カテゴリーに関するクイズを登録することで、クイズの解答者（未ログイン者でもOK）は、クイズを解くことができる
  
• UIには、TAILBLOCKSを使用
  

作成手順②：オリジナル機能を搭載する

娘と話し合い、どんな機能がほしいかを聞いたところ、１番最初に言われたのが、「ポケモンなき声クイズ」がほしい！とのことでした。聞いたときには、「PokeAPIうまく使えば、できそうだな」という感じでした。他にも、話を聞いて、一緒に情報を整理していくと以下の機能を追加実装することに決めました。

• プレイヤーログイン機能（プレイヤー名・パスワードのみ登録）
• プレイヤーレベルアップ機能（アバター・経験値・レベル表示）
• プレイヤークイズ復習機能（プレイヤーのみ可能）
• プレイヤーランキング機能
• ポケモンランダムなき声クイズ機能
• クイズ作成者の登録・ログイン方法にGoogle認証機能
• クイズ作成者の登録でのEmail認証機能

そして、UI部分は、TAILBLOCKSでは、ありきたりな見栄えになってしまうので、使用したことがないUIコンポーネントを使ってみようと思い、shadcn/uiを使うことを決めました。

shadcn/uiを使用しての感想

コンポーネントを完全にプロジェクトにインストールして使用することができるため、アレンジがしやすく、また、直感的で使いやすく、オシャレなUIがすぐに作成できるため、とても気に入っています。ドキュメントも分かりやすかったです。ただ、日本語訳されたドキュメントは情報が古かったため、うまくインストールされないこともあったりと、調べ方の良い経験にもなりました。

トップ画面

プレイヤーログイン機能

プレイヤーとして登録する場合は、娘が登録して使うため、プレイヤー名（重複は不可）とパスワードだけをDBに登録して簡易にログインできるようにしました。
よって、まずサイトを訪れた際のヘッダー部分は、以下のようになります。

プレイヤー登録ボタンを押すと以下の画面に移動します。

プレイヤーログインボタンを押すと以下の画面に移動します。

プレイヤーレベルアップ機能（アバター・経験値・レベル表示）

プレイヤーとして、ログインすると、ヘッダーが以下のように変わります。

以下のようにプレイヤー情報カードのようなものを作成しました。けいけんちは、クイズを１問解くと１追加されていき、１０ごとにレベルが上がっていく分かりやすいレベルアップ方式にしました。

アバターの画像の部分をクリックすると、以下のような画面が表示され、画像の変更が可能です。

プレイヤークイズ復習機能（プレイヤーのみ可能）

プレイヤーとしてログインしてクイズを解くメリットとして、間違えた問題を復習できる機能を追加しました。また、クイズを解く問題数も選択できる機能がプレイヤーにはあります。

以下がプレイヤーとしてのクイズを解く前の画面です。

これに対して、プレイヤーとしてログインせずにクイズを解く前の画面が以下になります。

クイズスタートボタンを押すと、、以下のような画面になり、チェックボックスで正解を選びます。

※問題文の右側のサウンドマークを押すと、問題文を読んでくれます。
※英語だと、ネイティブな発音で読んでくれます。

上の画像が正解したときの画面で、下の画像が不正解のときの画面です。

プレイヤーとしてログインした状態で、すべて問題を解き終わると、以下のような画面になります。
正解数だけでなく、正解率も表示してくれます。

これに対して、ログインせずに問題をすべて解き終わると、少しさびしい感じがします笑。

ちなみに、１０問正解して、レベルがあがったときは、下記のような画面が出現します。

そして、レベルが高いプレイヤーベスト３がランキング表に乗るようになっています。

クイズ作成者機能紹介

ヘッダーの右側に「クイズ作成者登録」・「クイズ作成者ログイン」ボタンがあります。

クイズ作成者登録画面

このサイトのテーマカラーは、黄色・紫としたので、こちらでは紫を上手に使ってみました。
Googleアカウントで登録ボタンを押せば、Googlleアカウントでの登録も可能です。

新規登録時には、メール認証が必要で、以下のようなメールが届きます。

上記の、このボタンをクリックを押すと登録が完了して、以下のクイズ作成者画面に移動します。

カテゴリー新規登録ボタンを押すと、クイズのカテゴリーを新規登録することが可能です。

登録したカテゴリーに対して、クイズを作成していきます。

カテゴリーの詳細ボタンを押すと以下の画面に移動します。

上記の画面でクイズの新規追加・編集・削除を行うことが可能です。
カテゴリー編集ボタンやクイズを追加ボタンを押すと、以下の画面に移動します。

ユーザーが使いやすいように、左上に戻るボタンと右下に登録ボタンを配置しました。
地味ですが、ユーザーの使いやすさに関しては、今後もこだわっていきたいと思います。

ポケモンなきごえクイズ機能紹介

その名の通り、ポケモンのなきごえクイズがランダムで生成され、なきごえを聞いて、４択から正解を選ぶクイズです。この機能が１番、苦労した部分です。

なきごえクイズで苦労した点

まず、初期の実装方法としては、PokeAPIからそのまま音声ファイルをAxiosを使って取得して、Laravelのコントローラーを使ってクイズを作成して、クイズと音声を流すという実装にしていました。
この実装方法でも問題なく、クイズは作成できた（上記の動画）のですが、問題点が２つありました。

①iPhoneやiPadなどのiOS環境では音声が出力されない
②本番環境でクイズをたくさん使用した場合、PokeAPIの制限がかかる可能性がある

特に、①のiOS端末で音声が流れない問題は解決するのに時間がかかり、大変な思いをしましたが、今となっては良い思い出です。

①iPhoneやiPadなどのiOS環境では音声が出力されないの解決方法

howler.jsを入れてみたり、色々と試しましたがうまくいかずで、解決に丸１日かかりました。
解決方法として、m4a形式のなきごえ音声ファイルをサーバーに用意して使用することで解決することができました。最初は、mp3形式のなきごえ音声ファイルを使っていたのですが、iOSとmp3は相性が悪いということを知ることができました。ちなみに、このときにスマホやタブレットでchrome://inspectを使えば、コンソールを見ることができることを覚えました。

②クイズをたくさん使用した場合、PokeAPIの制限がかかる可能性の解決方法

PokeAPIからなき声のmp3形式のなきごえ音声データをダウンロードし、
次に、Apowersoft( https://www.apowersoft.jp/free-online-video-converter )を使用して、m4a形式に変換を行い、こちらをサーバーに保存して使用する形の実装に切り替えました。さすがに、約１０００匹分のポケモンのなきごえはいらないと思ったので、赤緑と金銀世代のポケモンである２５１匹分のなきごえデータをダウンロードすることに決めました。

ダウンロードは手動ではなく、プログラミングによる自動処理で感動！

手動で２５１匹分のなきごえ音声ファイルをダウンロードするのは非常に手間がかかるため、プログラミングを用いて、ダウンロードを試みました。以下のコードを実行してみて、ダウンロードが自動で進んでいく様子を見たときは、プログラミングを学習していて良かったと嬉しく思いました(^^)

以下、使用した自動ダウンロード用のphpファイル

<?php

require __DIR__ . '/../vendor/autoload.php';

use GuzzleHttp\Client;
use GuzzleHttp\Exception\GuzzleException;

// 保存先ディレクトリの設定
$saveDir = __DIR__ . '/../public/audio/pokemon_cries/';

// ディレクトリが存在しない場合は作成
if (!file_exists($saveDir)) {
    mkdir($saveDir, 0755, true);
}

// HTTPクライアントの初期化
$client = new Client();

// ダウンロード済みのファイル数をカウント
$downloadedCount = 0;

// 進捗表示用の関数
function showProgress($current, $total) {
    $percent = floor(($current / $total) * 100);
    echo sprintf("\rダウンロード進捗: %d/%d (%d%%)", $current, $total, $percent);
}

echo "ポケモンの鳴き声のダウンロードを開始します...\n";

// ダウンロードする開始ID、終了IDを設定
$startId = 152;
$endId = 251;
$total = $endId - $startId + 1;

// $startIdから$endIdまでのポケモンの鳴き声をダウンロード
for ($id = $startId; $id <= $endId; $id++) {
    try {
        // PokeAPIからポケモンデータを取得
        $response = $client->get("https://pokeapi.co/api/v2/pokemon/{$id}");
        $pokemonData = json_decode($response->getBody(), true);
        
        // 鳴き声のURLを取得
        $cryUrl = $pokemonData['cries']['latest'];
        
        // ファイル名を設定（3桁の数字にパディング）
        $fileName = sprintf("%03d.mp3", $id);
        $savePath = $saveDir . $fileName;
        
        // 鳴き声データをダウンロード
        $client->get($cryUrl, ['sink' => $savePath]);
        
        $downloadedCount++;
        showProgress($downloadedCount, $total);
        
        // APIの制限を考慮して待機（1秒）
        sleep(1);
        
    } catch (GuzzleException $e) {
        echo "\nエラー（ポケモンID: {$id}）: " . $e->getMessage() . "\n";
        // エラー時は少し長めに待機（3秒）
        sleep(3);
    }
}

echo "\n\nダウンロードが完了しました！\n";
echo "保存先ディレクトリ: " . $saveDir . "\n"
echo "ダウンロードされたファイル数: " . $downloadedCount . "\n";
echo "\n注意: ファイルはMP3形式でダウンロードされています。M4A形式に変換する必要があります。\n";

家族の感想と今後に向けて

アプリが完成したので、娘と嫁にアプリを実際に使ってもらったのですが、娘は大喜び！！
夢中になって、ポケモンなきごえクイズをやってくれていました。嫁も同世代でポケモン好きなので、夜１人でなきごえクイズをやっているところを見たときに、微笑ましく思いました(^^)笑
ちなみに、最初に作ったときは、赤緑だけの１５１匹のクイズだったのですが、どうしても金銀まで入れてほしいという嫁のリクエストにより、２５１匹まで増えました笑。

自分が作ったアプリで、誰かが笑ったり、喜んだりする姿を見れるのは嬉しいです。

引き続きスキルを磨き、作りたいものが作れるエンジニア、人の役にたてるものが作れるエンジニアになれるように精進していこうと思います！

このブログを読んでくださった方も、Quizopiaをぜひ触ってみてもらえたら幸いです。

https://quizopia.oz006.com

quizopia.oz006.com

ここまで読んでいただき、ありがとうございました(^^)

補足：コード説明パート（時間があるときに更新）

自分の作ったコードを他人に説明できることは大切だと思うので、主要パートのコードの解説を、今後、別記事にしていきます。

Quizopiaコード説明~ポケモンなきごえクイズ編~

この記事では、ポートフォリオ「Quizopia」のコードの一部を説明しています。 PokemonCryQuizController.php の一部紹介 // 問題セットを生成するプライベートメソッド private function gen...

oz006.com

2025.04.07

今年も、もうすぐ終わりますね。５月１日からウェブカツを始めて、約８カ月間、学習したことになります。学習状況ですが、完全ではないですが、ほぼ毎日学習を継続することができました。学習当初と比べると、見えている景色が全然違っています。以下は、Githubの草の画像ですが、来年度は、しっかりとビッシリ生い茂っている草に成長させたいと思います。こうやって草で学習管理していると、Gitを早く知りたかったと今となっては思います。

学習状況としては、2024年12月３０日(月）時点で、フルスクラッチのポートフォリオ完成、Laravelでのアウトプットとしてのポートフォリオがとりあえず完成🔥Reactでアプリを３つほど作った段階で、次は、Vue.jsを予習として扱っていこうと思っているところです。

今後の目標・予定

１月
●Vue.jsとLaravelでの開発（React.jsともやってみたい）
●フルスクラッチ・Laravelのポートフォリオで工夫した点など、ブログにまとめる
●学習の中でよく使われてきた語句・用語などをブログにまとめる
●Reactで作ったアプリの精度をより高める

２月
●ウェブカツ（JS上級・Laravel部）を通して、自分が予習した内容に抜けなどないかチェック
→こちらは学習内容が多そうなので、しっかりと部活に打ち込み、とにかく手を動かすことを予定

３月
●ウェブカツ（ウェブマーケティング部）を学習。こちら非常に楽しみ♪
→余裕が出たら何をするかは、未定
→このあたりで、一度、進路相談を活用してみようかなとも検討中。

４月
●ウェブカツ（法務部・営業部・起業部）を学習。こちらも非常に楽しみ♪
→余裕が出たら何をするかは、未定

５月
状況次第で卒業試験申し込む

８月
転職活動開始予定

余裕があれば、行いたいこと

●オブジェクト指向部で作った成果物をパワーアップする
●DB設計指南書を１冊さらっと読む
●処理を高速化するための方法について学習する（書籍は購入しているが読めておらず、、）
●母がパッチワークの講師のため、作品を販売できるECサイトの作成
●AWSについての知識を深める
●TypeScriptの知識を深める
●Dockerの知識をもう少し深める（現状、LaravelSailは使える・Dockerの仕組みもOK）
●クリーンコードについて、ノートにまとめ、すぐに閲覧・引き出せるようにしておく
●業界における就職・転職活動の情報収集

ウェブカツを８ヶ月学習して思うこと

いつか書こうとは思っていたウェブカツについてのレビューを半年少しではありますが、書かせていただこうと思います。卒業したら、お礼も含めて、もう一度、記事にまとめたいです。

学習の方向性が明確である

ウェブカツの良いところは、学習する方向性をハッキリと示してくださっているところです。
「ウェブカツに通っていなければ、私はウェブ制作の道を目標に学習していたのかもしれない。」「バックエンドについて、学習することはなかったか、もしくは、触れるまでに相当な時間がかかっていたかもしれない」と思うことがよくあります。
何をどういった順番で学習するべきという方向性があったからこそ、準備や計画なども立てやすく学習することができています。

自走力が鍛えられる

私は、現職で予備校講師をしているのですが、実力を伸ばすのが速い子達というのは、自分の頭で考え、処理し、自己解決能力が高いという共通点を持っているということを肌感覚で知っています。
当然、必要な情報収集も自ら行い、軌道修正していくという側面も持っています。なので、プログラミングスクールを探す段階でも、手取り足取りマンツーマンで教えてもらえるところではなく、しっかりと自走力が鍛えられそうなスクールはないかな？と探している中で、見つけたのがウェブカツでした。
ウェブカツ入部後は、最初は当然、動画を見ながら丁寧に進めていましたが、最近では、ドキュメントやら、AIやらを使って、どんどん調べて進めて、ガンガンコードを読んで理解して、エラー出ても、エラーから学んで、理解していけばいいという耐性が染みついてきました。これは、ウェブカツのおかげだな〜と感じています。
最初の方から、どんどん自分でコードを書かせようとしてくださっていたり、どうなっていけば「稼げる人間」になれるのかのビジョンを明確にしてくれていて、それでいて、その考えにすごく共感が持てたおかげで、しっかりと学習に打ち込むことができました。

最初の鬼門と呼ばれる「ウェブサービス部」について思うこと

これについても、私はある意味、「誠実だな」と思ってしまう部分（思うようにしている部分？）があります。これまた、予備校講師・経営者の両方をやっていると、よく思うことがあります。
新規の生徒を多く獲得するのであれば、「体験授業」では、難しい内容ではなく「生徒が解けた！できるようになった！」と思ってもらう授業内容をした方がいいに決まっています。
普段の授業でも、簡単な問題を解かせ、達成感を持たせて、「数学、分かるから大丈夫！」という気持ちにさせていた方が、予備校としては退塾者も減り、生徒数は増えます。ただその代わり、「本物の学力」は、そんな安っぽい教育では身につくことは絶対にありません。

本当に良い講師というのは、自らも普段から勉強していること、入試問題を普段から解くことによって、どういうレベルに達すれば、生徒が目標を達成できるかを把握しており、その目標までたどり着く最短ルートや、課題などを明確に提示し、それを伝えて、納得してもらえる人間力がある講師だと私は思っています。「伝える」と「伝わる」は別次元のものであり、どれだけ正しいことを言っていても、伝われなければ全く意味がなく、この「伝わる」かどうかは、「誰が」言うかの部分がほぼ９０％以上を占めると体感していますし、本物の優しさというのは、「厳しさの中にある」と私はよく思います。

なので、「ウェブサービス部」という初心者からすれば難しい内容を、入部して１ヶ月後で取り組ませるというカリキュラムに関しては、私は、「誠実だな」と思ってしまいます（おかしいのかな？）。
だって、そこで辞められたら、当然、運営側は「儲からない」ですからね。

練習制限が絶妙な抑止剤

約８カ月間、プログラミングを学習して思うのは、まず１〜２ヶ月勉強した程度では、理解はできたとしても、身につくレベルには達することはできないなと感じています。こういったことって、やっぱり、体感しないと分からないことですよね。もし、練習制限がなかったら、気持ちの焦りだけが先走り、危ない行動・非効率な行動に出ていた可能性もあっただろうと感じています。

最近よくプログラミング学習をしていてイメージするのが、ワンピースの麦わらの一味の２年間の修行期間です。麦わらの一味は、じっくりと２年間、修行期間をおいたからこそ、確実な力をつけ、現在の場面でそれぞれのキャラが活躍できているわけですよね。自分の能力をしっかりと磨く期間は大切な期間だと思いますし、今は私の中で、「その期間！」と日々、思いながら、学習を継続しています。

ウェブマーケティング部・法務部・営業部・起業部が楽しみ過ぎる

まだ練習制限がかかっており、未学習の状態でこういったことを書くのは失礼なのかもしれませんが、これまでのウェブカツのメッセージ性などを見て感じていると、私の中では、これらの部活が楽しみでなりません。でも、それくらいウェブカツのメッセージ性には共感できるものがありますし、今後が、「楽しみだな」と思える学習環境というのがいいですよね(^^)引き続き、よろしくお願い致します。

今年の感想と来年の抱負

はい！というわけで色々と綴ってきましたが、おそらく今年最後のブログ記事だと思うので、最後に１年の感想と来年の抱負について書いておこうと思います。

今年の私の中での漢字は「終」

１年を振り返ったときに、真っ先に出てきたのが、いろいろな物が今年は壊れて失い、役目を「終」えた１年だったなと。今日も壊れた暖房を家族で買いに行っておりました笑。

●エアコン・暖房
●車
●修理された車が２日後にコインパーキングでサイドミラーを壊される
●テレビ（急にボンッと言って、煙がでる）
●歯（唐揚げで奥歯が欠けました、、、笑いましたが笑）
●５３年継続されていた行きつけのカフェ
（本日が営業最終日でした。朝に行きましたが寂しすぎる、、）
などなど

こう書くと、結構、悲壮感ありそうな１年に見えますが、普通に充実した１年ではありました。ただ、失ったり、終わったりすることで感じられることの多さを実感させていただき、普段当たり前にあるものの大切さ、時間の大切さ、健康の大切さをより感じる１年だったと思います。

来年の私の中での漢字は「始」にしたい

よって、２０２５年は、「始」にふさわしい１年にしたいと思っています。今までの出会いや、新しい出会いを大切にしながら、積極的に挑戦し、新しいキャリアを進み始めることができるように、日々、努力を継続していく１年にできたらと思っております。
今、ハッと時計を見たら、ブログを書いている間に、１２月３１日（火）を迎えてしまいました。

今日で大掃除などもだいぶ落ち着いたので、３１日（火）も家族に隠れて、バリバリ勉強しようと思います笑。ここまで読んでいただき、ありがとうございました。

皆様、良い年末をお過ごしくださいませ。よいお年を(^^)

どうもはじめまして。オザキカズヒロ（OZ）と申します。
私は、現在、３０代後半でエンジニアを目指して学習中です。

３０代後半での転職は不安と思われる方、転職したいが勇気が出ない方は、
たくさんいらっしゃると思いますが、
この記事がそういった方々の勇気づけに少しでもなれば幸いです。

３０代後半でなぜ転職を考えた？

３０代後半って人生の中で、いろいろ考える時期なんです。
私の場合は、「人はいつか死ぬ」ということを最近、強く意識しています（してしまいます）。

「今のままの人生で本当にいいのだろうか？」

いつか死ぬのであれば、限られた人生をできるだけ素敵なモノにしたいと思ったことが始まりでした。

生まれも育ちも大阪で、国公立の教育大学卒業後、

塾講師・予備校講師として１５年間ほど

ありがたいことに部門の運営方針を決める役職もいただいており、現在も働いております。
年収は、平均年収＋２００〜３００万ほどはあり、家族と共に不自由のない生活を送ることができています。

小学２年生〜高校３年生、あるいは、卒業した大学生講師とも、たくさんコミュニケーションを取っているので、関西圏内の教育業界にはそこそこの自信はあります。
教育に関するご相談などがありましたら、お問い合わせフォームよりご質問ください。
（可能なかぎり、お答えさせていただきます）

私が現在の会社に入社するときには、夢がありました。

当時の私の夢は、

「他人にとっての恩師となり、卒業して大人になった生徒たちが、
自分に会いに来てくれることや、そんな生徒たちと一緒に働くこと」

でした。

幸いなことに、この夢は実現しました。
当然、嬉しかったのですが、管理職歴も長くなり、仕事で結果を出すことに執着する精神状態で、
常に仕事のことを考えており、大量のビジネス本を読んだり、好きで休日出勤をしたり、
午前１１時頃に出社して、夜の２時頃まで働くという生活を数年間は送っていたため、
心から喜ぶであったり、そういった嬉しい瞬間を、１つ１つゆっくりと感じる時間を過ごしたことは、ほとんどありません。

このように書くとネガティブな感じで伝わるかもしれませんが、
うちの会社は、決してブラック企業ではありません。
社員のことをすごく大切にしてくれ、ノルマなどにも厳しすぎず、
この業界では相当珍しい部類に入ると思います。
私は好きで働いていましたし、若い頃は、誰かに認められたいという気持ちは当然ありました。
ありがたいことに、毎年結果が出ていたため（当然、大量の失敗も経てですが）、昇級していくうちに本当にたくさんのことを体感し、学ぶことができたと感謝しております。

そんな私にとって、転職の１番のきっかけになったのが、AIやWEBアプリの存在だと思います。
教育業界であれば、AIを使用した英単語暗記アプリであったり、業務効率化ができるアプリが存在し、私は実際にそういったアプリの導入を検討できる役職だったため、営業に来てくださった方の話を聞き、試験的に運用させていただいき、複数のアプリを会社に導入しました。

特に印象が強かったのは、AIで記憶の定着を可視化でき、管理できるアプリでしたね。
CSVファイルで４択問題を入力して、インポートすれば、AIが自動で問題の聞き方を変えてくれたり、解答者の間違いによって、問題の出し方を易しくしてくれたり、このアプリ１つで、講師と生徒ともにハッピーになれると、感動したことを今でも覚えています。

こういったツールを触るうちに、自然とプログラミングを勉強してみたいなという気持ちになり、
調べて実際に触ってみたのが、Progate（プロゲート）でした。

最初は、「触ってみるだけで、仕組みさえ、ある程度知ることができたらいい」

くらいの気持ちで考えていたのですが、
HTML・CSS編が終わる頃には、夢中になってPCと向き合っていました。
今となっては、かわいい失敗と思いますが、当時はProgate（プロゲート）で書いたコードをすべて、A3サイズのノートに書き写し、解説スライドをきれいにまとめ、自分なりのコメントを書き込んだり、覚えているかどうかを白紙にアウトプットしたり、学んだ内容を１問１答形式で問題を自作し、夜中に確認していたり、それほど夢中になって勉強していたことを覚えています。

そこで当時、人生で初めて転職について調べてみたのですが、そこで調べた結果のほとんどが、

「３０代でエンジニアはオワコン」
「３０代でエンジニアは転職すべきではない」という情報ばかりでした。

本当にそうなのか？と疑問に思い、
某プログラミングスクールでWEB面談もさせていただいたのですが、
そこでも、「絶対に辞めた方がいいですよ」と言われ、
当時は「そりゃそうだよな、、。そんな甘い世界じゃないよな、、。」と思ったことを覚えています。

これが５年ほど前のことなのですが、ちょうど悩んでいたこのタイミングに、翌年より、高校生を指導する部門で運営側に回ることが決まり、長年、小中学生を担当する部門だったため、新しく、高校数学と化学の猛勉強をやり直すという日々が始まりました。

【朝一に図書館に行き、出社まで勉強→出社→帰ってきて勉強→休みの日も勉強】

というひたすら勉強と教材を作成するという日々を繰り返した結果、
新規開校してから３年で、２００名を超える高校生が通う校舎にまで発展し、部門全体でも大きな成長を遂げました。

そして、「結果が出たな」と実感ができた今年の２０２４年、
自分の中で「教育業界をやり切った」「この業界で味わえる感動をほとんど味わうことができた」と感じ、引退を決意しました。不思議と決意に時間はあまりかからなかったです。

転職することを決めてからの行動

転職することを決めてからは、今後どのように勉強していくかを考えました。
まず決めたのが１年〜２年かけてしっかりと勉強しながら、転職活動をすること。

今の仕事をしながら、プログラミング学習を続け、しっかりとスキルを身に着けつつ、軌道修正をしていくことを決めました。仕事をしながらという選択をしたのは、当然、リスク管理や、学習教材などにコストをかけられるようにするためです。

ただ、仕事をしながらとなると、１日のプログラミング学習時間は、平日３時間〜４時間、休日は６時間〜７時間程度になることが予想できたので、効率よく学習するためのスクールを検討することに決めました。

現在、日本では１０００以上存在するプログラミングスクールですが、
１週間ほどかけて、ネットの情報や口コミなどを調べた結果、もうこのスクールに決めようかな？と考えていた直前に、ウェブカツと出会い、ウェブカツに入部することを決めました。

ウェブカツについては、また別の記事を書こうと思いますが、
決め手となったのは、顧問である「かずきち」さんのメッセージ性に心を打たれたのが１番大きかったです。

１０年以上、仕事に没頭してきた私からすると、かずきちさんがブログなどで書かれている内容は、すべて「腑に落ちる」という表現が適切で、「分かる！」「その通りです！」と共感できることだらけでした。

世の中はとても単純。
トライアンドエラーする奴が必ず勝つ。
トライをしない奴はエラーもしない。

引用：https://qiita.com/kazukichi/items/7379b75fba2f90d3cf45

上記は、かずきちさんの記事の最後の部分ですが、この記事は、仕事に真摯に向き合って来た人にとっては、かなり刺さる内容なのではないでしょうか？
記事を最後まで読み終えたときに、このスクールで「稼げる力」をつけたいと決意し、１年かけて卒業することを心に決め、２０２４年５月１日に入部をしました。

入部してからは、朝に大体２〜３時間、夜仕事から帰ってきて１〜２時間程度学習を継続している状態です。「仕事との両立は大変かな？」と不安に思っていましたが、新しいことを毎日知ることができる喜びや、できることが少しずつ増えていくという実感は、充実した時間を過ごしていると感じることができるため、プログラミングを学ぶかどうか悩んでいる方は、実際にトライしてみて、楽しいと感じることができるかで継続するかどうかを検討すればいいと思います。

ただ、「仕事にする」となると「楽しい」というだけではダメだと思っていて、私は現職において、教えることが楽しいと最初の頃は思っていましたが、今は全くと言ってもいいくらい、そんな感情はありません（子どもはかわいいですけどね）。管理職として「周囲の力を結集し、結果を出す者」という認識で、長い間働いていくうちに、「生徒・保護者の幸せ・職員の幸せ・自分や家族の幸せ」を叶えるためには、「自分を磨き、良い商材を作り、世のニーズを汲み取った形で提供すること」が必要だと身体で覚えるようになりました。当然、結果を出せる良い商材を作れるようになるまでには、大量のエラーを繰り返し、地道に修正を加えていくという作業を何度も何度も繰り返す必要があるため、どんな業界で働くとしても、こういった泥臭い作業をこなせる精神は大切だと思っています。

ウェブカツに入部してからは、ウェブカツの部活内容をベースに進めつつ、学習を終えたら、Youtube、Udemy，書籍などを活用して勉強しています。

現在は、学習を始めてから５ヶ月が経過しており、WordPress部の学習中のため、WordPressを使ったブログを作ってみようと思い立ち、このブログの開設に至っています。

ブログの運用目的

今後、このブログでは、少しずつではありますが、プログラミングやITに関する情報をできるだけ読み手の方を意識しながら発信していけたらと考えています。目標は１週間に１記事書くという形で行動できたらと思います。現在の仕事柄、iPadを使って、解説動画を大量に作成しているため、簡易ではありますが、超シンプルな解説動画を作りながら、学んでいきたいと思い、ブログタイトルを「教える✕プログラミング」と決めました。

「SNSで自分のことを発信する」とは無縁な人生を送っていましたが、Xで１日約１〜２投稿も始めています。ありがたいことに、このXの投稿に対して、毎回のように「いいね」をしてくださる方もいて、自分が「いいね」される立場になって、久しぶりに「見守ってくれる人がいる」という実感を持つことができ、大変励みになっています。ありがとうございます。

また、現在、作成しているアプリなどを、こちらのブログで紹介し、ポートフォリオの役割を果たせたらと考えています。長年、何かを売るという営業的な側面も経験してきたため、「どれだけ努力をしても売れなければ意味がない」と思っているため、当然、どれだけプログラミングができるようになっても、伝わらなければ意味がないので、コツコツの発信を通して、少しずつ信頼を積み重ねて、将来のお仕事につながればいいと考えています。

始めてのフルスクラッチアプリ制作

ウェブカツに入部して、１ヶ月後に作成したアウトプット作品を今回、公開します。

以下がアウトプット作品のリンクです。
↓↓↓↓
https://ozakijyuku.oz006.com

架空の個人塾のホームページを想定しながら、

• ログイン機能
• 新規ユーザー登録画面
• お気に入り登録機能
• 画像アップロード機能

などを実装しています。

ログインすれば、高１数学内容である【数と式】【図形と計量】の解説動画をYoutubeが視聴でき、質問を投稿したり、学習時間を記録することができる構成になっております。手軽に新規登録できるようにメール送信・認証機能は外しています。一部、未完成の部分はあるのですが、とりあえず先に進み、後で修正に戻ってこようと思っています。

ウェブサービス部は難しかったですが、【WEB全体の仕組み】を理解することができたので、その後の学習効率は大きく上がったと感じています。また、データベースとのやりとりをたくさん行うことができたので、エラー文などの対応にも慣れたと感じます。

今後に向けて

ここまでお読みいただいき、ありがとうございます。今後、さらに学習を重ねて、スキルを身に着け、稼げる力をつけていけたらと思っています。

そのために次回からは、自作したキャラの会話形式も用いたブログにしていきたいと考えています。
考えたキャラクターたちに自己紹介をさせますね。

はじめまして。OZです♪関西出身です。

プログラミング学習がんばるで〜✨️

プロ太です。プログラミング歴３０年になります。関東出身です。

私がしっかりレクチャーしましょう✨️

上記２キャラクターは、３０代後半では必ず遊んだことがありそうな、ボンバーマンビーダマンと戦隊キャラをモチーフにして作成しました笑。この２キャラを使いながら、楽しく勉強していけたらと思っています。どんなことでも、些細な楽しむ要素を入れることは、継続する上では大切ですよね。

今後の活動を温かく見守っていただければ幸いです。
では、また次回の記事でお会いしましょう(^^)