breakthrough point of web engineer

Transcript

1. ϓϩμΫτίʔυͰޠΔʂ ΤϯδχΞͷ੒௕ͷ ϒϨʔΫεϧʔϙΠϯτ CAMPHOR×LIVESENSE WEBαʔϏεͷ։ൃɾӡ༻ʹ͓͚ΔσʔλΤϯδχΞϦϯά 2018/06/23(౔) @TCHIKUBA

2. ϓϩμΫτίʔυͰޠΔʂ ΤϯδχΞͷ੒௕ͷϒϨʔΫεϧʔϙΠϯτ PROFILE ▸ 1978.11 ෱Ԭݝੜ·Ε ▸ 2002.03 ౦ژ޻ۀେֶཧֶ෦ଔ ▸

   2004.08 ϑϦʔϥϯεΤϯδχΞ ▸ 2011.08 ৽نࣄۀ։ൃPM ▸ 2013.05 Ϧϒηϯεೖࣾ ▸ 2015.04 ৽نࣄۀ্ཱͪ͛ ▸ 2018.06 ΤϯδχΞϦϯάϚωʔδϟʔʗ σʔλΤϯδχΞ
3. None
4. None

5. ϓϩμΫτίʔυͰޠΔʂ ΤϯδχΞͷ੒௕ͷϒϨʔΫεϧʔϙΠϯτ AGENDA ▸ Ruby on RailsΛߏ੒͢Δٕज़ ▸ RailsͰ࣮ફతͳwebΞϓϦέʔγϣϯ։ൃ͢Δצॴ ▸

   IESHILͷࣄྫ ▸ RailsϓϩμΫγϣϯίʔυ ▸ ։ൃϓϩηε ▸ σʔλΤϯδχΞϦϯά

6. RUBY ON RAILSΛ ߏ੒͢Δٕज़

7. RUBY ON RAILSΛߏ੒͢Δٕज़ ABOUT RUBY ON RAILS ▸ ఻౷తͳMVCϑϨʔϜϫʔΫ ▸

   RESTfulͳϧʔςΟϯά ▸ ActiveRecordʢڧྗͳORMʣ ▸ ϚΠάϨʔγϣϯʢDB؅ཧʣ ▸ ։ൃϞʔυʢdevelopmentʗtestʗproductionʣ ▸ ϑϩϯτΤϯυ ▸ Asset Pipeline ▸ SCSS ▸ CoffeeScript ▸ WebpackerʢRails 5.1ʙʣ ▸ RubyGemsΤίγεςϜ ▸ BDD

8. ఻౷తͳ MVCϑϨʔϜϫʔΫ

9. RUBY ON RAILSΛߏ੒͢Δٕज़ RESTFULͳROUTING ▸ bin/rails g scaffold User name:string

   email:string ▸ bin/rails routes ▸ config/routes.rb ▸ resources :users

10. RUBY ON RAILSΛߏ੒͢Δٕज़ ACTIVE RECORD ▸ app/models/application_record.rb ▸ app/models/user.rb ▸

    User.all ▸ User.find(1) ▸ User.take.name ▸ User.take.email

11. RUBY ON RAILSΛߏ੒͢Δٕज़ ϚΠάϨʔγϣϯ ▸ db/migrate/20180623163000_create_users.rb ▸ bin/rails db:migrate ▸

    bin/rails db:rollback

12. RUBY ON RAILSΛߏ੒͢Δٕज़ ։ൃϞʔυ ▸ RAILS_ENV ▸ bin/rails s -e

    [mode name] ▸ config/environments/ ▸ development.rb ▸ production.rb ▸ test.rb

13. FRONTEND

14. RUBY ON RAILSΛߏ੒͢Δٕज़ ASSET PIPELINE ▸ RubyGems ▸ sprockets-railsʢΞηοτίϯύΠϧʣ ▸

    sass-railsʢSCSSʣ ▸ uglifierʢJSϑΝΠϧѹॖʣ ▸ coffee-railsʢJS→CoffeeScriptίϯύΠϧʣ ▸ bin/rails assets:precompile (for production) ▸ ϑΟϯΨʔϓϦϯτ ▸ application-908e25f4bf641868d8683022a5b62f54.css

15. RUBY ON RAILSΛߏ੒͢Δٕज़ SCSS ▸ RubyGems ▸ sass-rails ▸ app/assets/stylesheets/application.css

16. RUBY ON RAILSΛߏ੒͢Δٕज़ COFFEE SCRIPT ▸ RubyGems ▸ coffee-rails ▸

    app/assets/javascripts/application.js

17. RUBY ON RAILSΛߏ੒͢Δٕज़ WEBPACKER (RAILS 5.1~) ▸ RubyGems ▸ webpacker

    ▸ bin/rails new myapp --webpack ▸ bin/rails webpacker:install ▸ app/views/layouts/application.html.erb ▸ bin/webpack-dev-server
18. None

19. มԽͷ଎͍ ϑϩϯτΤϯυο…!!

20. None

21. ๛෋ͳ RUBYGEMS

22. RUBY ON RAILSΛߏ੒͢Δٕज़ RUBY GEMS ▸ bin/bundle inst —path vendor/bundle

    -j4 GEMืूதʂ

23. RUBY ON RAILSΛߏ੒͢Δٕज़ RUBY GEMS (ϚοϋόΠτ 2006.02~) ▸ grep 'gem

    ' Gemfile | wc -l ▸ 74 ※ ▸ ʲFYIʳgrep create_table db/schema.rb | wc -l ▸ 363

24. RUBY ON RAILSΛߏ੒͢Δٕज़ RUBY GEMS (ब׆ձٞ 2015.04~) ▸ grep 'gem

    ' Gemfile | wc -l ▸ 71 ▸ ʲFYIʳgrep create_table db/schema.rb | wc -l ▸ 226

25. RUBY ON RAILSΛߏ੒͢Δٕज़ RUBY GEMS (IESHIL 2015.08~) ▸ grep 'gem

    ' Gemfile | wc -l ▸ 113 ▸ ʲFYIʳgrep create_table db/schema.rb | wc -l ▸ 175

26. RUBY ON RAILSΛߏ੒͢Δٕज़ RUBY GEMS (JOB-DRAFT 2015.11~) ▸ grep 'gem

    ' Gemfile | wc -l ▸ 119 ▸ ʲFYIʳgrep create_table db/schema.rb | wc -l ▸ 250

27. ※஫ ϞϊϦγοΫͳ RAILSࣄྫ

28. BDD

29. RUBY ON RAILSΛߏ੒͢Δٕज़ BDD (ৼ෣ۦಈ։ൃ) ▸ Minitest (Default) ▸ bin/rails

    test ▸ Rspec (RubyGems) ▸ bin/rails g rspec:install ▸ bin/bundle binstubs rspec-core ▸ bin/rspec

30. ςετίʔυ͸ ҭͯΔ΋ͷ

31. جຊ͜͜·Ͱ

32. COFFEE BREAK

33. [COFFEE BREAK] RAILSॳ৺ऀ͋Δ͋Δ Ͳ͔͜ΒͲ͜·Ͱ͕RAILS WAYͳͷ͔ʁ ▸ ෳ਺ܗͱ୯਺ܗͷҧ͍ ▸ Routing →

    resources :usersʢෳ਺ܗʣ ▸ Controller → class UsersControllerʢෳ਺ܗʣ ▸ Model → class Userʢ୯਺ܗʣ ▸ Table → usersςʔϒϧʢෳ਺ܗʣ ▸ View → app/views/usersʢෳ਺ܗʣ

34. [COFFEE BREAK] RAILSॳ৺ऀ͋Δ͋Δ Ͳ͔͜ΒͲ͜·Ͱ͕RAILS WAYͳͷ͔ʁ ▸ ύʔγϟϧͷ໋໊ ▸ app/views/users/index.html.erb ▸

    render ‘layouts/header’ ▸ app/views/layouts/_header.html.erb ▸ FAQ ▸ Missing TemplateౖͬͯΒΕΔΜͰ͚͢Ͳ… ▸ ͳΜͰΞϯμʔείΞ͕ඞཁͳΜͰ͔͢ʁ

35. A: THIS IS THE RAILS WAY!! ※ΞΫγϣϯ͔Βݺ͹ΕΔςϯϓϨʔτͱύʔγϟϧΛ۠ผ͢ΔͨΊ

36. [COFFEE BREAK] RAILSॳ৺ऀ͋Δ͋Δ Ͳ͔͜ΒͲ͜·Ͱ͕RAILS WAYͳͷ͔ʁ ▸ webΞϓϦέʔγϣϯͷجૅͷཧղෆ଍ ▸ <%= form_for(@article)

    do |f| %> ▸ <%= f.text_field :title, title: ‘title of article’ %> ▸ <% end %>

37. [COFFEE BREAK] RAILSॳ৺ऀ͋Δ͋Δ Ͳ͔͜ΒͲ͜·Ͱ͕RAILS WAYͳͷ͔ʁ ▸ RubyͷγϯλοΫε͕Θ͔Βͳ͍ ▸ <% @users.each

    do |user| %> ▸ <%= user.name %> ▸ <% end %>

38. COFFEE BREAK ͜͜·Ͱ☕

39. RUBY ON RAILSΛߏ੒͢Δٕज़ RUBY ON RAILSͷ࢖͍ॴ ▸ webΞϓϦέʔγϣϯͷϓϩτλΠ ϓΛૉૣ͘࡞Δ ▸

    ϑϩϯτΤϯυ(HTMLʗCSSʗ JavaScript)΋αʔόʔαΠυ(Ruby) ΋1ਓͰαΫοͱ࡞Δ https://logmi.jp/6034

40. ࣮͸ νʔϜ։ൃʹ ޲͍ͯͳ͍!?

41. RAILSͰ࣮ફతͳWEBΞϓϦ έʔγϣϯ։ൃ͢Δצॴ ͔͜͜Β͕ຊ୊

42. RAILSͰ࣮ફతͳWEBΞϓϦέʔγϣϯ։ൃ͢Δצॴ ABOUT צॴ ▸ αʔόʔαΠυ ▸ ؀ڥߏங ▸ RubyGemsબఆ ▸

    MVCҎ֎ͷϨΠϠʔ ▸ ϑϩϯτΤϯυ ▸ Webpacker or notʢRails 5.1~ʣ ▸ SPAཁ݅ʢReact.jsʗVue.jsʗAngularJS etc.ʣ

43. RAILSͰ࣮ફతͳWEBΞϓϦέʔγϣϯ։ൃ͢Δצॴ SERVER SIDE - ؀ڥߏங ▸ ΦϯϓϨʗAWSʗHeroku ▸ ϛυϧ΢ΣΞબఆʗߏ੒؅ཧʢRDBʗKVSʗݕࡧetc.ʣ ▸

    ։ൃ؀ڥʗεςʔδϯά؀ڥʗຊ൪؀ڥߏங ▸ σϓϩΠʗCI

44. RAILSͰ࣮ફతͳWEBΞϓϦέʔγϣϯ։ൃ͢Δצॴ SERVER SIDE - RUBYGEMSબఆ ▸ બఆ͕؊ ▸ ؾΛ͚ͭΔϙΠϯτ ▸

    ཁ݅ʹԊ͍ͬͯΔ͔ ▸ ྨࣅͷػೳΛ࣋ͭgemͷௐࠪ ▸ ࢖༻࣮੷͕͋Δ͔ ▸ OSS։ൃίϛϡχςΟ ▸ ϓϩδΣΫτͷRubyʗRailsͷόʔδϣϯͱͷ੔߹ੑ ▸ Railsػೳ֦ுܥ͸ཁ஫ҙʢparanoiaͳͲʣ ▸ ։ൃνʔϜͱͷ߹ҙܗ੒

45. RAILSͰ࣮ફతͳWEBΞϓϦέʔγϣϯ։ൃ͢Δצॴ SERVER SIDE - MVCҎ֎ͷϨΠϠʔ ▸ appԼͷߏ੒ ▸ decoratorsʗformsʗservicesʗtasksʗvalidators etc.

    ▸ όονॲཧʢrakeλεΫor notʣ ▸ σʔλॲཧੑೳཁ݅࣍ୈ

46. RAILSͰ࣮ફతͳWEBΞϓϦέʔγϣϯ։ൃ͢Δצॴ ABOUT צॴ ▸ αʔόʔαΠυ ▸ ؀ڥߏங ▸ RubyGemsબఆ ▸

    MVCҎ֎ͷϨΠϠʔ ▸ ϑϩϯτΤϯυ ▸ Webpacker or notʢRails 5.1~ʣ ▸ SPAཁ݅ʢReact.jsʗVue.jsʗAngularJS etc.ʣ

47. RAILSͰ࣮ફతͳWEBΞϓϦέʔγϣϯ։ൃ͢Δצॴ FRONTEND ▸ bin/rails new myapp --webpack ▸ bin/rails new

    myapp --webpack=react ▸ bin/rails new myapp --webpack=vue ▸ bin/rails new myapp —webpack=angular ▸ bin/yarn add [package] ▸ bin/yarn install/update

48. ΩϞ͍

49. RAILSͰ࣮ફతͳWEBΞϓϦέʔγϣϯ։ൃ͢Δצॴ FRONTENDͷ՝୊ ▸ turbolinks ▸ sprockets ▸ webpacker ▸ webpack-dev-server

    ▸ CoffeeScript ▸ babel

50. RAILS ϓϩμΫγϣϯίʔυ IESHILͷࣄྫ

51. None

52. IESHILͷࣄྫ Πϯϑϥ ▸ Herokuʢ~2018.05ʣ ▸ ্ཱͪ͛࣌ͷεϐʔυ༏ઌ ▸ ๛෋ͳΞυΦϯ ▸ Heroku

    Private Spaces ▸ TokyoϦʔδϣϯͰಈ࡞ ▸ 3ഒҎ্ߴ଎ʹʂ ▸ Ұ෦AWS

53. IESHILͷࣄྫ HEROKU PRIVATE SPACES͸΍ͬͺΓ଎͔ͬͨʢ༨ஊʣ ▸ ര଎ʂ ▸ αʔόʔฏۉԠ౴࣌ؒˠ໿2ഒ ▸ αʔόʔฏۉ઀ଓ࣌ؒˠ໿5ഒ

54. IESHILͷࣄྫ ʲFYIʳHEROKU MEETUP#21 ▸ 17Y৽ଔͷ௠͘Μ͕ొஃ༧ఆ

55. ಉ྅ɿHeroku MeetupͰొஃऀืूͯ͠Δ ಉ྅ɿ௠͘Μൃදͪ͠Ό͍ͳΑ ௠͘ΜɿλΠτϧͲ͏͠·͔͢ʁ ஛അɿ10ഒͬͯ੝ͬͪΌ͑Αʢ൒͹৑ஊʣ ௠͘ΜɿΘ͔Γ·ͨ͠ʂʂ

56. None

57. IESHILͷࣄྫ HEROKUͰͷ্ཱͪ͛΋΍ͬͺΓ଎͔ͬͨ ▸ 3໊ʢϚελʗRailsʗػցֶशʣͰ2ϲ݄൒͘Β͍ɻ

58. IESHILͷࣄྫ MIDDLEWARE ▸ Heroku Add-ons ▸ ʴSendgridʗʴFastlyʢCommon Runtimeʣ ▸ ElasticsearchʢElastic

    Cloudʣ ▸ Tresure Data

59. IESHILͷࣄྫ ࣮ߦ؀ڥ ▸ ։ൃ؀ڥ ▸ MacʢϩʔΧϧʣ or CentOSʢOpenStackʣ ▸ PRຖͷಈ࡞֬ೝ؀ڥ

    ▸ Heroku Review Apps ▸ εςʔδϯά؀ڥ ▸ staging.ieshil.com ▸ ຊ൪؀ڥ ▸ www.ieshil.com

60. IESHILͷࣄྫ CIʗDEPLOY ▸ CI ▸ GitHub + CircleCIʢtest+lintʣ ▸ Deploy

    ▸ ChatOps with slack ▸ /h deploy ieshil-front/master to prod

61. IESHILͷࣄྫ RUBYGEMS ▸ Ϣʔβʔొ࿥ཁ݅ʢsorceryʗomniauthʣ ▸ ϝʔϧૹ৴ཁ݅ʢsendgrid4rʣ ▸ ը૾ॲཧཁ݅ʢdragonfly-s3_data_storeʗshrineʗimage_processing etc.ʣ ▸

    SEOཁ݅ʢgretelʗsitemap_generatorʣ ▸ API࿈ܞʢfaraday etc.ʣ ▸ δϣϒΩϡʔʢrescue etc.ʣ ▸ ։ൃิॿ ▸ Rails֦ுܥʢslim-railsʗseed-fuʗforemanʗconfigʗdotenv-railsʗpry-rails etc.ʣ ▸ ςετؔ࿈ʢrubocopʗrspecʗcapybaraʗselenium-webdriverʗturnipʗfactory_bot_railsʗdatabase_rewinder etc.ʣ ▸ ͦͷଞʢletter_opener_webʗslack-notifierʗrollbarʗbullet etc.ʣ

62. IESHILͷࣄྫ APPԼͷߏ੒ ▸ Decoratorsʢactive_decoratorʣ ▸ FormsʢActiveModel::Modelʣ ▸ Importers ▸ Search

    ▸ Services ▸ Tasks ▸ Uploaders ▸ Validators ▸ ValuesʢActiveModel::Modelʣ

63. ▸ app/forms/application.rb IESHILͷࣄྫ APP/FORMS

64. ▸ ܧঝͯ͠࢖༻ IESHILͷࣄྫ APP/FORMS

65. ▸ ܧঝͯ͠࢖༻ IESHILͷࣄྫ APP/FORMS

66. ▸ ίϯτϩʔϥʔͰͷ࢖༻ IESHILͷࣄྫ APP/FORMS

67. IESHILͷࣄྫ όονॲཧ ▸ bin/rails[rake] -vT ▸ IESHILͰ͸ݐ෺ϚελʗՁ֨ࠪఆͳͲʹTresure Data࢖༻ ▸ digdagʗembulk

68. IESHILͷࣄྫ FRONTEND ▸ React.jsʗTypeScriptΛ࢖༻ ▸ jQueryͷݹ͍ίʔυϕʔεΛஔ׵ ▸ SEOཁ݅ΑΓඇSPA ▸ SSR͸πϥϛ͕ଟ͍ͷͰ஫ҙ

    https://www.slideshare.net/yutasuzuki589/vs-rails-js

69. IESHILͷࣄྫ ։ൃϓϩηε ▸ JIRAʗConfluence ▸ ϢʔβʔετʔϦʔઃܭʗݟੵ ▸ ετʔϦʔϙΠϯτϕʔεͰͷݟੵ

70. IESHILͷࣄྫ σʔλΤϯδχΞϦϯά ▸ IESHILͰ͸༷ʑͳϏοάσʔλΛऔΓѻ͏ ▸ Ϛϯγϣϯ ▸ औҾࣄྫ ▸ ॅ؀ڥ

    etc.

71. IESHILͷࣄྫ σʔλΤϯδχΞϦϯάͷਏΈ ▸ ॲཧ࣌ؒ ▸ ໊دͤॲཧ ▸ ҟৗ஋ݕग़ ▸ ࢼߦࡨޡ

    ▸ લॲཧ ▸ ӡ༻Λߟྀͨ͠࢓૊Έͮ͘Γ ▸ ϏδωευϝΠϯ஌ࣝ ▸ ౷ܭʗػցֶशʗࣗવݴޠॲཧͳͲͷલఏ஌ࣝ

72. IESHILͷࣄྫ ॅ؀ڥσʔλ ▸ Ұ౎ࡾݝͷϝογϡίʔυ

73. IESHILͷࣄྫ ॅ؀ڥσʔλऔΓࠐΈॲཧ ▸ ݩσʔλऔΓࠐΈ

74. IESHILͷࣄྫ ॅ؀ڥσʔλऔΓࠐΈॲཧ ▸ TresureData΁ͷऔΓࠐΈ

75. IESHILͷࣄྫ ॅ؀ڥσʔλऔΓࠐΈॲཧ ▸ TresureData→PostgreSQL΁ͷऔΓࠐΈ

76. IESHILͷࣄྫ ॅ؀ڥσʔλऔΓࠐΈॲཧ ▸ ޙॲཧ

77. IESHILͷࣄྫ DIGDAG ▸ ϫʔΫϑϩʔΤϯδϯ

78. IESHILͷࣄྫ EMBULK ▸ όϧΫσʔλϩʔμʔ

79. IESHILͷࣄྫ ʲFYIʳՁ֨ࠪఆ ▸ ށຖʹՁ֨ࠪఆ

80. IESHILͷࣄྫ ʲFYIʳՁ֨ࠪఆ ▸ Hivemall + Python

81. IESHILͷࣄྫ ʲFYIʳՁ֨ࠪఆ ▸ ϔυχοΫ๏

82. IESHILͷࣄྫ ϒϨʔΫεϧʔϙΠϯτ·ͱΊ ▸ ཁ͔݅ΒRails։ൃج൫Λ੔͑Δ ▸ νʔϜ։ൃΛલఏͱͯ͠पลྖҬΛ੔උ͢Δ ▸ νʔϜ಺Ͱ߹ҙΛܗ੒͢Δ ▸ RubyGemsબఆ

    ▸ appԼͷߏ੒ ▸ ϑϩϯτΤϯυ ▸ Ϗοάσʔλʗػցֶशͱͷ޲͖߹͍ํ ▸ ୤ɾϞϊϦγοΫʢMonolithicʗ༁ɿҰຕ൘ͷʣ ▸ Private gem ▸ ϚΠΫϩαʔϏεԽʢస৬ձٞʣ

83. WEBΞϓϦ։ൃͷ࠷దԽ ߟ͑Δ͜ͱ͍ͬͺ͍ RAILSΞϓϦ։ൃͷצॴ͸…

84. IESHILͷࣄྫ ʲFYIʳΠϯλʔϯืूத@౦ژ ▸ ᶃձһొ࿥ͳͲKPIվળࢪࡦͷ࣮ࢪʢ2िؒ૝ఆʣ ▸ ᶄ֤छSEOࢪࡦͷ࣮ࢪʢ1ϲ݄૝ఆʣ ▸ αʔόʔαΠυʗϑϩϯτΤϯυΤϯδχΞͱͯ͠ɺσΟϨΫλʔ΍ΤϯδχΞɺσβΠφͱ ڠۀͯ͠վળࢪࡦʹ͍ͭͯৄࡉΛ٧Ίɺ։ൃʙϦϦʔε͢ΔɻඞཁʹԠͯ͡ϦϦʔεޙͷσʔ λ෼ੳʗධՁͳͲ΋ߦ͏ɻ

    ▸ ࢖༻ٕज़ɿHeroku, AWS, Rails, React, TypeScript, PostgreSQL, TresureDataͳͲɻ ▸ ᶅσʔλϑϩʔͷઃܭɾ੔උ(2िؒ~1ϲ݄૝ఆɺͦͷޙ΋Ԡ૬ஊ) ▸ ϫʔΫϑϩʔΤϯδϯʹΑΔλεΫઃܭ/੔උΛߦ͍ɺଐਓԽ͍ͯ͠ΔλεΫͷղফ΍ޮ཰Խ Λߦ͏ɻ ▸ ࢖༻ٕज़: Digdag, Embulk, PostgreSQL, TreasureDataͳͲɻ

85. Q&A