PageSourceSearch

https://railstutorial.jp/webtext

html railstutorial.jp collected 2026-10-02 06:52:28 UTC 50,623 bytes, 956 lines download raw bytes

1<!DOCTYPE html>
2<html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'>
3  <head>
4    <title>Rails 7 でプロダクト開発を学ぼう - Railsチュートリアル</title>
5    <meta name="apple-mobile-web-app-title" content="Railsチュートリアル" />
6    <meta name="application-name"           content="Railsチュートリアル" />
7
8    <meta http-equiv="Content-type"        content="text/html; charset=utf-8" />
9    <meta name="robots"                    content="all" />
10    <meta name="MSSmartTagsPreventParsing" content="true" />
11    <meta name="title"       content="Ruby on Rails チュートリアル:プロダクト開発の0→1を学ぼう" />
12    <meta name="description" content="Ruby on Rails 7 対応のRailsチュートリアルで、Webサービスを作りながら学ぼう" />
13    <meta name="keywords"    content="Ruby Rails チュートリアル Web サービス 開発 入門" />
14    <meta name="author"      content="YassLab Inc." />
15    <meta name="viewport"    content="width=device-width">
16
17    <meta property="fb:admins"      content="715330868" />
18    <meta property="fb:app_id"      content="144878509039953" />
19    <meta property="og:title"       content="Rails 7 でプロダクト開発を学ぼう - Railsチュートリアル"/>
20    <meta property="og:site_name"   content="Rails 7 でプロダクト開発を学ぼう - Railsチュートリアル"/>
21    <meta property="og:image"       content="https://railstutorial.jp/images/meta/webtext_facebook.png"/>
22    <meta property="og:url"         content="https://railstutorial.jp/webtext">
23    <meta property="og:type"        content="article" />
24    <meta property="og:description" content="Ruby on Rails 7 対応のRailsチュートリアルで、Webサービスを作りながら学ぼう" />
25
26    <meta name="twitter:card"        content="summary" />
27    <meta name="twitter:site"        content="@RailsTutorialJP" />
28    <meta name="twitter:title"       content="Rails 7 でプロダクト開発を学ぼう - Railsチュートリアル" />
29    <meta name="twitter:description" content="Ruby on Rails 7 対応のRailsチュートリアルで、Webサービスを作りながら学ぼう" />
30    <meta name="twitter:image"       content="https://railstutorial.jp/images/meta/webtext_twitter.png" />
31    <meta name="twitter:url"         content="https://railstutorial.jp/webtext" />
32
33    <link rel="apple-touch-icon" sizes="57x57"   href="/images/favicons/apple-icon-57x57.png">
34    <link rel="apple-touch-icon" sizes="60x60"   href="/images/favicons/apple-icon-60x60.png">
35    <link rel="apple-touch-icon" sizes="72x72"   href="/images/favicons/apple-icon-72x72.png">
36    <link rel="apple-touch-icon" sizes="76x76"   href="/images/favicons/apple-icon-76x76.png">
37    <link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-icon-114x114.png">
38    <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-icon-120x120.png">
39    <link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-icon-144x144.png">
40    <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-icon-152x152.png">
41    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-icon-180x180.png">
42    <link rel="icon" type="image/png" sizes="192x192"  href="/images/favicons/android-icon-192x192.png">
43    <link rel="icon" type="image/png" sizes="16x16"    href="/images/favicons/favicon-16x16.png">
44    <link rel="icon" type="image/png" sizes="32x32"    href="/images/favicons/favicon-32x32.png">
45    <link rel="icon" type="image/png" sizes="96x96"    href="/images/favicons/favicon-96x96.png">
46
47    <link rel="author"    href="/humans.txt" type="text/plain" />
48    <link rel="manifest"  href="/manifest.json">
49    <link rel="mask-icon" href="/images/favicons/safari-pinned-tab.svg" color="#6e0421">
50
51    
51<script src="https://kit.fontawesome.com/82f32b9df5.js" crossorigin="anonymous"></script>
51
52
53    <meta name="msapplication-TileColor" content="#ffffff">
54    <meta name="msapplication-TileImage" content="/images/favicons/ms-icon-144x144.png">
55    <meta name="theme-color"             content="#ffffff">
56
57    
57<script src="/assets/application-afe18b2acda6b63440adc78e985d0452d669db636359b09ad98889c3db22df50.js"></script>
57
58
59      <link rel="stylesheet" href="/assets/application-2354f9fe24aa42f5abeb37522f02a117ca5cfd7aeadcb741874240d78d640bdb.css" media="all" />
60
61    <link rel="stylesheet" href="/assets/screen-1595bf5706fbfa8de543ed5bf91aa64aeb9463eb5000c281dabfc69f90e80808.css" media="screen, projection" />
62    <link rel="stylesheet" href="/assets/header-579d5b38aca86048b5c922d1519fca83d276525dde4b9d8ec1d9228e5f0b82bb.css" media="screen, projection" />
63    <link rel="stylesheet" href="/assets/footer-81ae8594f99845ac0b1dcdf9542f1b419b0ea7d0fdd76a56a02446b1de262205.css" media="screen, projection" />
64    <link rel="stylesheet" href="/assets/sidebar-bedbe3393b7f53648b01932712cf85da5f433346390b23144c6e17b54d320b98.css" media="screen, projection" />
65    <link rel="stylesheet" href="/assets/print-11c4b669550925fa5e456f9963a732fe05fa781757a5ff982f0d4a7c189e67a2.css" media="print" />
66    <link rel="stylesheet" href="/assets/social-b2c69da45d88e2a7f2780a6ea3860f818993c0647a0f2e5ec4368736aa1336e8.css" media="screen, projection" />
67
68      <!-- webtext以外のページのCSS-->
69      <link rel="stylesheet" href="/assets/option-82cd477e0f162a15cf75b3f17bc69f146bbe4bd2c5aac94e2ba7375bd0ea983e.css" media="screen, projection" />
70    <!--[if lte IE 7]>
71      <link rel="stylesheet" href="/assets/ie-4ab67825f85c4ea0318c6dab2feabc2a8f92734393da4b7489950611f1b0300d.css" media="screen" />
72    <![endif]-->
73    <!--[if lt IE 7]>  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>      </div>      <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>      <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>      <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>      <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>    </div>  </div>  <![endif]-->
74
75    <!-- Google Tag Manager -->
76    
76<script>
vendor: 343 bytes, lines 76-80
76(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
77    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
78    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
79    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
80    })(window,document,'script','dataLayer','
80GTM-W5X8M22
vendor: 3 bytes, line 80
80');
80</script>
80
81    <!-- End Google Tag Manager -->
82
83    
83<script type="text/javascript" async
84	    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML">
85    </script>
85
86    
86<script src='https://js.stripe.com/v3/'></script>
vendor: 1 bytes, line 86
86
87<script>
88  document.addEventListener('DOMContentLoaded', function () {
89    var stripe = Stripe('pk_live_oW41minVFibpr1ebegAZGjfb');
90    var elements = stripe.elements({locale: 'ja'});
91    var card = elements.create('card', {hidePostalCode: true});
92    card.mount('#card-element');
93    card.addEventListener('change', function(event) {
94      var displayError = document.getElementById('card-errors');
95      if (event.error) {
96        displayError.textContent = event.error.message;
97      } else {
98        displayError.textContent = '';
99      }
100    });
101  
102    // Handle form submission.
103    var form = document.getElementById('payment-form');
104    form.addEventListener('submit', function(event) {
105      $.rails.disableElement($(event.target));
106  
107      event.preventDefault();
108      // NOTE ujsに伝搬しないようにする
109      event.stopPropagation();
110  
111      fetch('/api/stripe/create_setup_intent')
112        .then(function(response) { return response.json(); })
113        .then(function(data) {
114          // Use the client_secret for confirmCardSetup
115          stripe.confirmCardSetup(
116            data.client_secret,
117            {
118              payment_method: {card: card},
119            }
120          ).then(function(result) {
121            if (result.error) {
122              var errorElement = document.getElementById('card-errors');
123              errorElement.textContent = result.error.message;
124              $.rails.enableElement($(event.target));
125            } else {
126              stripeTokenHandler(result.setupIntent.payment_method);
127            }
128          });
129        });
130    });
131  
132    // Submit the form with the token.
133    function stripeTokenHandler(token) {
134      $('.card-button button').prop('disabled', true);
135      $('.card-button button').text('処理中...');
136      var form = document.getElementById('payment-form');
137      var hiddenInput = document.createElement('input');
138      hiddenInput.setAttribute('type', 'hidden');
139      hiddenInput.setAttribute('name', 'stripe_token');
140      hiddenInput.setAttribute('value', token);
141      form.appendChild(hiddenInput);
142      form.submit();
143    }
144  });
145</script>
145
146
147    <style>
148  .StripeElement {
149    background-color: white;
150    height: 40px;
151    padding: 10px 12px;
152    border-radius: 4px;
153    border: 1px solid transparent;
154    box-shadow: 0 1px 3px 0 #e6ebf1;
155    transition: box-shadow 150ms ease;
156    box-sizing: border-box;
157  }
158  
159  .StripeElement--focus {
160    box-shadow: 0 1px 3px 0 #cfd7df;
161  }
162  
163  /* .errorと色を合わせた */
164  .StripeElement--invalid {
165    color: #8a1f11;
166    border-color: #fbc2c4;
167  }
168  
169  .StripeElement--webkit-autofill {
170    background-color: #fefde5 !important;
171  }
172  
173  .original-amount-discount{
174    text-decoration: line-through;
175  }
176  
177  .card-btn.btn-red{
178    margin: 20px 0 20px 0;
179    padding: 10px;
180    font-size: 18px;
181    width: 100%;
182    cursor: pointer;
183  }
184</style>
185
186    <meta name="csrf-param" content="authenticity_token" />
187<meta name="csrf-token" content="4DEHtj8z4NAbzMIxyBu_62p_7pbPLIWcrlEuuGHY7QF_-sEoNfewER1cbrEntTFQ9Y7zVR7UbVbxnqj4SSVMyw" />
188
189    <!--twemoji-->
190    
190<script src="/assets/twemoji-aa740eb18c43648cfc9c0d2fd1b2796406aa1c98d864897785c88b8e67a9dbe4.js"></script>
190
191  </head>
192  <body>
193    <!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 193-194
193
194    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
194GTM-W5X8M22
vendor: 91 bytes, lines 194-196
194"
195    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
196    
196<!-- End Google Tag Manager (noscript) -->
197      <article class='webpage'>
198<div id='container'>
199<header id="header" class="clearfix">
200  <section id='title'>
201    <div id='logo'><a href="/"><img alt="Rails チュートリアル Logo" data-src="/images/layout/logo.png" loading="lazy" class="lazyload" src="/spinner.svg" /></a></div>
202    <h1 id='name'>
203      <a href="/">Ruby on Rails チュートリアル</a>
204    </h1>
205    <div class="header-buttons">
206      <div class="hidden_box">
207        <input type="checkbox" id="login-pc"/>
208          <label for="login-pc" class="header-button header-account-button">ログイン</label>
209        <div class="hidden_show">
210          <!--非表示ここから-->
211            <ul class="login-menu-sub">
212              <li><a href="/members/login">個人向けログイン</a></li>
213              <li><a href="/business/login">法人向けログイン</a></li>
214            </ul>
215          <!--ここまで-->
216        </div>
217        
217<script type='text/javascript'>
218        // 他の場所をクリックするとメニューが閉じるように
219          $(document).on('click', function(e) {
220            if (!$(e.target).closest('.hidden_box').length) {
221              $('#login-pc').prop('checked', false)
222            }
223          })
224        </script>
224
225      </div>
226      <div class="header-notice">
227        <input type="checkbox" id="notice"/>
228        <label for="notice" class="header-button header-notice-button "><i class="fas fa-bell"></i></label>
229        <div class="notices">
230          <ul class="notice-list">
231  <li class="notice-list-heading">
232    お知らせ
233  </li>
234
235    <li >
236      
237      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n4f2b1c2e8e50" href="https://note.com/yasslab/n/n4f2b1c2e8e50?magazine_key=md778735d3f77">
238      <p class='notice-list-title'>RailsTokyo#6 に協賛</p><span class='notice-list-date'>2026-09-11</span>
239</a>    </li>
240    <li >
241      
242      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n4beaf6bed455" href="https://note.com/yasslab/n/n4beaf6bed455?magazine_key=md778735d3f77">
243      <p class='notice-list-title'>AIフィードバックが連携機能に対応</p><span class='notice-list-date'>2026-07-27</span>
244</a>    </li>
245    <li >
246      
247      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n93c30a02ea59" href="https://note.com/yasslab/n/n93c30a02ea59?magazine_key=md778735d3f77">
248      <p class='notice-list-title'>トレーニング:フィードバック機能追加</p><span class='notice-list-date'>2026-05-22</span>
249</a>    </li>
250    <li >
251      
252      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="na1e169dec096" href="https://note.com/yasslab/n/na1e169dec096?magazine_key=md778735d3f77">
253      <p class='notice-list-title'>私設図書館「技術書ライブラリー」の開設を支援</p><span class='notice-list-date'>2026-03-19</span>
254</a>    </li>
255    <li >
256      
257      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="nb468a637dc41" href="https://note.com/yasslab/n/nb468a637dc41?magazine_key=md778735d3f77">
258      <p class='notice-list-title'>Rails 8 対応Webテキスト先行リリース</p><span class='notice-list-date'>2026-03-05</span>
259</a>    </li>
260    <li >
261      
262      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="ncb57c9812545" href="https://note.com/yasslab/n/ncb57c9812545?magazine_key=md778735d3f77">
263      <p class='notice-list-title'>正規表現エディタ「Rubree」を紹介</p><span class='notice-list-date'>2025-12-03</span>
264</a>    </li>
265    <li >
266      
267      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n470bd0a2381b" href="https://note.com/yasslab/n/n470bd0a2381b?magazine_key=md778735d3f77">
268      <p class='notice-list-title'>Railsチュートリアル改善に伴うメンテナンスのお知らせ</p><span class='notice-list-date'>2025-10-22</span>
269</a>    </li>
270    <li >
271      
272      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n820afb5fd29a" href="https://note.com/yasslab/n/n820afb5fd29a?magazine_key=md778735d3f77">
273      <p class='notice-list-title'>プログラミングRuby第5版を支援</p><span class='notice-list-date'>2025-10-10</span>
274</a>    </li>
275
276  <li>
277    <a target="_blank" rel="nofollow noopener" class="notice-list-view-all" href="https://note.com/yasslab/m/md778735d3f77">すべて見る</a>
278  </li>
279</ul>
280
281<script type='text/javascript'>
282  function touchElm(event) {
283    const noteId = event.dataset.noteId;
284    if (false) {
285      $.ajax({
286        type: "POST",
287        url: '/notice_touch',
288      data: { note_id: noteId }
289      });
290
291      event.closest('li').classList.add('notice-list-read');
292      event.previousElementSibling.classList.remove('list-notice-button-unread');
293
294      if (document.querySelectorAll('.notice-list-read').length == 8){
295        event.closest('.notices').previousElementSibling.classList.remove('header-notice-button-unread');
296      }
297    }
298  }
299
300  document.addEventListener('DOMContentLoaded', function () {
301    var notice_all = document.getElementsByClassName("notice-mark-read-all")
302    var notices = Array.from(notice_all);
303    notices.forEach(function(notice) {
304      notice.addEventListener('click', function(event) {
305        var items = document.querySelectorAll(".notice-list-item");
306        var noteIds = []
307
308        for( var n = 0; n < items.length; n++){
309          noteIds.push( items[n].dataset.noteId);
310        }
311
312        if (false) {
313
314          $.ajax({
315            type: "POST",
316            url: '/notice_touch_all',
317          data: { note_ids: noteIds }
318          });
319
320          for( var s = 0; s < items.length; s++){
321            var item_class = items[s].closest('li').classList
322            if(!item_class.contains('notice-list-read')){
323              item_class.add('notice-list-read');
324            }
325            if (items[s].previousElementSibling !== null) {
326              var item_prev_class = items[s].previousElementSibling.classList
327              if(item_prev_class.contains('list-notice-button-unread')){
328                item_prev_class.remove('list-notice-button-unread');
329              }
330            }
331          }
332
333          items[0].closest('.notices').previousElementSibling.classList.remove('header-notice-button-unread');
334        }
335      });
336    });
337  });
338
339
340</script>
340
341
342        </div>
343        
343<script type='text/javascript'>
344        // 他の場所をクリックするとメニューが閉じるように
345          $(document).on('click', function(e) {
346            if (!$(e.target).closest('.header-notice').length) {
347              $('#notice').prop('checked', false)
348            }
349          })
350        </script>
350
351      </div>
352    </div>
353    <ul class="header-icon-nav">
354    <li><a href="/login"><img alt="ログイン" data-src="/images/buttons/sb_button_login.png" loading="lazy" class="lazyload" src="/spinner.svg" /></a></li>
355    <li class="header-icon-long"><a href="/message"><img alt="初めての方へ" data-src="/images/buttons/sb_button_beginner.png" loading="lazy" class="lazyload" src="/spinner.svg" /></a></li>
356  <li class="header-notice">
357    <input type="checkbox" id="notice-mobile"/>
358    <label for="notice-mobile" class="header-button header-notice-button "><i class="fas fa-bell"></i></label>
359    <div class="notices">
360      <ul class="notice-list">
361  <li class="notice-list-heading">
362    お知らせ
363  </li>
364
365    <li >
366      
367      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n4f2b1c2e8e50" href="https://note.com/yasslab/n/n4f2b1c2e8e50?magazine_key=md778735d3f77">
368      <p class='notice-list-title'>RailsTokyo#6 に協賛</p><span class='notice-list-date'>2026-09-11</span>
369</a>    </li>
370    <li >
371      
372      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n4beaf6bed455" href="https://note.com/yasslab/n/n4beaf6bed455?magazine_key=md778735d3f77">
373      <p class='notice-list-title'>AIフィードバックが連携機能に対応</p><span class='notice-list-date'>2026-07-27</span>
374</a>    </li>
375    <li >
376      
377      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n93c30a02ea59" href="https://note.com/yasslab/n/n93c30a02ea59?magazine_key=md778735d3f77">
378      <p class='notice-list-title'>トレーニング:フィードバック機能追加</p><span class='notice-list-date'>2026-05-22</span>
379</a>    </li>
380    <li >
381      
382      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="na1e169dec096" href="https://note.com/yasslab/n/na1e169dec096?magazine_key=md778735d3f77">
383      <p class='notice-list-title'>私設図書館「技術書ライブラリー」の開設を支援</p><span class='notice-list-date'>2026-03-19</span>
384</a>    </li>
385    <li >
386      
387      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="nb468a637dc41" href="https://note.com/yasslab/n/nb468a637dc41?magazine_key=md778735d3f77">
388      <p class='notice-list-title'>Rails 8 対応Webテキスト先行リリース</p><span class='notice-list-date'>2026-03-05</span>
389</a>    </li>
390    <li >
391      
392      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="ncb57c9812545" href="https://note.com/yasslab/n/ncb57c9812545?magazine_key=md778735d3f77">
393      <p class='notice-list-title'>正規表現エディタ「Rubree」を紹介</p><span class='notice-list-date'>2025-12-03</span>
394</a>    </li>
395    <li >
396      
397      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n470bd0a2381b" href="https://note.com/yasslab/n/n470bd0a2381b?magazine_key=md778735d3f77">
398      <p class='notice-list-title'>Railsチュートリアル改善に伴うメンテナンスのお知らせ</p><span class='notice-list-date'>2025-10-22</span>
399</a>    </li>
400    <li >
401      
402      <a target="_blank" rel="nofollow noopener" onclick="touchElm(this)" class="notice-list-item" data-note-id="n820afb5fd29a" href="https://note.com/yasslab/n/n820afb5fd29a?magazine_key=md778735d3f77">
403      <p class='notice-list-title'>プログラミングRuby第5版を支援</p><span class='notice-list-date'>2025-10-10</span>
404</a>    </li>
405
406  <li>
407    <a target="_blank" rel="nofollow noopener" class="notice-list-view-all" href="https://note.com/yasslab/m/md778735d3f77">すべて見る</a>
408  </li>
409</ul>
410
411<script type='text/javascript'>
412  function touchElm(event) {
413    const noteId = event.dataset.noteId;
414    if (false) {
415      $.ajax({
416        type: "POST",
417        url: '/notice_touch',
418      data: { note_id: noteId }
419      });
420
421      event.closest('li').classList.add('notice-list-read');
422      event.previousElementSibling.classList.remove('list-notice-button-unread');
423
424      if (document.querySelectorAll('.notice-list-read').length == 8){
425        event.closest('.notices').previousElementSibling.classList.remove('header-notice-button-unread');
426      }
427    }
428  }
429
430  document.addEventListener('DOMContentLoaded', function () {
431    var notice_all = document.getElementsByClassName("notice-mark-read-all")
432    var notices = Array.from(notice_all);
433    notices.forEach(function(notice) {
434      notice.addEventListener('click', function(event) {
435        var items = document.querySelectorAll(".notice-list-item");
436        var noteIds = []
437
438        for( var n = 0; n < items.length; n++){
439          noteIds.push( items[n].dataset.noteId);
440        }
441
442        if (false) {
443
444          $.ajax({
445            type: "POST",
446            url: '/notice_touch_all',
447          data: { note_ids: noteIds }
448          });
449
450          for( var s = 0; s < items.length; s++){
451            var item_class = items[s].closest('li').classList
452            if(!item_class.contains('notice-list-read')){
453              item_class.add('notice-list-read');
454            }
455            if (items[s].previousElementSibling !== null) {
456              var item_prev_class = items[s].previousElementSibling.classList
457              if(item_prev_class.contains('list-notice-button-unread')){
458                item_prev_class.remove('list-notice-button-unread');
459              }
460            }
461          }
462
463          items[0].closest('.notices').previousElementSibling.classList.remove('header-notice-button-unread');
464        }
465      });
466    });
467  });
468
469
470</script>
470
471
472    </div>
473    
473<script type='text/javascript'>
474    // クリックするとメニューが閉じるように
475      $(document).on('click', function(e) {
476        // 他の場所をクリックするとメニューが閉じる
477        if (!$(e.target).closest('.header-notice').length) {
478          $('#notice-mobile').prop('checked', false)
479        }
480        if (!$(e.target).closest('.toc_mobile_cover').length) {
481          $('#tocCheckMb').prop('checked', false)
482        }
483        // メニューからページ内のリンクをクリックしてもメニューが閉じる
484        if ($(e.target).closest('.accordion-chapter-content').length) {
485          $('#tocCheckMb').prop('checked', false)
486        }
487      })
488    </script>
488
489  </li>
490</ul>
491
492<div class="hamburger-button">
493  <div class="menu-trigger">
494    <span></span>
495    <span></span>
496    <span></span>
497  </div>
498</div>
499
500<div class="drawr">
501  <div class="drawr-login-section">
502    <table>
503      <tr>
504        <td><a href="/members/login">個人向けログイン</a></td>
505        <td><a href="/business/login">法人向けログイン</a></td>
506      </tr>
507    </table>
508  </div>
509
510
511  <div class="movie-look">
512    
513  </div>
514
515
516
517  <hr>
518
519  <ul id="menu" class="menu_drawr">
520    <li><a href="/path">学習の流れを見る</a></li>
521    <li><a href="/help">困ったときのヒント</a></li>
522    <li><a href="/screencast">解説動画で学ぶ</a></li>
523    <li><a href="/trial">お試し動画で学ぶ</a></li>
524    <li><a href="/webtext">Webテキストで学ぶ</a></li>
525    <li><a href="/ebook">電子書籍版で学ぶ</a></li>
526    <li><a href="/#learn-by">コミュニティで学ぶ</a></li>
527    <li><a href="/reading_guide">読み物ガイドを見る</a></li>
528  </ul>
529  <hr>
530  <ul class="menu_drawr">
531    <li><a href="/business">法人・研修支援を見る</a></li>
532    <li><a href="/partner">提携・教材連携を見る</a></li>
533  </ul>
534
535  <div id="chapters"></div>
536
537  <div class="drawr-share">
538    <div class="drawr-links">
539      <div class="mobile-link-share custom-mobile-link">
540        <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Frailstutorial.jp%2F&amp;src=sdkpreparse" target="_blank" rel='noopener'>
541        <div class="share-description-top">
542          <p>シェアする</p>
543        </div>
544
545        <div class="share-description-bottom" style="background-color: #3b5998; border-color: #3b5998;">
546          <svg stroke="#fff" fill="#fff" height="33" viewbox="0 0 1792 1792" width="33" xmlns="http://www.w3.org/2000/svg">
547          <path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
548          </path></svg>
549          <p style="color: #fff; float:right; margin-right:15px;">Share!</p>
550        </div></a>
551      </div>
552
553      <div class="mobile-link-share custom-mobile-link">
554        <a href="https://twitter.com/intent/tweet?hashtags=Rails%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB&original_referer=http%3A%2F%2Flocalhost%3A3000%2F&ref_src=twsrc%5Etfw&text=Rails%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%EF%BC%9A%E5%AE%9F%E4%BE%8B%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6Rails%E3%82%92%E5%AD%A6%E3%81%BC%E3%81%86&tw_p=tweetbutton&url=https%3A%2F%2Frailstutorial.jp%2F&via=RailsTutorialJP">
555          <div class="share-description-top">
556            <p>ツイートする</p>
557          </div>
558
559          <div class="share-description-bottom" style="background-color: #1da1f2; border-color: #1da1f2;">
560            <svg stroke="#fff" fill="#fff" height="33" viewbox="0 0 1792 1792" width="33" xmlns="http://www.w3.org/2000/svg"><path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"></path></svg>
561            <p style="color: #fff; float:right; margin-right:15px;">Tweet!</p>
562          </div>
563        </a>
564      </div>
565    </div>
566  </div>
567</div>
568
569  </section>
570</header>
571
572<div class="menu">
573  <ul class='links'>
574    <li class='box'><a href="/path">学習の流れ</a></li>
575    <li class='box'><a href="/webtext">Webテキスト</a></li>
576    <li class='box'><a href="/screencast">解説動画</a></li>
577    <li class='box'><a href="/ebook">電子書籍</a></li>
578    <li class='box'><a href="/#learn-by">質問対応</a></li>
579    <li class='box'><a href="/business">法人・研修支援</a></li>
580    <li class='box'><a href="/partner">大学・教材連携</a></li>
581    <li class='box'><a href="/reading_guide">読み物ガイド</a></li>
582  </ul>
583</div>
584
585
586<script>
587  // グローバルナビで今いる場所が視覚的にわかるように
588  $(function() {
589    $('.menu .box a').each(function() {
590      const href = $(this).attr('href')
591      if(location.href.match(href) && !(location.hash)){
592        $(this).addClass('active')
593      }
594    })
595  })
596</script>
596
597
598<!-- 緊急ニュースなどは news-warning のclassをつける -->
599<!--
600<div class="header-news">
601  <a href="https://note.com/yasslab/n/n470bd0a2381b?magazine_key=md778735d3f77" target="_blank" rel="noopener">
602    【メンテナンスのお知らせ】2025年10月26日(日)4:00~4:30の間メンテナンスのためサイトにアクセスできなくなります。
603  </a>
604</div>
605-->
606
607
608<div id='content'>
609
610<div id='main'>
611<div id='option'>
612
613
614
615<div id='option' class='buy-screencast'>
616  <img id="buy-img" alt="RailsチュートリアルWebテキスト購入" class="lazyload page-thumbnail" data-src="/images/buy/buy-webtext-v7.png" loading="lazy" src="/spinner.svg" />
617  <h1 class="tc">Rails 7 対応!<br class="pc-ignore">最新版Railsチュートリアル</h1>
618
619<div class="three-block" style="margin-bottom: 20px;">
620  <div class="center"><a href="https://railsguides.jp/7_0_release_notes.html" target="_blank" rel="noopener"><img class="lazyload web-text" alt="rubyイメージ" data-src="/images/buy/icon-ruby.png" loading="lazy" src="/spinner.svg" /></a>
621    <p><b>
622      <a href="https://railsguides.jp/7_0_release_notes.html" target="_blank" rel="noopener">Rails 7</a><br class="pc-ignore"> 対応
623    </b></p>
624    <ul>
625      <li>Importmap 対応</li>
626    </ul>
627  </div>
628  <div class="center"><a href="https://github.blog/jp/2020-04-15-github-is-now-free-for-teams/" target="_blank" rel="noopener"><img class="lazyload web-text" alt="Gitアイコン" data-src="/images/buy/icon-git.png" loading="lazy" src="/spinner.svg" /></a>
629    <p><b>
630      <a href="https://github.blog/jp/2020-04-15-github-is-now-free-for-teams/" target="_blank" rel="noopener">GitHub</a><br class="pc-ignore"> 対応
631    </b></p>
632    <ul>
633      <li>より現場に近いサービス</li>
634    </ul>
635  </div>
636  <div class="center"><a href="/reading_guide#next-frontend"><img class="lazyload web-text" alt="Hotwire アイコン" data-src="/images/buy/icon-hotwire.png" loading="lazy" src="/spinner.svg" /></a>
637    <p><b>
638      <a href="/reading_guide#next-frontend">Hotwire</a><br class="pc-ignore"> 対応
639    </b></p>
640    <ul>
641      <li>アプリ構築の新しい方法</li>
642    </ul>
643  </div>
644</div>
645<ul class="mobile-only-list">
646  <li>Webpacker や form_with に対応</li>
647  <li>より現場に近いサービスで学べる</li>
648  <li>Rails 標準の実践的な画像投稿</li>
649</ul>
650<style media="screen">
651  #option .three-block li {
652    list-style: none;
653    text-align: left;
654    font-weight: 500;
655    margin-bottom: 4px;
656  }
657  @media screen and (max-width: 660px){
658    .three-block ul {
659      display: none;
660    }
661  }
662  #option .mobile-only-list {
663    background: #f6f6f6;
664    border-radius: 5px;
665    list-style: none;
666    margin: 24px 0;
667    padding: 24px;
668    display: none;
669  }
670  @media screen and (max-width: 660px){
671    #option .mobile-only-list {
672      display: block;
673    }
674  }
675</style>
676
677<div class='instructions-for-screencast'>
678  <p class="center" style="margin:2em 0;">
679    <b>Rails 7 に対応</b>した第7版Railsチュートリアルをリリースしました!<br class="sp-ignore">
680    プロダクト開発が学べる大型チュートリアルで学んでみませんか?
681  </p>
682
683  <div style='padding-top: 15px; margin-bottom: 50px; '>
684    <div class='three-block'>
685  <div class="center"><img data-src="/images/buy/webtext-01.jpg" loading="lazy" class="lazyload" src="/spinner.svg" />
686    
687  </div>
688  <div class="center"><img data-src="/images/buy/webtext-02.jpg" loading="lazy" class="lazyload" src="/spinner.svg" />
689    
690  </div>
691  <div class="center"><img data-src="/images/buy/webtext-03.jpg" loading="lazy" class="lazyload" src="/spinner.svg" />
692    
693  </div>
694</div>
695
696  </div>
697
698  <p class="center">
699    <b>第6版と第7版の違い</b>については、次の note 記事をご参照ください🔽
700    <div>
701    <a target="_blank" rel="noopener" class="blocklink" href="https://note.com/yasslab/n/n1ce48b4daa6a">
702      <div>
703	<p class="blocklink-title">🎓 Rails 7 対応版Webテキストをリリース</p>
704	<p class="blocklink-url">https://note.com/yasslab/n/n1ce48b4daa6a</p>
705      </div>
706      <img alt="🎓 Rails 7 対応版Webテキストをリリース" class="lazyload blocklink-thumbnail" data-src="/images/thumbnails/note-webtext-v70.png" loading="lazy" src="/spinner.svg" />
707</a></div>
708
709  </p>
710</div>
711
712
713<h2 id='faq' style="margin-top: 20px;">
714  <a href='#faq'><i class='fad fa-question-circle'></i></a>
715  よくあるご質問
716</h2>
717
718<dl class='qanda'>
719  <dt>前提とする知識などはありますか?</dt>
720  <dd>Git/GitHubの使い方やRubyの文法などはWebテキスト中で解説されていますが、難しいと感じた方のための<a href="/path">実践入門シリーズ</a>もあります。<a href="/help#roadmap">学習ロードマップ</a>を参考に自分流の学習計画を立てるのもオススメです。<br>
721    <br>
722    <a href="help#roadmap"><img alt="学習マップ" width="100%" data-src="/chapters/images/figures/study_map.png" loading="lazy" class="lazyload" src="/spinner.svg" /></a>
723    <small class="center">Rails 7 対応の解説動画は2023年4月から1章ずつ先行リリースされていきます。</small>
724  </dd>
725
726  <dt>買い切りですか? 月額課金 (サブスク) ですか?</dt>
727<dd><b>書店にある本や雑誌と同じで、買い切り型</b>となります。月額課金 (サブスク) ではないため、<b>毎月の課金は発生しません。</b></dd>
728
729
730  <dt>バージョンアップ版がリリースされたら無料アップグレードできますか?</dt>
731  <dd>いいえ、<a href="/screencast">解説動画</a>と同じでアップグレードは有償対応となります。コンテンツの継続的な更新には多くの時間とお金がかかるため、ご理解していただけると嬉しいです。</dd>
732
733  <dt>銀行振込やコンビニ決済に対応していますか?</dt>
734  <dd>いいえ、対応していません。<a href="/screencast">解説動画(Webテキスト付き)</a>は銀行振込やコンビニ決済にも対応しておりますので、よければ<a href="/screencast">解説動画</a>をご検討していただけると幸いです。<br>
735    <br>
736    <a href="/screencast"><img alt="早く、しっかり学びたい人へ - Railsチュートリアル解説動画" width="100%" data-src="/images/buy/buy-mainimg-noversion.jpg" loading="lazy" class="lazyload" src="/spinner.svg" /></a>
737  </dd>
738
739  <dt>デビットカードは使えますか?</dt>
740<dd><b>はい!デビットカードにも対応</b>しています。ただし、発行会社によってはオンライン決済の一部をブロックしていることがあります。決済できなかった場合は、カード発行会社にお問い合わせいただくか、もしくはスマホアプリ『<a href='https://kyash.co/' class='external-link' target='_blank' rel="noopener">Kyash</a>』や『<a href='https://vandle.jp/' class='external-link' target='_blank' rel="noopener">バンドルカード</a>』などをお使いいただけると幸いです。<br>
741  <br>
742  📹 スマホアプリ『<a href='https://kyash.co/' class='external-link' target='_blank' rel="noopener">Kyash</a>』を使った決済例<br>
743  <div class='youtube'>
744    <iframe title='スマホアプリ『Kyash』を使った決済例を見る' width='100%' frameborder='0'
745 src='https://www.youtube.com/embed/i8tPsanvEzM?rel=0&start=0&hl=ja'
746 allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
747 allowfullscreen></iframe>
748
749  </div>
750</dd>
751
752<dt>
752決済に使ったカード情報は保存されますか?</dt>
753<dd><b>いいえ、保存されません。</b>安心してご購入していただけるよう、初回購入では必ず保存されない仕様になっています。また決済には Amazon や Google、TOYOTA なども利用している決済代行サービス『<a href='https://stripe.com/jp'>Stripe</a>』を使っています。<br>
754  <br>
755  <a href="https://stripe.com/jp"><img alt="インターネット向け決済インフラ - Stripe" width="100%" data-src="/images/buy/stripe_top_page.png" loading="lazy" class="lazyload" src="/spinner.svg" /></a>
756</dd>
757
758<dt>カード入力欄にある CVC とは何ですか?</dt>
759<dd>CVC とはセキュリティコードのことで、Visa、Mastercard、JCB などの<a href='https://www3.vpass.ne.jp/mem/service/sec/code01.jsp?cc=009'>カードの裏面にある3桁の数字</a>です。Amex は<a href='https://www.americanexpress.com/japan/contents/guide/howtouse/online_shopping.shtml#security'>表面</a>にあります。</dd>
760
761
762  <!-- memo: 第7版解説動画リリース後に表示する
763  <dt>解説動画とWebテキストをまとめて購入できますか?</dt>
764  <dd>はい、<a href="/screencast">解説動画</a>をお買い求めいただくと、自動的にWebテキストも付いてきます。まとめて購入したい場合は<a href="/screencast">解説動画</a>ページからお買い求めください。</dd>
765  -->
766
767  <dt>アカウントを複数人で共有できますか?</dt>
768<dd>いいえ、本商品では複数人でのアカウント共有はできません。複数人でご利用したい場合は『<b><a href="/business">チーム向け研修支援サービス</a></b>』をご利用ください。<br>
769  <br>
770  <a href="/business"><img alt="テレワークに対応!チーム向け研修支援サービス" width="100%" data-src="/images/business/cover.png" loading="lazy" class="lazyload" src="/spinner.svg" /></a>
771</dd>
772
773  <dt>最新情報はどこで確認できますか?</dt>
774<dd>note の『<a href="https://note.com/yasslab/m/md778735d3f77" target="_blank"><b>Railsチュートリアル マガジン</b></a>』または『<a href="https://twitter.com/RailsTutorialJP" target="_blank">@RailsTutorialJP</a>』をフォローしていただくと最新情報をチェックできます。また<a href='https://youtube.com/YassLab'>公式 YouTube チャンネル</a>からは講演動画や対談動画なども公開しているので、よければ <a href='https://youtube.com/YassLab'>YouTube</a> もぜひ!📺✨</dd>
775
776</dl>
777
778<br>
779
780  <h2 id="howto">
781    <a href='#howto'><i class="fad fa-shopping-cart"></i></a>
782    購入から閲覧までの流れ
783  </h2>
784  <div class='three-block three-block-responsive'>
785  <div class="center"><img alt="メールアドレスと決済情報を入力" data-src="/images/buy/step1.png" loading="lazy" class="lazyload" src="/spinner.svg" />
786    <br>決済情報を入力し<br>『支払う』をクリック
787  </div>
788    <div class="center"><img alt="アカウント登録と領収書の2つのメール確認" data-src="/images/buy/webtext-step2.png" loading="lazy" class="lazyload" src="/spinner.svg" />
789      <br>領収書とアカウント登録の<br><b>2つのメール</b>が届きます
790    </div>
791    <div class="center"><img alt="アカウント登録メールから登録" data-src="/images/buy/webtext-step3.png" loading="lazy" class="lazyload" src="/spinner.svg" />
792      <br>手順に沿ってアカウント登録すると<br>ご覧いただけます
793    </div>
794</div>
795
796
797  <a class="btn-red" style="margin-top: 50px; margin-bottom: 100px;" href="/chapters/beginning">まずは試し読みしてみる</a>
798
799  <h2 id="purchase" style="margin-top: 40px;">
800    <a href='#purchase'><i class="fad fa-credit-card"></i></a>
801    購入する
802  </h2>
803  <div style='padding-top: 15px; margin-bottom: -15px;'>
804    <div class='three-block'>
805  <div class="center"><img data-src="/images/buy/webtext-01.jpg" loading="lazy" class="lazyload" src="/spinner.svg" />
806    
807  </div>
808  <div class="center"><img data-src="/images/buy/webtext-02.jpg" loading="lazy" class="lazyload" src="/spinner.svg" />
809    
810  </div>
811  <div class="center"><img data-src="/images/buy/webtext-03.jpg" loading="lazy" class="lazyload" src="/spinner.svg" />
812    
813  </div>
814</div>
815
816  </div>
817
818  <p class='center-link' style="padding-bottom: 20px;">下記フォームからWebテキストを購入できます。<br class="sp-ignore">決済完了後、画面の案内にしたがってお読みください。<br class="sp-ignore"></p>
819  <section class='form-center' style='margin-bottom:150px;'>
820<form id="payment-form" class="payment-form" action="/buy_text70" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="pjcQgtGLrzIq3q9Do0VOL_72OA5NoecpIfhgoTcqceWcw9c8wgshM8i313y79qATBXQkvksKA4XuNnvx9Eu2KQ" autocomplete="off" /><br>
821<label for="email">メールアドレス</label>
822<br>
823<input required="required" class="StripeElement" placeholder="[email protected]" style="width:100%;font-size:16px;margin-bottom:15px;" type="text" name="email" id="email" />
824<p class='already-member' style='display:none'>このメールアドレスは既に使われています。</p>
825<p class='typo' style='display:none'>
825入力内容に誤りがあります。</p>
826<br>
827<div class='payment-formform__row'>
828<label for='card-element'>
829クレジットカードまたはデビットカード
830</label>
831<div id='card-element'></div>
832<div id='card-errors' role='alert'></div>
833</div>
834<br>
835<div class='field'></div>
836<input name="term_of_use" type="hidden" value="0" autocomplete="off" /><input required="required" style="display:inline" type="checkbox" value="1" name="term_of_use" id="term_of_use" />
837<label style="display:inline" for="term_of_use"><a target="_blank" href="/term-of-use">利用規約</a>に同意する</label>
838<br>
839<div class='card-button'><button name="button" type="submit" class="card-btn btn-red form-button" data-disable-with="処理中..."><span class="original-amount"><span class="yen-symbol">¥</span>980<span class="original-amount-small">(税込 <span class="yen-symbol">¥</span>1,078)</span></span>を支払う</button></div>
840</form><p class='center-link' style='font-size: 12px; color: #333; text-align: center; margin-top: 50px;'>カード決済でお困りの場合は <a href="mailto:[email protected]?body=%E8%BF%BD%E5%8A%A0%E8%B3%BC%E5%85%A5%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%A8%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%9F&amp;subject=Rails%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%206.0%20Web%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E8%BF%BD%E5%8A%A0%E8%B3%BC%E5%85%A5%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">[email protected]</a> までお問い合わせください</p>
841
842</section>
843
844</div>
845
846</div>
847</div>
848</div>
849</div>
850<div id="fb-root"></div>
851<script>(function(d, s, id) {
852  var js, fjs = d.getElementsByTagName(s)[0];
853  if (d.getElementById(id)) return;
854  js = d.createElement(s); js.id = id;
855  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=144878509039953&version=v2.0";
856  fjs.parentNode.insertBefore(js, fjs);
857}(document, 'script', 'facebook-jssdk'));</script>
857
858
859<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
859
860
861<!--TOPへ戻るボタン-->
862  <div id="page_top"><a href="#"></a></div>
863
864<section id="footer">
865  <div class="footer-inner">
866    <div class="footer-box">
867      <a href="/"><img alt="Railsチュートリアルのロゴ" class="lazyload footer-logoimg" data-src="/images/layout/logo.png" loading="lazy" src="/spinner.svg" /></a>
868      <a href="/"><img alt="Railsチュートリアル&quot;" class="lazyload footer-sitetitle" data-src="/images/layout/logo-ja.png" loading="lazy" src="/spinner.svg" /></a>
869      <div class="comment">
870        <p>Railsチュートリアルは <a href="https://yasslab.jp/ja/" target="_blank" rel="noopener">YassLab 社</a>によって運営されています。</p>
871	<p>コンテンツを継続的に提供するため、<a href="/#text">書籍</a>・<a href="/screencast">動画</a>・<a href="/#learn-by">質問対応サービス</a>などもご検討していただけると嬉しいです。</p>
872        <p><a href="/business">研修支援</a>や<a href="/partner">教材連携</a>にも対応しています。<a href="https://note.com/yasslab/m/md778735d3f77" target="_blank" rel="noopener">note マガジン</a>や <a href="https://www.youtube.com/channel/UCgSPCgA1ksSPKg1Jp99EEFw" target="_blank" rel="noopener">YouTube チャンネル</a>も始めたので、よければぜひ遊びに来てください!</p>
873      </div>
874
875      <section class="footer-sns">
876       <a href="https://twitter.com/RailsTutorialJP" target="_blank" rel="noopener"><i class="fa fa-twitter-square fa-2x" aria-hidden="true" title="Twitter"></i></a>
877       <a href="https://www.facebook.com/yasslab.jp" target=_blank" rel="noopener"><i class="fa fa-facebook-square fa-2x" aria-hidden="true" title="Facebook"></i></a>
878       <a href="https://github.com/YassLab" target="_blank" rel="noopener"><i class="fa fa-github-square fa-2x" aria-hidden="true" title="GitHub"></i></a>
879       <a href="https://note.com/yasslab/m/md778735d3f77" target="_blank" rel="noopener"><i class="fa fa-rss-square fa-2x" aria-hidden="true" title="note"></i></a>
880       <a href="https://www.youtube.com/channel/UCgSPCgA1ksSPKg1Jp99EEFw" target="_blank" rel="noopener"><i class="fa fa-youtube-square fa-2x" aria-hidden="true" title="YouTube"></i></a>
881
882       
882<script src="https://apis.google.com/js/platform.js"></script>
882
883       <div class="g-ytsubscribe" data-channel="YassLabChannel" data-layout="default" data-theme="dark" data-count="default"></div>
884
885      </section>
886    </div><!--//footer-box-->
887
888    <div class="footer-box">
889      <h3>個人の方へ</h3>
890      <ul>
891	<li><a href="/message">初めての方へ</a></li>
892	<li><a href="/path">学習の流れ</a></li>
893	<li><a href="/webtext">Webテキストで学ぶ</a></li>
894	<li><a href="/ebook">電子書籍で学ぶ</a></li>
895	<li><a href="/screencast">解説動画で学ぶ</a>(<a href="/trial">無料お試し</a>)</li>
896	<li><a href="/#community">コミュニティで学ぶ</a></li>
897        <li><a href="/#sharewis">質問しながら学ぶ</a></li>
898	<li><a href="/reading_guide">完走者向け読み物ガイド</a></li>
899	<!--<li><a href="/#learn-by">スクールで学ぶ</a></li>-->
900      </ul>
901
902      <h3>法人の方へ</h3>
903      <ul>
904	<li><a href='/ai_support'><span style='letter-spacing: 1px;'>AI</span>に質問する機能 - 受講者向け</a></li>
905	<li><a href="/training">トレーニング機能 - 受講者向け</a></li>
906	<li><a href="/business">研修支援サービス - 担当者向け</a></li>
907	<li><a href="/partner">教材連携サービス - 事業者向け</a></li>
908	<!--<li><a href="/partner_api">API 連携サービス - 事業者向け</a></li>-->
909      </ul>
910    </div><!--//footer-box-->
911    <div class="footer-box">
912      <h3>運営に関する情報</h3>
913      <ul>
914        <li><a href="https://yasslab.jp/ja" target="_blank" rel='noopener'>運営会社</a></li>
915	<li><a href="/term-of-use">利用規約</a></li>
916        <li><a href="/policy">特定商取引法に基づく表記</a></li>
917        <li><a href="https://yasslab.jp/ja/privacy" target="_blank" rel="noopener">プライバシーポリシー</a></li>
918	<li><a href="/contact">お問い合わせ</a></li>
919      </ul>
920
921      <h3>TIPS</h3>
922      <ul>
923	<li><a href="/help">ヘルプ − 困ったときのヒント集</a></li>
924	<li><a href="/#walkthrough">Railsチュートリアルの歩き方</a></li>
925        <li><a href="/#toc">Railsチュートリアル目次</a></li>
926	<li><a href="https://note.com/yasslab/m/md778735d3f77" target="_blank" rel="noopener">Railsチュートリアル開発マガジン</a></li>
927        <li><a href="https://github.com/yasslab/sample_apps" target="_blank" rel="noopener" title="GitHubへ">GitHub - コードサンプル</a></li>
928        <li><a href="https://twitter.com/hashtag/Railsチュートリアル" target="_blank" rel="noopener" title="twitterへのリンク">Twitter - #Railsチュートリアル</a></li>
929        <li><a href="https://railsguides.jp/" target="_blank" rel="noopener">Railsガイド - 1600ページの大型参考書</a></li>
930      </ul>
931    </div><!--//footer-box-->
932  </div><!--footer-inner-->
933</section>
934<script>
935  $(function(){
936    if ($(window).width() <= 870 && $('.mobile-nav').length) {
937      $('.footer-inner').css('margin-bottom', '62px');
938    }
939  });
940  $(window).resize(function() {
941    if ($('.mobile-nav').css('display') == 'none' || !($('.mobile-nav').length)) {
942      $('.footer-inner').css('margin-bottom', '');
943    } else {
944      $('.footer-inner').css('margin-bottom', '62px');
945    }
946  });
947</script>
947
948
949</article>
950
951
952    
952<script>
953      twemoji.parse(document.body);
954    </script>
954
955  </body>
956</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.