taisablog

taisa's engineer blog

JavaScript

「はじめてのフロントエンド開発」という共著本を出版しました

投稿日:


『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』という共著本を2018年5月9日に出版しました。

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 Amazonより
自分はこの中の第3章の環境構築を担当しています。お陰様で現在まで売れ行きは好調ですが、一方で誤植もいくつか見つかっていますので誤植情報についてもこの投稿でお知らせします。また、表紙をパッと見ただけでは分からない本書の内容についてや去年最新JavaScriptフロントエンドをキャッチアップした経緯などを書いていきます。

どんな本か

「どんな本か」については共著者である新井正貴の投稿にまとめられているので確認してみてください。

「はじめてのフロントエンド開発」という本を書きました – massa142’s blog

共著者として参加していた書籍『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に 技術評論社 さまより発売となりました。 React、Angular、Vue.js、React Nativeそれぞれが、同じサーバの APIを参照し、同様の機能を持ったアプリケーションとして作成します。

  • どんな本か
  • こんな方におすすめ
  • 書いたきっかけ
  • パンダの由来
  • サポートリポジトリ

本書の内容について

書籍タイトルは『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』ですが、タイトルに出てくるワードの他にも『フロントエンドの最新動向』『環境構築』『ES2015』『TypeScript』『Firebase』についても書かれています。
表紙をパット見ただけでは内容が分からないところもあると思うので、本書がどのような内容かを簡単にまとめてみます。

アウトライン

  • Part1:JavaScriptフロントエンドフレームワーク最新動向
    • 第1章:JavaScriptフロントフレームワークの興隆
    • 第2章:SPA、PWA – フロントエンド実装技術の最新トピック
  • Part2:フロントエンドJavaScript開発のための基礎知識と環境構築
    • 第3章:フロントエンドJavaScript開発のための環境構築
    • 第4章:フロントエンドJavaScript開発のための基礎知識
    • 第5章:フロントエンドJavaScript開発のためのサーバ構築
  • Part3:Slackライクなサンプルで比べて学ぶ React/Angular/Vue.js
    • 第6章:React入門 & 徹底活用
    • 第7章:Angular入門 & 徹底活用
    • 第8章:Vue.js入門 & 徹底活用
  • Part4:Slackライクなサンプルで学ぶ React Native
    • 第9章:React Native 入門 & 徹底活用

大きな流れ

まずPart1で「JavaScriptフロントエンドの最新動向」を解説し、Part2で「環境構築」「ES2015」「TypeScript」「FirebaseによるAPIサーバの構築」などフロントエンド開発の事前準備をします。
Part3、4では「React」「Angular」「Vue.js」「React Native」それぞれの章の最初の入門で基礎知識を解説した後、同一のAPIを利用しSlackライクなサンプルアプリを作ります。それぞれが同一APIを使って同じアプリケーションをつくることでそれぞれの特徴を掴めるような構成になっています。

各Partについて

Part 1:JavaScriptフロントエンドフレームワーク最新動向

第1章では「React」「Angular」「Vue.js」「React Native」に関する解説や比較をしています。また本書で扱うフレームワーク/ライブラリ以外(Polymer、Ember.js、Riot.js、Vanilla.js、Native Script、Weex、A-Frame、React VR)についてもそれぞれジャンル分けしながら取り上げて解説しています。
第2章では「SPA」「PWA」に関連する技術的な内容(クライアントサイドルーティング、CSS in JS、コンポーネント指向、SSRとプリレンダリング、バーチャルDOM、MVCとMVPとMVVM、Flux、PWA、Electron など)を取り上げて解説しています。
Part1を読むことで最新のJavaScriptフレームワークの動向を掴みつつ、フロントエンドに関する技術的な面を把握することができると思います。

Part 2:フロントエンドJavaScript開発のための基礎知識と環境構築

第3章では「node.jsのインストール」から「npm」「package.json」「webpack」「IDE(VS Code)」まで、開発に必要な環境構築について取り上げて解説しています。既に環境がある人にとっては飛ばしても良い内容ですが、一方で環境構築周りで躓く人も一定数いると思うので、その場合はこの章を進めていけば開発環境を構築することができます。
第4章では「ES2015」「TypeScript」について解説しています。第5章では「Firebase」を使って以降の章で利用するAPIサーバの立ち上げについて解説しています。

Part 3:Slackライクなサンプルで比べて学ぶ React/Angular/Vue.js、Part 4:Slackライクなサンプルで学ぶ React Native

第6、7、8、9章では、それぞれの章において各フレームワーク/ライブラリへの入門をした後サンプルアプリを作るという流れになります。
本書は(特にPart 3とPart 4)は、ただ読み進めるよりも実際にコードを書いて動かしてみてほしいというのが思いとしてあります。
中には「はじめての」というタイトルの割には敷居が高いと感じる人もいるかもしれませんが、とにかく書いて動かしてみて比較してみてほしいです。

誤植情報

誤植情報については以下のページにまとめていて、随時更新していますので何かあったらTweetしたりissuesにあげたりしてもらえると助かります。

okachijs/jsframeworkbook

Contribute to jsframeworkbook development by creating an account on GitHub.

おわりに

自分は去年のはじめにJavaScriptの最新動向のキャッチアップをしてプロダクトに適用しようと決めて活動していました。それでまずはじめに「ES5」「ES2015」「TypeScript」「webpack」を触りつつ、どのフレームワーク/ライブラリを使うかを選定することからはじめました。
選定ではまず対象を「React」「Angular」「Vue.js」に絞りました。他フレームワークについては本書にも少しでてきますがOkachi.jsという勉強会で比較発表会をした結果や現状のトレンドを考慮し対象から外しました。
対象を絞った上で、チームメンバーで分担して「React」「Angular」「Vue.js」の担当者を決め、各自が調べた結果の発表会をした上で最終的に使うフレームワークを検討し決定しました。
最終的には、メンバーのスキルセット、プロダクトとの相性、スケジュール、導入のラーニングコスト、知り合いに知見のある人がいるか、など総合的に判断しVue.jsを採用しました。結果的にはVue.jsを採用してよかったと思いますが、これらの条件が違えば他のフレームワーク/ライブラリを採用していたかもしれません。
このように振り返ってみると、去年行ったキャッチアップ活動の多くは本書に詰め込まれてるように思います。なのでこれからやろうという方は是非本書を参考にしてみてください。また参考までに、去年「slideship Tech Dive」という勉強会でLTした時の投稿とスライドを貼っておきますので合わせて見てみてください。

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集」でLTしてきた。タイムテーブルは、メインセッションがVue、ReactVR、React SPAになっていてその後LT4本で親睦会という構成。自分は「フロントエンド速習コース」というタイトルでLTをさせてもらった。

-JavaScript
-, , , , , , , ,

執筆者:

関連記事

Firebase Cloud Firestore 使い方の勘ドコロ

FirebaseのCloud Firestoreを扱う際、本家ドキュメントが充実していて検索すればすぐに出てくるのでそれほど困ることはありません。ただ、最初の入りとしてFiresotreのDocumentって何? となったり、doc、docRef、cityRef、cityDocRef、snapShot、docs など、本家ドキュメントの中でも若干変数名の書き方が異なっていたりします。その為、慣れてくれば大丈夫ですが、慣れるまで毎回どう書くんだっけ?と検索することが多かったので、自分なりに解釈して整理してみました。Firestoreを扱える言語は様々用意されていますが、ここでは、JavaScript(Nuxt.js)を例に進めていきます。(セットアップは省きます) 参照元:https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja Firestoreの基本的な考え方 基本的な考え方は、正にこの図にあるように「フォルダ(collection)」「ドキュメント(document)」「データ」という構成になっています。 参照元:https://firebase.google.com/docs/firestore/data-model これをFirestoreの管理画面でみるとこのようになります。 これを「フォルダ(collection)」「ドキュメント(document)」「データ」に当てはめてみるとこのようになります。イメージとしては、本棚にフォルダが並んでいてフォルダを選択するとフォルダの中のファイル一覧がみることができ、あるファイルを選択するとそのファイルに書かれている内容をみることができるという感じです。 ◯◯Refとは 本家ドキュメントをみると、◯◯Refという変数がよく出てきます。これはその名の通り「参照」です。つまり本棚にあるフォルダ(collection)やフォルダ内のドキュメントを選択した状態です。この時点ではまだ参照なので取得はしていません。usersコレクションを選択した状態であればuserRef、usersコレクションのドキュメントを選択した状態であればuserDocRefといった変数をつけると分かりやすいと思います。(本家ドキュメントではそのようなルール決めはありません。) userRef = db.collection(‘users’) userDocRef = db.collection(‘users’).doc(‘YLu7bG7PcRNYhAg3F6MY’) これらを踏まえて、実際にデータの取得、追加、更新、削除のコードを書いてみます。ここではあえて◯◯Refのように変数を使っています。 コレクション配下のドキュメントデータをすべて取得する usersコレクションを参照した状態で、get().then()を呼び出すとその時点のドキュメント一覧(snapShot)が取得できます。ドキュメントは1つしか存在しない可能性もありますが、ドキュメント一覧なのでforEachでループすることで全データを取得することができます。ユーザIDはデフォルトでドキュメントに振られるIDです。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.get().then((snapShot) => { snapShot.forEach((doc) => { this.users.push({ user: doc.data(), user_id: doc.id }) }) }) ユーザID ユーザ名 ユーザメールアドレス {{user.user_id}} {{user.user.name}} {{user.user.email}} 参考:https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja コレクション配下のドキュメントデータをフィルタして取得する フィルタするのにwhereを利用することができます。whereで対象を絞った後、同様にget().then()を呼び出すとフィルタしたドキュメント一覧が取得できます。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.where(‘name’, ‘==’, ‘山田太郎1’).get().then((snapShot) => { snapShot.forEach((doc) => { this.filteredUsers.push({ user: doc.data(), user_id: doc.id }) }) }) ユーザID ユーザ名 ユーザメールアドレス {{user.user_id}} {{user.user.name}} {{user.user.email}} 参考:https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja 単一のドキュメントデータを取得する 単一のドキュメントデータを取得するには、doc()にIDを渡し、get().then()を呼び出すと指定したドキュメントのデータが取得できます。この場合、doc()で単一のドキュメントを指定しているので、取得できるのは一覧ではなく指定したドキュメントの値となります。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.doc(‘YLu7bG7PcRNYhAg3F6MY’).get().then((doc) => { this.user = doc.data() this.user.user_id …

no image

Vue.js+TypeScriptで外部APIを使ったTODOリストを作ってみた

Vue.jsで外部APIを使ったTODOリストを作ってみた に続き、それのTypeScript版を作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTODOリストのAPIを作ってみた」を利用します。CORSを全て許可しているのでどこからでも叩けるようになっています。TypeScriptを書くのは今回が初めてなので、誤っている箇所やもっとよい書き方などがあれば指摘して頂ければと思います。 できたもの できたものはこちらです。http://vuejs-ts.taisablog.com/todo <div class=”graybox”> <div class=”clearfix”><figure><a href=”http://52.196.213.4/wp-content/uploads/2019/08/063dff08aea69d0ee7c6cea19de29030.png”><img class=”alignleft size-full wp-image-1684″ src=”http://52.196.213.4/wp-content/uploads/2019/08/063dff08aea69d0ee7c6cea19de29030.png” alt=”” width=”600″></a></figure></div> </div> APIのエンドポイント APIのエンドポイントは以下としました。 URL http://gin.taisablog.com/api/v1/ GET /todo // 一覧表示 POST /todo // 新規作成 GET /todo/:id // 編集画面表示 PUT /todo/:id // 編集(今回未使用) DELETE /todo/:id // 削除 プロジェクト作成 vue-cliを使ってプロジェクト作成をしました。プロジェクト作成のコマンドを打つと、色々と聞かれますが、TypeScriptを利用する為にManually select featuresを選択し、TypeScriptをONにします。ここではRouterもONにしました。 % npm install -g @vue/cli % vue create my-project default (babel, eslint) ❯ Manually select features vue-cliでできたプロジェクトのsrc配下の構成は以下となっています。今回はそこにTodo.vueとTodoList.vueを追加して実装しました。views配下で実装するだけでも大丈夫ですが、今回はあえてviews/Todo.vueからTodoList.vueコンポーネントを呼び出す形としました。 . ├── App.vue ├── assets │   └── logo.png ├── components │   ├── HelloWorld.vue │   └── TodoList.vue ← 新規追加 ├── main.ts ├── router.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts └── views ├── About.vue ├── Home.vue └── Todo.vue ← 新規追加 views/Todo.vue TodoList.vueコンポーネントを呼び出します。 …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月前まで JSとjQueryのみ 毎回ノリで書いていた(もちろんカオスにならないように最大限工夫はしてるけど) 流れが早いからモダン情報のキャッチアップはタイミングを見計らっている けど2017年中にはなんとかしたい やるなら一気にやりたい 始める前まではこんな感じだったけど、そろそろいってもいいかな?ということでやり始めた。 速習後 もともとは既存プロダクトをどうにかするつもりで始めていたけど、タイミングよく新規プロダクトを立ち上げることになったので採用した。何もしてなかったらかなり勇気が必要だったと思う。 ES6 React VueJS Webpack Babel PostCSS Go PHP(継続) 3ヶ月でやった事 JavaScript(ES5)を速習する ES6を速習する React(でSPAを)速習する マークアップを速習する Podcastで速習する 勉強会で速習する チームメンバーと速習する JavaScript(ES5)を速習する オライリー本で速習 JavaScriptパターン ―優れたアプリケーションのための作法 Amazonより 「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」や他の本もいいけど個人的にはこの本がお薦め(発売時期がよい)。 ※デザインパターンの章は他に「JavaScriptデザインパターン」という書籍があるしここでは読み飛ばしてもよいと思う。 ES6を速習する WEB+DB PRESS Vol.87で速習 WEB+DB PRESS Vol.87 Amazonより 非常に分かりやすく端的に説明されていてとてもよい。 (こんなツイートも↓) 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7 — Takuto Wada (@t_wada) 2015年8月10日 React(でSPA)を速習する WEB+DB PRESS Vol.97 Amazonより React+Flux、クライアントサイドルーティング、サーバサイドレンダリング、webpackについて丁寧に説明されている。他にもマネジメントやPythonに関する内容があってとても読みごたえがある。 すぐに「理解できた」という訳にはいかない Reactはそれなりに初期学習コストがあるので以下のことを繰り返しながらじっくり理解を進めていった。 サンプルコードを動かす 本家サイトチェック ブログ記事チェック 今話題のReact.jsはどのようなWebアプリケーションに適しているか?(お薦め記事) サンプルコードを作る Web+DB PRESS見直す マークアップを速習する マークアップも一人でできるようになりたいというメンバーが多かったのもあり、社内のUI/UXデザイナーにハンズオンをしてもらった。このハンズオンの目的としては何から手をつけていいか分からないという状況から脱却して自分でもなんとか勉強できる状態にすることでこれだけでなんとかしようというものではない。 関連リンク – 初心者向けざっくりHTML/CSSコーディングハンズオン資料 – 社内エンジニア向けにマークアップハンズオンを開催しました その他の方法 Podcastで速習する 現場.fm 現場.fm というフロントエンドの現場について話すラジオを始めた 勉強会で速習する コミュニケーションしながら疑問点を解決してもらえたのでとても助かった。他にもReact、VueJS、Angular以外も含めたフレームワーク発表会をやったりした。またそれをうけてあたらめてReact、VueJS、Angularはいいなと実感した。 チームメンバーと速習する 今QはJSをやろうと全員で決めた(※この間業務でJS触る機会は0だった) 情報共有しやすい ここでもチームメンバーで分担してReact、VueJS、Angularを調べて発表会をした チームメンバーのJSに対する意識が全体的に変わって導入障壁が低くなった まとめ 業務でJS触る機会が0だったとしても3ヶ月あれば結構イケる 他にやりたいことができてもなるべく我慢してJSやるの大事 …

Rust+WebAssembly で Hello, World!

以前 Rust をはじめてみよう!という記事を書いた。今回は Rust + WebAssembly を使って Hello, World!の出力をやってみた。 WebAssembly について まず WebAssembly とは何か。本家サイトの Overview をみてみる。ここにある通り、WebAssembly(WASM)は C/C++/Rust などの高級言語を使って開発をしバイナリ形式で動かすことができる。その為 Web 上で高速に動かすことができる。とりわけゲームなどの実行速度が求められるような分野で有効になる。Chrome、Firefox、Safari、Edgeで利用が可能。 WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications. https://webassembly.org/ よくデモに出てくる Unity を使った動画 https://webassembly.org/demo/Tanks/ Youtube動画 再生回数が一番多い動画をあげておく。2018年2月の動画ですごく分かりやすく説明されている。 Rust+WebAssembly のドキュメント https://rustwasm.github.io https://github.com/rustwasm ここからは以下の記事を実際にやってみる。実際にほぼそのまま実行しているだけなので以下についてはリンクをチェックするだけでも良いです。 https://rustwasm.github.io/book/game-of-life/hello-world.html 事前準備 参考URL:https://rustwasm.github.io/book/game-of-life/setup.html rustup を使って rust をインストールする curl https://sh.rustup.rs -sSf | sh source $HOME/.cargo/env source $HOME/.cargo/envは .zshrc などに記述しておくとよい wasm-pack インストール wasm-pack を使うとビルド・テスト・公開などが簡単にできる curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh cargo-generate インストール cargo-generate を入れるとcargo …

Nuxt.js v2.9のリリース情報とDiff

2019年8月20日にNuxt.jsのバージョンが2.8.1から2.9へがリリースされました。2019年9月19日時点ではバージョン2.9.2まであがっています。本投稿ではリリース内容と変更点が見れるように2.8.1から2.9.1のソースのDiffと変更されたファイル一覧を載せておきます。変更ファイル数は、examplesやtestを除くと約142ファイルでした。またバージョンが上がっただけ、関数にスペースが追加されただけのファイルも多く、それを除くともっと少なくなります。本リリースでの大きな変更はImportant Notesの中でもTypescript関連の変更が個人的には大きいと思います。Nuxt Typescriptの導入やMigrationはリリースノートにあるページの Setup、Migration from Nuxt 2.8 を見れば簡単に行えます。(本記事の一番下でも試しにやってみました。) リリースノート nuxtjs.orgDue to a known problem (webpack/webpack#8656, #4869, #4839) users of npm should either remove package-lock.json and reinstall before upgrade or use npm update acorn –depth 20 && npm dedupe after upgrading to 2.4.0. users should have no problems but removing yarn.lock still recommended before the upgrade process. Diff v2.8.1からv2.9.2のDiffをつくってみました。 v2.9.2 diff by taisa831 · Pull Request #1 · taisa831/nuxt.jsTypes of changes Bug fix (a non-breaking change which fixes an issue) New feature (a non-breaking change which adds functionality) Breaking change (fix or feature that would cause existing functionality to change) Description …