$30 off During Our Annual Pro Sale. View Details »

サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

ニフティ株式会社

July 21, 2023
Tweet

More Decks by ニフティ株式会社

Other Decks in Programming

Transcript

  1. サービスにSvelteを
    採用した経緯とその理由
    三社合同フロントエンド勉強会
    By たけろいど

    View Slide

  2. Hello!

    View Slide

  3. ニフティからきました
    たけろいどです

    View Slide

  4. お客様に最も近く、
    感動されるISPへ

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. Svelteとは?
    コンポーネントをコンパイルすることで、
    パフォーマンスの向上とコードのサイズを
    小さくしている。
    直感的かつシンプルな構文が特徴で、学
    習曲線が緩やか。

    View Slide

  10. 早速開発!

    View Slide

  11. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる

    View Slide

  12. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる

    View Slide

  13. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる

    View Slide

  14. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる

    View Slide

  15. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる

    View Slide

  16. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる

    View Slide

  17. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる

    View Slide

  18. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる

    View Slide

  19. お客様への
    価値提供スピード低下

    View Slide

  20. よりよいUXを提供するために
    よりよいUIが求められる

    View Slide

  21. WEB開発へのコストは
    増加傾向

    View Slide

  22. Jinja2はPythonでつかえる
    テンプレートエンジン

    View Slide

  23. 一方で
    WEB開発の王道は
    JavaScript

    View Slide

  24. エコシステムが使えないため
    開発者の負担増加

    View Slide

  25. 加えて
    Flask+Jinja2は
    コンポーネント指向でない

    View Slide

  26. E2Eテストが増え
    テストに対するコストが増加

    View Slide

  27. 提供価値を良くしていくには
    時間がかかる
    エコシステムやテストを使い
    スピード・品質を向上

    View Slide

  28. FlaskとJinja2がたちはだかった!
    > たたかう
    にげる
    モダンフロントエンドで
    価値提供スピードをあげる

    View Slide

  29. なぜSvelte
    なのか

    View Slide

  30. お客様に最も近く、
    感動されるISPへ

    View Slide

  31. お客様に寄り添い
    わかりやすいUIを提供する

    View Slide

  32. Svelteのモットーは
    シンプルであること

    View Slide

  33. Svelteのモットーは
    シンプルであること

    View Slide

  34. Jinja2(テンプレートのみ抜粋)




    Hello, {{ name }}!



    Hello, {{ name }}!



    View Slide

  35. Svelte
    <br/>let name = 'World';<br/>

    Hello {name}!

    View Slide

  36. React
    import React, { useState } from 'react';
    function CounterButton() {
    const [count, setCount] = useState(0);
    function handleClick() {
    setCount(count + 1);
    }
    return (

    Clicked {count} {count === 1 ? 'time' : 'times'}

    );
    }
    export default CounterButton;

    View Slide

  37. Svelte
    <br/>let count = 0;<br/>function handleClick() {<br/>count += 1;<br/>}<br/>

    Clicked {count} {count === 1 ? 'time' : 'times'}

    View Slide

  38. 関わる全員に
    優しいフレームワーク
    と感じた

    View Slide

  39. 関わる全員に
    優しいフレームワーク
    と感じた

    View Slide

  40. 課題

    View Slide

  41. JavaScript
    だれが作るの問題

    View Slide

  42. デザイナー エンジニア

    View Slide

  43. デザインシステムを
    みんなで学ぶ会

    View Slide

  44. お客様に最も近く、
    感動されるISPへ

    View Slide