コンポ―ネントベースのフロントエンド開発入門」を読んで近鉄四日市駅前にあるじばさん三重3階にある事務所を間借りさせていただいているのですが、事務所の鍵が開くのが9:30なので、嫁さんの出勤に合わせて8時に自宅を出発して8時半に四日市のアピタに到着してしまうので、1時間はいつもアピタのスタバでコーヒーを飲みながら読書をしたりブログを書いたりする時間にあてています。読み進めていたReactビギナーズガイドをようやく読み終えることが出来ましたので、今日は簡単に感想を書いてみたいと思います。?と言われると以下の言葉が思い浮かびます。学べば、様々な環境(ウェブとかスマホとか色々)に応用できるよ!ってことのようです。私が調べてみたところ4つくらい使い道ありそうだったので、並べてみます。何ができるかってところをちゃんと理解していなかったのですが、ウェブフロントエンドのJavaScriptフレームワークという安直な理解でしたが、ウェブフロントエンドというところに着目すると、ウェブフロントエンドのUIを構成するためのコンポーネント集といった位置づけのようです。存在が大きいのかなぁといったところですね。Nativehttps://facebook.github.io/react-native/この本を読んでみるとそれ以外にもReactでデスクトップアプリやTVアプリが作れると書いてあります。いうものを使うようです。Electronデスクトップアプリに関してはOSをまたいで利用できるマルチプラットフォームなアプリが開発できるということで少し興味がわきました。Shiftのようなウェブアプリをデスクップアプリとして利用するための自分専用アプリを作ってみたいという気持ちはとてもありますので、いずれ余裕ができたら作ってみたいと思います。React-tv?TVアプリには、React-tvというものがあるようですが、こちらは日本語の情報はほぼ皆無なのでよくわかりませんでした。ググってみて出てきたものをとりあえず載せておきます。ついて深く学ぶことに決めました。ついて書かれている入門書を簡単にレビューします。基本構成は以下の流れになっています。何なのか(どんな処理が行われているかの概要)こちらは、DOM操作に関する基本的な内容でした。実行するまでの基本的なコードの書き方などを学ぶことができます。コンポーネントのライフサイクル(プロパティやステートなど)こちらの内容については、以下の項目について学ぶことができました。rendarメソッド、プロパティ、propTypes、ステートなどの各概念ReactにおけるDOMのイベントプロパティとステートを外部・内部からどう扱うかライフサイクルメソッドについて基本構成は非常にシンプルなので、そのままでは機能が足りないのだろうと容易に想像ができ、基礎の上に成り立つ各種ライブラリなどを学ぶ必要があるのだろうなぁということを想像しました。ライフサイクルメソッドがあらかじめたくさん準備されているので、そちらを使いながら処理を組んでいくイメージを想像することができました。開発環境(プロジェクト)のひな形のサンプルを示してくれています。開発環境を構築するにあたって、モダンなJavaScriptという項目があるのですが、モジュールといった概念であったり、ECMAScriptについて触れられているのでやはりこちらは避けて通れない道だと思います。その他、npmを利用した環境の作り方から、トランスパイル、パッケージングといったビルドプロセスからデプロイまでの流れも一通り学ぶことができます。高機能な表コンポ―ネント:ExcelコンポーネントExcelコンポーネントの章では、表のUIの構成の仕方や、各種CLUDの処理、検索機能の実装、データのエクスポート方法などの各機能を実装しながら、ステートの使い方について理解することが出来ました。コンポーネントを組み立てるためのJSXこちらの章では、JSXの基本的な構文や概念について簡単に理解することができました。この書籍は各項目については触り程度しか触れないので、詳しいところは公式のリファレンスを見てくれといったスタンスのようです。どんなふうに利用するのだろうかといったところにイメージを膨らませることはには十分な内容ではあります。最新のECMAScriptを利用するためのBabelJSXの章では、Babelについても紹介されています。ECMAScriptという概念についても詳しく知っていないので、こちらについても学習の必要性を感じました。フロントエンドエンジニアの方々のTwitterなどを見ている限りでは、ECMAScriptの各バージョンについての深い理解が必須といった印象を受けているので、今後のウェブアプリを組んでいくにあたっては、必ず理解しないといけない領域なんだろうなぁという感覚と、こちらについての理解がない状態でアプリは作れないに違いないといった実感があります。Reactにおけるコンポーネント基本的なコンポーネントの概念やセットアップ方法、基本的な各種コンポーネントの紹介などUIを構成するための基本的な概念をReactからどうやって扱うかについて簡単に学ぶことができます。型チェックのためのFlow7章では、品質担保のための項目として型チェックを行うためのFlowについて紹介されていました。JavaScript自体が型を持たない言語ということですが、あまり実感なく普段使用しているので、言語仕様についてももう少し詳しく見ていく必要があるように思います。構文チェックのためのESLintこちらは普段の開発でも利用しているので私のとってもまだ馴染みがあります。ESLintを利用して構文をチェックするための基本的な方法を学ぶことが出来ました。ESLintの環境を0から構築したことがなかったので、こちらを参考にして、直近のプロジェクトに適用してみようと思います。ユニットテストのJestユニットテストを行うためのJestについて簡単に学ぶことができました。ウェブサイトの案件ではテストコードを書くほどのアプリを開発することはほとんどないのですが、今後自社のプロダクトや業務アプリを開発する際には参考にしたいと思います。データの流れを整理するためのFluxStoreとSchemaという概念やStoreの使い方について簡単に理解することができました。Storeという言葉など、普段あまり使用しない言葉が出てきたので、データに関する言葉の整理も必要だと感じました。応用情報技術者を取得してからプログラム開発に関連する用語についての知識があまり増えていない気がするので、どこかで知識の補充が必要だと感じました。まとめ新しい領域について学ぶと、知らない世界を垣間見ることができて、学ぶべきものがたくさん見えてきますね。これまで当たり前だと思って開発を続けてきたWordPressやPHPの開発環境とは明らかに異質なものを感じるのですが、Serverlessといったキーワードを最近知ったり、GCPのセミナーに参加してAIの各領域やクラウドについての新しい領域の知識が入ってきたら、サーバーサイドの開発手法についても現状の知識のままではダメだという危機感で頭の中がいっぱいになりました。サーバーサイドの処理についても関数型プログラミングといった割かし新しいプログラミング手法について学ぶ必要があったり、JavaScriptの言語仕様やエコシステムといったモダンな開発環境について今のうちから学んでおかないと、浦島太郎になってしまうのだろうなぁといった感覚がなくなりません。現状でウェブサイトの制作案件は自分の主要な仕事なので、WordPressは外せないため、今後も継続して深く学んでいこうとは考えていますが、スマホアプリの開発や業務アプリの開発をご依頼いただく機会も徐々に増えてきているので、一気にインプットを進めて、知識のブラッシュアップを進めていく必要があるって感覚を確信に変えることが出来ました。結果、読んでよかったと思います。次はHTML5Canvasの基本的ことについて書かれた書籍を現在読みかけなので、次はそちらの感想について書きたいと思います。公式アカウント資料ダウンロード会社やサービスに関する資料ダウンロードをご希望の方は右の資料ダウンロードページからご利用ください。ご希望の方は応募フォームからご応募ください。