EY-Office ブログ

プログラミング初心者にReactを教える

現在あるところで、何人かのプログラミング初心者にReactを教えました。

実はEY-OfficeのReact教育のテキスト(非公開)はあるターゲットに対して作られています。Ruby on RailsやJava, C#などを使いWebアプリを開発している開発者です。それらの方は、

  • 何らかのプログラミング言語でプログラムが書ける
  • HTMLはだいたい書ける
  • CSSは多少わかる
  • JavaScriptも少しふれている

です。しかし今回はプログラミング初心者に教えるので、テキストにはない項目を追加して教育しました。

プログラミング初心者にReactを教える

プログラミングの組み立て方、読みやすいコード、デバッグ方法

プログラミング初心者には、どうやってプログラムを組み立てるのか。 読みやすい(メンテナンスしやすい)コードを書かなければ行けない理由とその方法。 そして正しいデバッグの方法を教えたりしています。
プログラミング初心者に対しての教育は以前から行っていたので、テキストや教材はあるのでこの部分は問題なく対応できました。

プログラミング初心者がプログラミングできるようになるのは1回の講義で身につくような物ではありません。研修全体を通じて実習を行い、そこでのつまづきを解決しながら指導して行きます。

JavaScript

JavaScriptはいろいろと欠点のある言語ですが、ES6(ES2015)以降の改良された言語仕様を中心に教えています。また現在のReactではオブジェクト指向(クラス)はあまり利用されないので、問題の多いJavaScriptのクラスを本気で教えなくて済むのは助かります。

テキストには 初めてのJavaScript 第3版 ― ES2015以降の最新ウェブ開発 を使っています。初心者には読みにくい部分もありますが解説しながら読んで行けば理解できます、また初心者でなくなっても読める単なる入門書に終わらない良い書籍だと思います。

HTML

今まで、HTMLはまったく知らないという受講者に会ったことはありませんが、あまり書けない方もいます。開発プロジェクトにはHTMLを書くWebデザイナーが参加する事は多いと思いますが、HTMLが書けないとフロントエンドの開発者としてはやっていけないと思います。

今回ある新人から「<h1><table>のような目的のはっきりしたタグは判りやすいが<div><span>のようなタグは理解しにい、そもそも<div><span>はどこが違うのですか?」という質問を受けてハッとしました。HTML入門の簡単なテキストも用意したいなと思いました。

CSS

CSSは私も苦手です。仕事でもネットを検索しながら書いています😅。
主にCSSはWebデザイナーの領域でReact開発者がしっかり学ぶ必要ではないと思いますが、あるレベルまでは書ける必要があると思います。

CSSレイアウトも昔のfloat等ではスマフォ等で正しく表示できるるページは難しく、最近のFlexbox LayoutかGrid Layoutの触りを演習問題と組み合わせ教えられるようにしたいなと思っています。

まとめ

このようにEY-OfficeのReact教育では、現状でもプログラミング初心者にも対応できていますが、さらにより良い教育を目指して改良しています。

もし質問等ありましたら、お気軽にお問い合わせ・ご質問ください。

続報: jest-puppeteerが復活しました!

以前書いた EY-Office React教育でのE2Eテストツールの遍歴でjest-puppeteerのメンテナンス(開発)が止まったと書きましたが、数日前にjest-puppeteer みると新たなコミッターが加わりメンテナンスも再開されていました。 🎉🎉🎉

テキストはPlaywrightに置き換えてしまったのですが、どうしようかなぁ〜

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ