taisablog

taisa's engineer blog

JavaScript

「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をさせてもらった。

slideshipって何?

markdownで手軽にスライドがつくれちゃうサービスでコードシンタックスハイライトを自動でやってくれたりPDFに変換してくれたりする。今回LTするにあたって前日までラフなマークダウン文章しかなかったけど早くスライド作らなきゃっていう焦りがなかったので気分的に非常に楽だった。
slideship.com
slideship

トークスライド (すべてslideshipでできてる)

Vue.js 効果的だった事例から見る利点と特徴

橋本 安司さん
@yellow844
Vue.js 効果的だったじれいから見る利点と特徴
これが大事↓
「単一ファイルコンポーネントで『テンプレート、ロジック、スタイル』の関心を分離させる記述になっており、ファイル分割してより疎な状態に出来る。更にテンプレートやスタイルのテンプレート言語・CSSプリプロセッサを選択できる。」

ReactVR でつくるサーバ連動型インタラクティブ VR

原 一浩さん
@kara_d
ReactVR でつくるサーバ連動型インタラクティブ VR
「s7は爆発の危険がある」に笑った。

React SPA における OGP への挑戦

池内 孝啓
@iktakahiro
React SPA における OGP への挑戦
サーバサイドレンダリングはしないぞ!っていうこだわりが感じられた

LT

PATENTS問題とfast-asyncについて

石井 直矢さん
@kaidempa
PATENTS問題とfast-asyncについて
OSSのライセンスのお話

フロントエンド速習コース

@taisa831
フロントエンド速習コース
3ヶ月でフロントエンドを一気にキャッチアップした時にやったことを紹介した。

書籍プレゼント企画

書籍プレゼント企画


こちらの書籍の監訳者の吉田 真吾さん
@yoshidashingo
じゃんけん大会で書籍はゲットできなかったけどこの書籍はオライリーの電子版で購入した。タイトル見て発売したら速攻買おうと思ってたけどReal World Httpに先に手出してたので買えてなかった。

RxJSコトハジメ

@massa142
RxJSコトハジメ
RxJS良さそう。マーブルテスト楽しそう。

勉強会風景




まとめ

ちょうどフロントエンドのキャッチアップをしていたのでとても良い機会になった。トーク内容もいろいろあってとても楽しめ。次回も楽しみ。

-JavaScript
-, , , ,

執筆者:

関連記事

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

APIを使ったTODOリストをVue.jsで作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTODOリストのAPIを作ってみた」を利用します。CORSを全て許可しているのでどこからでも叩けるようになっています。 できたもの できたものはこちらです。http://vuejs.taisablog.com/todo APIのエンドポイント APIのエンドポイントは以下としました。 URL http://gin.taisablog.com/api/v1/ GET /todo // 一覧表示 POST /todo // 新規作成 GET /todo/:id // 編集画面表示 PUT /todo/:id // 編集(今回未使用) DELETE /todo/:id // 削除 TODOリストの処理 プロジェクトはvue-cliで作成し、APIはaxiosを利用しました。componentsにTodo.vueファイルを作成しそこにすべての処理を書いています。 インポート import axios from ‘axios’ const NOT_STARTED = 1 // 未対応 const STARTED = 2 // 対応中 const FINISHED = 3 // 完了 data function name: “Todo”, data() { return { todoList: [], inputField: ”, isActive: false, baseUrl: ‘http://gin.taisablog.com/api/v1/’ } }, created function created() { this.getTodo() }, methods : 一覧を取得する async getTodo() { try { let response = await axios.get(this.baseUrl + ‘todo’) this.todoList = response.data } catch (e) { console.log(e) …

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 …

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

『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 …

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 …

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 …