Help us understand the problem. What is going on with this article?

Frontend Meetup vol.1に行ってきた

More than 3 years have passed since last update.

株式会社FiNCで主催された「Frontend Meetup vol.1 - SPAを語り尽くす会!」に行ってきました。
テーマは「Single Page Application(SPA)」ということで、実際に業務でReactやAngularを使ってSPAを取り入れている方々の話を伺いました。スピーカーの方々が資料をあげてくれているので、細かい内容はそちらに任せて内容の抜粋と個人的な所感を記しておきます。

React/Reduxで半年くらい真面目にSPAするとわかること

@takayuki_shmz (株式会社FiNC)

発表スライド

ReactでSPAをやるときはコレに気をつけた方がいい

  • 正しいコンポーネント思考
    コンポーネントは、状態をもたない再利用性の高いDumpComponentと、それとactionなどをつなぐ為の状態をもつSmartComponentの意識をもつこと。とはいってもStateを内部で持った方が便利なコンポーネントもあるので、柔軟に。
    CSSとコンポーネントは1対1 ← 割とよく聞く話。CSSの扱いはCSSinJSよりは、CSS(scss)でコンポーネントごとに名前空間を切って管理するのがベストプラクティスっぽい。

  • this.context
    恥ずかしながら初めて知りました。親コンポーネントの値を子・孫にバケツリレーしなくても渡せずにグローバル的な参照ができるものらしい。
    公式的には非推奨な機能だけども、他言語化とかGAタグ埋め込みとかアプリケーション全体で扱うようなものには非常に便利。

  • エンティティと型
    APIから受け取った値はきちんとエンティティに入れて扱うことで、可読性も上がるし、エンティティでエラーチェックしておけば後の処理もシンプルになる。
    エンティティはUI単位ではなく概念として最小単位で作るのが肝。

革命と秩序とSPA

@joe_re (freee株式会社)

発表スライド

  • flux-utilsという選択
    既存実装のあるところにSingleStoreであるReduxでは、新機能のところだけfluxにしたいというのが合わない。そこで選択したのがflux-utils。flux-utilsはfluxでのStoreとViewのみをカバーしたシンプルなものなので部分適用がやりやすい。

  • flowtypeで型チェック
    各層のIFが乱雑になってきたので型チェックツールのflowtypeを入れたそう。JSに型は必要なのか議論はあるが、チーム開発では必須。←同意

Angularと心中する

@Quramy (株式会社WACUL)

発表スライド

Angular1.5およびAngulr2の話

  • Component
    Angular1.5からcomponentが使えるようになったので、directiveは利用せずにcomponentを使うようになった

  • css用のクラス名が長くなる問題
    コンポーネントとcssは1対1で扱うようにして、CSSの名前空間はBEMの設計に基づいて行った。ところが、クラス名がとにかく長いのが辛い。
    ということで独自directive ukyo/angular-simple-bemを作って、クラス名を自動的に展開したクラス名に書き換えるようにして解決したそう。

  • 自動生成
    Compoentnはgulp + inquirer + mustacheを使ってscaffoldタスクで自動生成。

  • エラーまわり
    ExceptionHandlerでキャッチした例外はRollbarへ投げて管理

コンテンツ配信とSPA

@konpyu (Piece of cake,Inc)

発表スライド

Angular1.3のSPAを改善した話

  • ロードが遅い問題
    SPAにつきまとうInitialLoadがどうしても遅くなってしまう問題。
    DOM数を減らす、cacheを使うことで30%くらい早くなったとのこと。

  • 理想のコンテンツ配信
    コンポーネント化 + コンポーネントごとSSR + コンポーンネントの遅延ロード + HTTP/2 が理想の形ではないか。
    遅延ロード:できたところから表示されるので体感的に早く感じる
    SSR(サーバーサイドレンダリング): サーバー側でレンダリングするのでJSの読み込みが減る
    HTTP/2: assetを並列で読み込める。CroudFrontで簡単に移行できる。

空divだけが表示されてから中身が表示するのって、やっぱりカッコ悪いからSSRでページまるっと表示するべきという話を聞いたことがあったり、SSR自体が遅いから実用は厳しい、という話を聞いたりもするので、ベストプラクティスは今の段階では難しそう

以下、LT

「SPAと覚悟」

@teppeis (サイボウズ)

発表スライド

「SPAって事は、あなたは覚悟して来てる人ですよね?」
SPAであることはブラウザがやってくれる事を自前で実装しなければいけない。例えば、画面遷移のヒストリー管理とか、遷移後のスクロール位置とか。流行りに乗ってSPAにする前にSPAのデメリットを踏まえたで選択することを改めて考えさせられて、とても刺さりました。

「1pxをめぐる戦い」

@yoshiko_pg

発表スライド

リストボックスの一番下のボーダーをどうやって処理するかという話。CSSを片手間でやってるマンには、とても為になる内容でこうゆうのもっと知りたい。

「SPAでのセッション管理とセキュリティ」

@uryyyyyyy

発表スライド

Webでのセキュリティ周りの話。セキュリティ疎いのでこういうのちゃんとやらんとなぁ、と遠い目をしながら聴いてました。知っておく事は大事。

「Angular2でつまづいたところ

@nacika_ins

発表スライド

Angular2でサービスを作った話。ハマリどころとして認証情報をどこで持つかというところで、SharedServieを使うという解答。

さいごに

会場のFiNCさんは、会の途中にさわやかな体操のお兄さんが登場してウェルネスタイムとしてストレッチを教えてくれたり、オフィスに立派なキッチンがあって管理栄養士さんがご飯作ってくれたり、とても素敵な環境でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away