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

サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩

 サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩

Yu Watanabe

July 25, 2017
Tweet

More Decks by Yu Watanabe

Other Decks in Technology

Transcript

  1. サーバーサイドな人が
    フロントエンド技術と仲良くする
    はじめの一歩
    Webエンジニア勉強会#03
    at ニュー新橋コワーキング
    2017-10-07

    View Slide

  2. WHO ?
    ● わたなべ
    ● (株)ビズリーチ
    ● twitter: @nabedge
    ● github: nabedge
    ● http://www.slideshare.net/nabedg
    e/presentations
    2

    View Slide

  3. まずアンケートにお答えください
    ● npmコマンドを日常的に使っている
    ● package.jsonを自作したことがある
    ● TypeScriptを書くことが普段よくある
    ● 私はフロントエンドエンジニアである
    ● 普段使っている開発言語 ?
    3

    View Slide

  4. JavaScript Cowboy
    Babel
    ES5
    ES6
    webpack
    Node.js
    npm
    yarn
    bower
    gulp
    4

    View Slide

  5. 5

    View Slide

  6. 知人からのお便り
    6

    View Slide

  7. それでも真正面から
    立ち向かうと
    こうなる。
    7

    View Slide

  8. 直近、ある事業をSPAからシンプルWebに
    3ヶ月かけて戻した結果、ひとつの改善チケット
    に必要なリソースが1/3〜1/4ほどに低下した。
    また、フロントエンドとサーバーサイドのタスクの
    割り振りも正常化し、財務視点から状況を見る
    と、明らかに改善した。技術者としてそれがよ
    かったのか、感情的な部分ではもちろん悩まし
    いところはあるけれど(以下略)
    https://www.facebook.com/shin.takeuchi/posts/1655952811104934
    8

    View Slide

  9. 本日の趣旨
    ● 生産性悪いから、学習コスト高いから、やめとく
    ○ 技術者が技術の進化に背を向けてどうする
    ● 便利なものは便利なんだから、うまく使うほうがおトク。
    ● 多少カッコ悪くても、入りやすい形からやってみてはどうだろ
    う?
    9

    View Slide

  10. 作戦
    1. 慣れた基本構成(Java + SpringMVC + Thymeleaf)で
    普通にWebアプリケーション
    2. node-sassでCSSフレームワークを
    カスタムして見た目カッコよくドヤァ
    3. TypeScriptを真面目に勉強できる状態に持ち込む
    4. jQueryを混ぜてもええやん。
    10

    View Slide

  11. はじめよう
    11

    View Slide

  12. 作戦
    1. 慣れた基本構成(Java + SpringMVC + Thymeleaf)で
    普通にWebアプリケーション
    2. node-sassでCSSフレームワークをカスタムして
    見た目カッコよくドヤ顔
    3. TypeScriptを真面目に勉強できる状態に持ち込む
    4. jQueryを混ぜてもええやん。
    12

    View Slide

  13. 13

    View Slide

  14. 14

    View Slide

  15. コントローラクラスとそのテンプレートを一つ作る 15

    View Slide

  16. 16

    View Slide

  17. 17

    View Slide

  18. 作戦
    1. 慣れた基本構成(Java + SpringMVC + Thymeleaf)で
    普通にWebアプリケーション
    2. node-sassでCSSフレームワークをカスタムして
    見た目カッコよくドヤ顔
    3. TypeScriptを真面目に勉強できる状態に持ち込む
    4. jQueryを混ぜてもええやん。
    18

    View Slide

  19. curl -o-
    https://raw.githubusercontent.com/creationix/nvm/v0.33.4/i
    nstall.sh | bash
    nvm install --lts=boron
    node/npmコマンドのインストール 19

    View Slide

  20. くわしくは
    nodebrewでもいいけど
    20

    View Slide

  21. 今ドキのCSSフレームワークを適当に探す 21

    View Slide

  22. PICNIC キミに決めた! 22

    View Slide

  23. 1. npm init
    package.jsonが
    自動生成される
    2. npm install -D picnic
    package.jsonに
    picnicが書き込まれる
    3. npm install -g node-sass
    node-sassの準備
    このCSSを直接
    使うのではなく
    ここを使ってcssを
    ビルドする
    23

    View Slide

  24. package.jsonに細工する
    { // (途中省略)
    "scripts": {
    "sass": "node-sass src/main/scss/foo.scss
    src/main/resources/static/dist/css/picnic-custom.css
    --output-style compressed",
    "build": "npm run sass"
    },
    "devDependencies": {
    "picnic": "^6.4.0"
    }
    }
    24

    View Slide

  25. カスタマイズ用のsassファイルを作っておく 25

    View Slide

  26. npmコマンドでcssを生成する
    $ npm run build
    > [email protected] sass /Users/nabedge/tmp/foo
    > node-sass src/main/scss/foo.scss
    src/main/resources/static/dist/css/picnic-custom.css
    --output-style compressed
    Rendering Complete, saving .css file...
    Wrote CSS to
    /Users/nabedge/tmp/foo/src/main/resources/static/dist/css/pic
    nic-custom.css
    26

    View Slide

  27. できたcssをthymleafのテンプレートにセット 27

    View Slide

  28. ビフォーアフター
    マージン調整してないのはご愛嬌
    28

    View Slide

  29. ここまでのまとめ
    1. React ? Angular ? Vue.js ? 悪くはないけど...
    2. 慣れたサーバーサイドに少しだけ付け加えるところから
    始めては?
    3. まずはCSSの管理にsassやnpmを導入することも
    立派なフロントエンド技術の導入。
    4. 見た目から入ってドヤ顔。モチベーション的に大切。
    29

    View Slide

  30. 作戦
    1. 慣れた基本構成(Java + SpringMVC + Thymeleaf)で
    普通にWebアプリケーション
    2. node-sassでCSSフレームワークをカスタムして
    見た目カッコよくドヤ顔
    3. TypeScriptを真面目に勉強できる状態に持ち込む
    4. jQueryを混ぜてもええやん
    30

    View Slide

  31. 31

    View Slide

  32. TypeScript, WebPack, jQueryの導入準備
    npm install -g webpack
    npm install -D webpack [email protected] ts-loader
    npm install -D [email protected] @types/[email protected]
    32

    View Slide

  33. tsconfig.json を作る 33

    View Slide

  34. webpack.config.js を作る 34

    View Slide

  35. “npm run build” だけでsassとTypeScriptコンパイルを同時に実行できるように 35

    View Slide

  36. TypeScriptを書く
    TypeScriptなのに未だに
    jQueryなのぉ?
    とかいうJSカウボーイの
    マサカリは気にしない
    36

    View Slide

  37. 37

    View Slide

  38. npm run build
    38

    View Slide

  39. 完成! 39

    View Slide

  40. 使ったコマンド、作ったファイル
    curl -o- https://長いので割愛/nvm/v0.33.4/install.sh | bash
    nvm install --lts=boron
    npm init
    npm install -D picnic
    npm install -g node-sass
    npm install -g webpack
    npm install -D webpack [email protected] ts-loader
    npm install -D [email protected] @types/[email protected]
    npm run build
    40

    View Slide

  41. 使ったコマンド、作ったファイル
    package.json
    tsconfig.json
    webpack.config.json
    foo.scss
    app.ts
    SpringBoot(MVC)のコントローラクラス
    Thymeleafのhtmlテンプレート
    41

    View Slide

  42. 「帰ったらやってみようかな」
    という気持ちになってもらえたら
    幸いです。
    ありがとうございました。
    42

    View Slide