SlideShare a Scribd company logo
1 of 33
Download to read offline
HTML5 ビギナーのための 
AngularJS 2014.11.27
About me 
! 
金井 健一 / Kenichi Kanai 
! 
! 
! 
@can_i_do_web 
! 
Web先端技術味見部部長 
AngularJS Japan User Group
Now On Sale.
Agenda 
• About AngularJS 
• Data Binding 
• Template Engine 
• Directive / Filter 
• Conclusion
About AngularJS 
• for Web Application 
• Fullstack 
• HTML enhanced
Others 
etc…
Trends
About AngularJS 
• Data Binding 
• Template Engine 
• Routing 
• Ajax Support 
• Test 
• Security 
• DI ( Dependency Injection ) 
• Service / Directive / Filter
About AngularJS 
• Data Binding 
• Template Engine 
• Routing 
• Ajax Support 
• Test 
• Security 
• DI ( Dependency Injection ) 
• Service / Directive / Filter 
今日はコレだけ!
Data Binding 
コレを 
ココに
Data Binding By jQuery 
<body> 
<input type="text" id="someWord"> 
<p>Hello <span id=“greeting"></span></p> 
</body> 
$('#someWord').on('keyup', function(event){ 
var textBoxValue = $(this).val(); 
$('#greeting').html(textBoxValue); 
}); 
HTML 
JavaScript
Data Binding By AngularJS 
<body> 
<input type="text" ng-model=“greeting”> 
<p>Hello <span ng-bind=“greeting”></span></p> 
</body> 
// no code. 
HTML 
JavaScript
Template Engine 
<ul> 
@for(order <- orders) { 
<li>@order.title</li> 
} 
</ul> 
<ul> 
<% writers.each do |writer| %> 
<li><%= writer %></li> 
<% end %> 
Play Framework </ul> Ruby on Rails 
<ul> 
<% foreach ($this->data as $d): %> 
<li><%=$d[‘title']%> & <%=$d[‘description']%></li> 
<% endforeach %> 
</ul> 
PHP
Template Engine
Template Engine 
<ul> 
<li ng-repeat=“person in list”> 
<p ng-bind=“person”></p> 
</li> 
</ul> 
AngularJS
Template Engine 
<body> 
<input type="text" ng-model=“myModel”> 
<p>Hello <span ng-bind=“myModel”></span></p> 
</body> 
HTML の要素に カスタム属性 として定義 
※ 一部、カスタム要素でも定義できたりする 
HTML
Service / Directive / Filter 
• Directive 
超ざっくり! 
• AngularJS 流 カスタム要素・カスタム属性 
( 最初から70 個くらい用意されている!) 
• Filter 
• 表示項目の一時的なフィルタリング 
ex)201411271930 -> 2014/11/27 19:30
Service / Directive / Filter 
Filter 
Directive
Service / Directive / Filter 
built-in-Directive 
<input type=“checkbox” ng-model=“checked”> 
<p ng-show=“checked”>こんにちわ</p> 
<p ng-hide=“checked”>こんばんわ</p>
Service / Directive / Filter 
<div ng-init=“model = 123.456”> 
<p ng-bind=“model | number: 1”></p> 
</div> 
Filter 
123.5 
Browser
Service / Directive / Filter 
超ざっくり! 
それでも足りなければ作りましょう!
Web Components 
<x-twitter-button>
Web Components
Web Components
Web Components 
<x-twitter-button ( type=“tweet” )> default 
<x-twitter-button type=“follow”> 
<x-twitter-button type=“hashtag”> 
<x-twitter-button type=“mention”>
Web Components 
<body> 
<header></header> 
<x-user></x-user> 
<x-trend></x-trend> 
<x-timeline></x-timeline> 
<x-recommend-user></x-recommend-user> 
<footer></footer> 
</body>
Web Components 
<header> 
<x-user> 
<x-trend> 
<x-timeline> 
<x-recommend 
-user> 
<footer>
Web Components
Web Components 
AngularJS で 
Web Components の予習ができる!
Conclusion 
• Data Binding が超簡単 
• Template は HTML 拡張なのでわかりやすい 
• Directive っていうカスタム要素・属性 
• Filter 便利! 
ビギナー向けまとめ 
そこから先はまた別の機会に!
Conclusion 
わからないことがあれば! 
AngularJS Japan User Group #ng_jp
Thank you. 
@can_i_do_web

More Related Content

What's hot

Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
 
AngularJSを触ってみた
AngularJSを触ってみたAngularJSを触ってみた
AngularJSを触ってみた
tomowata
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
 

What's hot (20)

Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
 
AngularJS入門
AngularJS入門AngularJS入門
AngularJS入門
 
AngularJSの高速化
AngularJSの高速化AngularJSの高速化
AngularJSの高速化
 
Start React with Browserify
Start React with BrowserifyStart React with Browserify
Start React with Browserify
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
 
Backbone.js入門
Backbone.js入門Backbone.js入門
Backbone.js入門
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.js
 
Angular js or_backbonejs
Angular js or_backbonejsAngular js or_backbonejs
Angular js or_backbonejs
 
Viewを活用して複雑化と戦う
Viewを活用して複雑化と戦うViewを活用して複雑化と戦う
Viewを活用して複雑化と戦う
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃない
 
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるAngular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
 
AngularJSを触ってみた
AngularJSを触ってみたAngularJSを触ってみた
AngularJSを触ってみた
 
jQuery Mobile 概要
jQuery Mobile 概要jQuery Mobile 概要
jQuery Mobile 概要
 
20160927 reactmeetup
20160927 reactmeetup20160927 reactmeetup
20160927 reactmeetup
 
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころ
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
 
はじめよう JavaFX 2.x
はじめよう JavaFX 2.xはじめよう JavaFX 2.x
はじめよう JavaFX 2.x
 

Viewers also liked

TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation
fmorado
 
1 q 2012 halo report finala
1 q 2012 halo report finala1 q 2012 halo report finala
1 q 2012 halo report finala
henkhans
 
บุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกบุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอก
nearary
 
друге життя
друге життядруге життя
друге життя
Andrey Hrutba
 

Viewers also liked (20)

Angular#Kanazawa
Angular#KanazawaAngular#Kanazawa
Angular#Kanazawa
 
はじめてのAngular2
はじめてのAngular2はじめてのAngular2
はじめてのAngular2
 
AngularJS 入門
AngularJS 入門AngularJS 入門
AngularJS 入門
 
Angular2
Angular2Angular2
Angular2
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
 
Animated1
Animated1Animated1
Animated1
 
TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation
 
We nemen je mee
We nemen je meeWe nemen je mee
We nemen je mee
 
วิธีการสอนตามระเบียบขั้นตอนทางวิทยาศาสตร์
วิธีการสอนตามระเบียบขั้นตอนทางวิทยาศาสตร์วิธีการสอนตามระเบียบขั้นตอนทางวิทยาศาสตร์
วิธีการสอนตามระเบียบขั้นตอนทางวิทยาศาสตร์
 
1 q 2012 halo report finala
1 q 2012 halo report finala1 q 2012 halo report finala
1 q 2012 halo report finala
 
Nov 2102 newsletter final
Nov 2102 newsletter finalNov 2102 newsletter final
Nov 2102 newsletter final
 
บุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกบุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอก
 
риб бизнес лекция укр
риб бизнес лекция укрриб бизнес лекция укр
риб бизнес лекция укр
 
We nemen je mee
We nemen je meeWe nemen je mee
We nemen je mee
 
Resume
ResumeResume
Resume
 
阪神タイガースはなぜ愛されるのか?
阪神タイガースはなぜ愛されるのか?阪神タイガースはなぜ愛されるのか?
阪神タイガースはなぜ愛されるのか?
 
друге життя
друге життядруге життя
друге життя
 
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionicHTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
 
初学者向けセミナー資料
初学者向けセミナー資料初学者向けセミナー資料
初学者向けセミナー資料
 
味見部紹介 LT
味見部紹介 LT味見部紹介 LT
味見部紹介 LT
 

Similar to HTML5 ビギナーのための AngularJS

20110714 j queryベーシック
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
 
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Kazuki Nakajima
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
 
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
Naoyuki Yamada
 

Similar to HTML5 ビギナーのための AngularJS (20)

20110714 j queryベーシック
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData APIJavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
 
jQuery Mobileの基礎
jQuery Mobileの基礎jQuery Mobileの基礎
jQuery Mobileの基礎
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
 
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4 CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
 
Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現
Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現
Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現
 
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
 
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみたASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
 
iOS WebView App
iOS WebView AppiOS WebView App
iOS WebView App
 
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
 
20151206 hamamatsu handson
20151206 hamamatsu handson20151206 hamamatsu handson
20151206 hamamatsu handson
 

More from Kenichi Kanai

More from Kenichi Kanai (15)

techfeed_ng-japan2019
techfeed_ng-japan2019techfeed_ng-japan2019
techfeed_ng-japan2019
 
ng-japan2019_techfeed_LT
ng-japan2019_techfeed_LTng-japan2019_techfeed_LT
ng-japan2019_techfeed_LT
 
Angular CLI
Angular CLIAngular CLI
Angular CLI
 
pick up ng-conf
pick up ng-confpick up ng-conf
pick up ng-conf
 
Angular1.5.5
Angular1.5.5Angular1.5.5
Angular1.5.5
 
New Features in Angular 1.5
New Features in Angular 1.5New Features in Angular 1.5
New Features in Angular 1.5
 
ngTeratail
ngTeratailngTeratail
ngTeratail
 
はじめてのAngular2
はじめてのAngular2はじめてのAngular2
はじめてのAngular2
 
Web先端技術味見部
Web先端技術味見部Web先端技術味見部
Web先端技術味見部
 
angularJS in 10ish minutes
angularJS in 10ish minutesangularJS in 10ish minutes
angularJS in 10ish minutes
 
HTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向けHTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向け
 
みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2
 
Enterprise x AngularJS
Enterprise x AngularJSEnterprise x AngularJS
Enterprise x AngularJS
 
Ng mtg#3
Ng mtg#3Ng mtg#3
Ng mtg#3
 
AngularJS 概説
AngularJS 概説AngularJS 概説
AngularJS 概説
 

Recently uploaded

Recently uploaded (10)

Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 

HTML5 ビギナーのための AngularJS

  • 2. About me ! 金井 健一 / Kenichi Kanai ! ! ! @can_i_do_web ! Web先端技術味見部部長 AngularJS Japan User Group
  • 4. Agenda • About AngularJS • Data Binding • Template Engine • Directive / Filter • Conclusion
  • 5.
  • 6. About AngularJS • for Web Application • Fullstack • HTML enhanced
  • 9. About AngularJS • Data Binding • Template Engine • Routing • Ajax Support • Test • Security • DI ( Dependency Injection ) • Service / Directive / Filter
  • 10. About AngularJS • Data Binding • Template Engine • Routing • Ajax Support • Test • Security • DI ( Dependency Injection ) • Service / Directive / Filter 今日はコレだけ!
  • 12. Data Binding By jQuery <body> <input type="text" id="someWord"> <p>Hello <span id=“greeting"></span></p> </body> $('#someWord').on('keyup', function(event){ var textBoxValue = $(this).val(); $('#greeting').html(textBoxValue); }); HTML JavaScript
  • 13. Data Binding By AngularJS <body> <input type="text" ng-model=“greeting”> <p>Hello <span ng-bind=“greeting”></span></p> </body> // no code. HTML JavaScript
  • 14. Template Engine <ul> @for(order <- orders) { <li>@order.title</li> } </ul> <ul> <% writers.each do |writer| %> <li><%= writer %></li> <% end %> Play Framework </ul> Ruby on Rails <ul> <% foreach ($this->data as $d): %> <li><%=$d[‘title']%> & <%=$d[‘description']%></li> <% endforeach %> </ul> PHP
  • 16. Template Engine <ul> <li ng-repeat=“person in list”> <p ng-bind=“person”></p> </li> </ul> AngularJS
  • 17. Template Engine <body> <input type="text" ng-model=“myModel”> <p>Hello <span ng-bind=“myModel”></span></p> </body> HTML の要素に カスタム属性 として定義 ※ 一部、カスタム要素でも定義できたりする HTML
  • 18. Service / Directive / Filter • Directive 超ざっくり! • AngularJS 流 カスタム要素・カスタム属性 ( 最初から70 個くらい用意されている!) • Filter • 表示項目の一時的なフィルタリング ex)201411271930 -> 2014/11/27 19:30
  • 19. Service / Directive / Filter Filter Directive
  • 20. Service / Directive / Filter built-in-Directive <input type=“checkbox” ng-model=“checked”> <p ng-show=“checked”>こんにちわ</p> <p ng-hide=“checked”>こんばんわ</p>
  • 21. Service / Directive / Filter <div ng-init=“model = 123.456”> <p ng-bind=“model | number: 1”></p> </div> Filter 123.5 Browser
  • 22. Service / Directive / Filter 超ざっくり! それでも足りなければ作りましょう!
  • 26. Web Components <x-twitter-button ( type=“tweet” )> default <x-twitter-button type=“follow”> <x-twitter-button type=“hashtag”> <x-twitter-button type=“mention”>
  • 27. Web Components <body> <header></header> <x-user></x-user> <x-trend></x-trend> <x-timeline></x-timeline> <x-recommend-user></x-recommend-user> <footer></footer> </body>
  • 28. Web Components <header> <x-user> <x-trend> <x-timeline> <x-recommend -user> <footer>
  • 30. Web Components AngularJS で Web Components の予習ができる!
  • 31. Conclusion • Data Binding が超簡単 • Template は HTML 拡張なのでわかりやすい • Directive っていうカスタム要素・属性 • Filter 便利! ビギナー向けまとめ そこから先はまた別の機会に!