Loading...

【イベントレポート】『TypeScript & React.jsハンズオンセミナー(TODOアプリを作ってみよう)』

どうも、こだまです。
今回は弊社主催の『TypeScript & React.jsハンズオンセミナー(TODOアプリを作ってみよう)』のイベントレポです。
サーバーサイドの人間として、フロントを触る機会は少ないものの、どうしてもフロントの知識が必要になることがあるので、こう、さくっと学べる機会は嬉しいですね。

というわけで、本セミナーは以下のような感じで行いました。
1. 情報戦略テクノロジーの紹介(ちゃっかり!)
2. ハンズオン
3. 懇親会

今回も多くの方に参加していただきました、ありがとうございます!
img_0888

それでは、さくさくっと紹介を。

弊社の紹介

セミナー名、絶賛大募集しています。何か良い案があったらコメント頂きたいです。
以上です。詳しくは弊社リクルートサイトをご覧ください。

いざ、ハンズオン!

今回も講師に高橋さんをお招きしました!
現在はエンジニア教育事業等を行っているイメージピット株式会社の代表を務めています。
来年からはアプリ開発スクールの講座を開校する予定だそうで、ご興味があればこちらも宜しくお願いします。

それでは、さくさくっとどんなことしていたのか紹介を。

reactJSの紹介

SPAですね。いわゆるフロントですね。Trendもかなり来ているようで。
規模が大きくなっても管理ができるように、動的な環境での状態変化時も効率よくDOMの再構築ができることが特長です。
有効なケースとしては、大規模な開発やサイクルの早い開発かなと思います。
様々なUIをコンポーネントとして使用しているので、機能の追加/削除が容易に行えます。
今はFacebookを始めとするいろいろな会社が使っていますね。これからの伸びに期待大です。

TypeScriptの紹介

マイクロソフトがOSSとして提供している言語で、コンパイルするとjsを書き出す。
とても便利な言語です。
最新のJavaScript仕様のES6に準拠しているようで、静的型付けやアクセス修飾子があり安全な開発を可能としています。
今回のテーマであるReactとの相性が非常に良いため、本セミナーではこちらにも触れています。一度で二度おいしい!!
何よりの長所は、マイクロソフトが力を入れて保守しているため、変化の激しいJS界隈においても急になくなる可能性が低いところかなと思います。

TypeScriptを動かしてみよう

最初といったらとりあえずhello, worldですよね。
typescriptをインストールして、ファイルを書いて、コンパイル。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-19-19-25-26
これだけで完了。

TypeScriptの基本文法を全体通してなぞるので、初心者でも安心の構成ですね(ステマ!)
ちなみに僕はいつもgoを使用しているので、「嗚呼ジェネリクス・・・」ってなります。

TypeScriptはJavaScriptのライブラリとの相互運用ができます。
「型定義ファイル」と呼ばれる型情報のみを記述したスクリプトファイルを参照する仕組みを利用して、TypeScriptからJavaScriptライブラリを扱うという仕組みです。

TODOアプリを作ろう

webpackという自動ビルドツールを使用して、作成しました。
フロントを触っている人なら馴染みがあるのかな?と思います。

TODOアプリを作るためにTypeScript関連のパッケージからReactをインストールして、React使えるように設定して、webpackの設定もして、、、
けっこうやること意外とあるんだなという気持ちの一方で、こういう初期設定から手を動かしながらやれば、あとで自分で何か作る時に有益だなという気持ちも。
初期設定から触って学べるのって初心者の身からすると良いですね!!!(ステマ)

その後はReactのJSX(ちなみに、JSXという拡張子はFacebook社製らしい)作って、html作って、
$ npm run build
すると

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-19-19-25-46

TODOアプリができちゃった。
本当になんでもかんでも自動化されちゃって、すごいなあ。

スピード感ありながらもしっかりコードの解説も盛り込んだハンズオンになっています。
なかなか環境によっては実行しづらい方もいたりで、次回の反省に活かしたいなと。
まあ、環境構築が大変なことを知ることも良い学び??笑

ちなみに、今回のTODOアプリを作成するにあたり、Reduxというフレームワークを使用しました。
このReduxは、MVCに変わるデザインパターンと言われており、今後のシステム開発に欠かせない存在になるかも??
こちらのフレームワークに関しても詳しい説明をドキュメントにして掲載しています。
本セミナーで使用したドキュメントは当サイトに会員登録していただけるとご覧いただけるので、よろしければどうぞ。(巧妙なステマ!!)

ちなみにですが、なかなかに複雑だったので、僕はそっとパソコンを閉じました。(逃げるは恥だが役に立つ)(立たない)

懇親会

遅めの時間にも関わらず、残っていただきありがとうございます。
同じエンジニアでも業界が違うと新たな知見を得られたり、好きな技術の話で盛り上がったりと楽しいですね。

終わりに

今回も非常にボリューミーなハンズオンでした!
また、フロントを学べる貴重な機会に加えて様々な方とも交流ができて、個人的には、満足な会でした。
次回は1/13にScalaのセミナーを開催予定ですので、ふるってご参加いただければと思います!

ではでは。

情報戦略テクノロジー