私がReactを学習できるmosya Reactを開発した理由

この記事では私がmosya Reactというオンライン上でReactを学習できるサービスをリリースした背景を語らせていただこうと思います。

まずはmosya Reactがどんなものなのかイメージが湧きやすいように動画を用意したのでぜひ見てください👇

動画をみていただくとわかるように環境構築不要でその場でReactのコードを書いてプレビュー結果を確認できます！
問題を解いた後は「提出」ボタンを押すことで実際に書いたコードがあってるかの確認プログラムが動いて採点してくれます！

なぜ mosya Reactを作ったか

mosya Reactを作った背景には 完全未経験の方に仕事を手伝ってもらうためにReactを教える機会があったこと が関係しています。
その方は保育園の業務でパソコンを使う程度でプログラミング言語には触れたことはありませんでした。
そこでmosyaという別サービスでまずはHTML, CSS, JavaScriptを学んでもらい次にReactを学んでもらうことにしました。
ところがReactは難易度が高くReactの公式サイトだけでは初心者にはなかなか理解し難いものでした。

ちなみにその方は元保育士の私の妻です笑

環境構築の面倒さ

はじめて妻にReactを教えたとき、環境構築の手間を感じました。
まずは、Node.jsをインストールして、バージョン管理ツール入れて、Reactのプロジェクトを作成して、エディターをインストールして、プロジェクトをエディターで開いて....といった具合です汗

学習のためにわざわざ環境構築をしてもらうのは面倒だし、環境構築に時間を取られるとReactの学習に集中できないと感じました。
また、学ぶ周辺ライブラリやツールも多く、取り組む学習内容に応じて都度環境構築が必要になることもあります。

mosya Reactはそのような環境構築の手間を省き、その場でReactのコードを書いてプレビュー結果を確認できるようになっています。
ブラウザーを開くだけで下のような学習環境が提供されるので、Reactの学習に集中できるようになります。

• Reactのコンパイル環境
• TypeScriptのコンパイル環境
• Biomeを使ったコード解析環境
• EmotionなどのCSS in JSライブラリのコンパイル環境
• ユニットテストの実行環境
• React Routerやその他ライブラリの実行環境

公式ドキュメントはプログラム初心者には難しい

よく、プログラムに長けた人の意見として「公式ドキュメントを読め」というものがあります。
それはあらかじめある程度のプログラムの素養を身につけた人には有効なアドバイスかもしれませんが、初心者にとっては難しいです。
Reactを学習するにはその前提となる知識が多すぎるからです！

妻にReactを教えるときに公式ドキュメントを紹介していたのですが、
それだけで理解するのは全員が全員できることではないと身をもって感じました。

すでにプログラミングに慣れきったプロからすると初心者にReactを教えるのはとても難しいのです。

そこで、改めてつまずきポイントを整理し、
どうしたら妻でも理解できるかを必死に考え文章化し、
図解やアニメーションを使ってなるべく文章を読む負担を減らす努力をしました。

こんな感じでドキュメント内でその場で書き換えられるコードプレビューをドキュメント内に用意してます👇

import React from "react";
import "./card.css";

export function App() {
  return (
    <div className="card">
      <h2 className="card-name">
        mosyabo
      </h2>
      <p className="card-title">
        Software Engineer
      </p>
    </div>
  );
}

最終的に妻に読んでもらって理解できないところをヒアリングし何度も文章を修正しました。
さらに、初心者目線で妻にも文章を推敲してもらい、初心者の視点とプロの視点の両方を取り入れた記事 を書くことで、初心者でも理解しやすい記事を書くことができました。

これはプログラムを学びたい妻とプロの私がタッグを組んだからこそ出来上がった傑作だと自負しています。
私一人ではmosya Reactをここまでわかりやすくは作れなかったと思います。

実際にドキュメント内にある図解の多くは妻が描いてくれたものです👇

時代に合わせた学習内容を提供したい

ネット上で無料の学習コンテンツはたくさんありますが、その中から初心者が最新の情報を選ぶのは難しいです。
特に 元保育士の妻にReactを教えるとき、最新の情報をネット情報だけで勉強してもらうのは難しい と感じました。
そこで、mosya Reactだけ勉強していたらとりあえず私が教えたい最新の事情を踏まえた内容を妻が習得できるように心がけました！

Reactはバージョンアップが頻繁に行われており、学習コンテンツも古くなりやすいです。
またReactだけじゃなくTypeScriptや周辺技術の進化も著しいため、最新の情報を提供することが求められます。

個人開発では他の学習サービスと比べその辺小回りが利くので、最新の情報を提供することができます。
気合いと根性が必要ですが。。。笑

それでも鮮度の高い情報を知ってもらうことは大事だと思い、mosya Reactでは最新の情報を提供することを心がけています。

下の画像は実際にmosya Reactで学ぶことができる内容です👇

まとめ

mosya Reactは環境構築の手間を省き、その場でReactのコードを書いてプレビュー結果を確認できるサービスです。
わかりやすく書かれたドキュメントを読んだ後に実際にその場でコードを書いて答え合わせができるので、 読むだけではなく実際に手を動かして学ぶことができます。

このサービスを使って最終的にはうちの妻も問題が解けるレベルにまで成長できました🙌

全くの未経験者がmosya Reactを通して成長していく姿を見ることができるのはとても嬉しいです。

初心者の方でもわかりやすく仕上がっていると思います！

最初の10レッスンは無料で体験できるのでぜひ登録して試してみてください！