見出し画像

[メモ]初夏のJavaScript祭 in メンバーズキャリア

2019/06/01に開催された初夏のJavaScript祭 in メンバーズキャリアで聞いてきたことの備忘録

1.jQueryからElmまで

スライド

・jQueryなどでのDOM操作は人間には複雑すぎる
・AngularJSやVue.jsなどを使用することで、状態と画面の分離が可能に
・処理を修正したときにScopeの依存するビジネスロジックのみテストすれば良い

大規模化するフロントエンドの苦しみ
・各コンポーネント間でのデータの受け渡しなど
・状態と画面は分離されたが、イベント発火が数珠繋ぎになってアプリケーションの変化が予測しづらくなる

Fluxアーキテクチャーの発見
・関数と予測可能性
・純粋な関数をなるべく使う
・コンポーネントに想定外の依存を持たせない
・React Functional Component

Elm
・全ての変数がイミュータブル
・状態管理、ビューをすべて関数として扱う
・アプリケーションのアーキテクチャが決まっている(TEA)

イミュータブル
・イベントの積み上げ
・最新の状態というのは変更の積み上げから計算されたものになる
・大規模なアプリケーションを作る上での意外性を排除
・フロントエンドは関数

フロントエンドの進化
・アーキテクチャ上のルールと制約の進化
・フロントエンドアプリケーションの大規模化
・アプリケーションを安全に作るための「ルール」のようなものが登場

2.SemanticUIを使って工数をかけずにサービス開発

スライド

・SemanticUI:CSSフレームワーク
・SemanticUI、Bootstrap、BULMA、Material Designなど様々なCSSフレームワークが存在する

SemanticUI
・なんでも揃っているフレームワーク
・ファイルサイズは比較的大きい
・配信の仕方を考える必要がある
・コンポーネントごとにCSSは分かれているので、必要な部分のみ読み込むことも可能
・jQuery必須ではなく、Vue、Reactなどでも使える

Fomantic UI
・Semantic UIから作られたCSSフレームワークで、現在はこちらが更新されている
・16分割でカラムを割る
・Datepickerのカスタマイズが容易
・Shape:簡単にオブジェクトを回転させることができる

アプリ開発のフロー
・紙にイメージ
・モック(HTML、CSS)
・開発環境構築
・製造
・リリース

・レイアウト、情報設計はざっくりと行い、実際にモックを作ると良い
・マークアップはフレームワークを使い、時間をかけずに製造に持っていくのが良さそう

・Firebaseなどのサーバレス環境を使うと自作のサービスが作りやすくなる

・フルスクラッチでCSSを書けるのが一番良い
・ただ、CSSは人類には難しいので、プロダクトに適したCSSフレームワークを使うのも良い

3.Nuxt.js × Atomic Designのサービスデザインフロー

スライド

Nuxt.js
・Vue.jsのラッパー

Atomic Design
・デザイン手法
・一番小さいパーツから作り、一つのページを作る考え方
・ZOZO、noteなどAtomic Designを採用しているサービスが増えてきている

Nuxt.js × Atomic Design
・施策の実施が驚異的に早くなる
・統一感のあるUI/UXを提供できる
・スピードとクオリティの両立
・コンポーネントが出来ていれば、組み合わせて作るだけなので新しくデザインを作る必要がなくなる

デザインシステム
・ブランドイメージやコンポーネントライブラリなど
・コンポーネントライブラリから各施策が利用される
・デザイナーとフロントエンドエンジニアはこれをメンテナンスする

・単一ファイルコンポーネント:Nuxt.js
・コンポーネントの分割規則:Atomic Design
・コンポーネントライブラリ:StoryBook

・どのようにコンポーネントを分割するかを考えるのが大事

Nuxtのディレクトリ構成
・Components
 |-Atoms
 |-Molecules
 |-Organisms
  ・ストアに依存
  ・ビジネスロジック

・命名
・Vueはアッパーキャメルケースで命名
・2単語以上
・Atomsには接頭語でAtomsをつけるなど

list-item問題
・外側がOrganismsで一つ一つのアイテムがMolecules

Formコンポーネントの多階層化
・データのやり取りが大変

Storeの使いどころ
・Pagesから呼ぶ
・なるべく上位のコンポーネントで処理を行う
・下層はただ表示するだけのコンポーネントなイメージ

インターフェース
・propsのtypesをしっかり書く
・TypeScriptも使える
・nuxt-property-decorator

立ち上げ時のワークフロー
・ワイヤフレーム
・コンポーネントデザイン、コンポーネント実装
・コンポーネント確認

グロースフェーズのワークフロー
・コンポーネント実装
・API連携など

・StoryBookをチーム全員が見れるようにする
・HTMLとしてビルドできるのでS3に上げるなど

以下のようなプロジェクトでは有用
・短期より中長期
・複数ページ、部品が増える
・デザインの再現度より共通化を優先できる

4.Gridsome で作る JAMStack な サーバーレス Web Front

スライド

JAMStack
・新しいアーキテクチャ、考え方
・JavaScript、API、マークアップ

・クライアントサイドのJS
・再利用可能なAPI
・構築済みのマークアップ SSRではない

・ビルドツールにデータを投げ、HTMLを生成し、CDNに配置する
・動作が高速
・出来上がったHTMLを返すだけ
・データの書き換えはクライアントサイドからAPI呼び出し
・攻撃対象をCDNのみに局所化できる

・静的サイトジェネレータを使用
・Gatsby
・Hexo
・VuePress
・Gridsome
・Next.js
・Nuxt.js

・静的サイトジェネレータはNode.js製が多い

Nuxtで作った場合
・ローカルでHTML生成
・S3に配置
・CDNで配信

Gridsomeで作った場合
・ローカルでHTML生成
・S3に配置
・CDNで配信

・CircleCIなどを使用し、Githubにコミットしたら自動でデプロイされるようにしておくと楽

Gridsome
・Vue.jsベース
・高速で動くページを生成可能
・メジャーリリースは秋ごろ
・データ管理はGraphQL
・あらゆるデータを静的化して、様々な環境へデプロイできる

・ローカル開発が簡単
・デフォルトで高速
・PWAレディ
・JAMStackを構築
・シンプルで安全なデプロイ
・SEOフレンドリー

・Node.js 8.3以降で使える
・Gridsome cliを利用

・GraphQLはpage-queryタグ内に記述

JAMStackの可能性
・情報発信サイトなどは高速なページが作れる
・Webアプリなど動的なサイトは外側を静的サイトジェネレータで作れる
・動的な部分のみAPIで実装

・SEO/OGP重視で変化の激しいコンテンツには向かない

・JAMStackはウェブサイトやアプリを構築するための新しい手法
・Gridsomeをはじめ、JavaScriptはJAMStackに強い

5.広がるSPA技術の活用法(SSRを検討する際にSSGを検討しませんか?)

スライド

SPA
・Scope付きのCSS
・コンポーネント志向なviewの組み立て

課題
・レンダリングまで空白ページが表示される
・OGPを動的に変更できない
・SEO上不利
・JSが読み込まれてからレンダリングが始まる
・今までのアプリでは当たり前だったことが単独では達成できない

・選択肢としてSSRが上がる
・サーバ上でレンダリングして、結果をHTMLとして返す
・vue-server-renderer

SSRしつつSPAとして作りたい
・ユニバーサルなSPA
・Next、Nuxtなどで整備してくれる
・初期表示はサーバから返したHTMLを表示

SSRは銀の弾丸ではない
・サーバが必要
・CPU負荷が大きく大量の処理を裁けない
・サーバとクライアントでの処理の出し分けが必須

静的サイトジェネレータでプリレンダリング
・事前にSSRを行なって静的ファイル化しておけば、本番では配信するだけでOKというアプローチ
・Gridsome、Gatsby、Next、Nuxt
・ビルドサーバサイドレンダリング

・HTMLを事前に生成しておくか、アクセス時に生成するかの違い

プリレンダリングの利点
・考えることが減る
・サーバ不要
・キャッシュの削除を考えなくてよい
・コストが低い

欠点
・コンテンツを更新するたびにビルドする必要がある
・ページ数が増えるたびにビルド時間が増える
・Goなど多言語の静的サイトジェネレータと比べると遅い

・コンテンツの更新を瞬時に反映させたい場合はSSR

・どちらかに振り切る必要はない
・プリレンダリングでもアプリケーションになりうる
・すべてのページにプリレンダリングを適用する必要はない

Next.js on Firebase
・小規模なSPA
・Cloud Functions
・パスによって静的、動的レンダリングが可能

・プリレンダリングで要件が達成できるならオススメ

6.JavaScript初心者が紹介するデバイスやアプリで楽しむIoT

・Alexa
・IFTTT
・特定のフレーズを用意

・Googleアシスタント
・表記ゆれを考慮して4つぐらいフレーズを用意

GROVEシステム
・モジュール接続・利用を簡単にしてくれる仕組み

・Node.jsでIFTTT経由でLINEにメッセージを送る

・IFTTTにWebHookの受け口をつくる
・Line Notify

obniz
・ブラウザから開発できるボード
・プログラムから入出力を変えられる


この記事が気に入ったらサポートをしてみませんか?