こんにちは！まろんぼーいです。
今回は、「初心者がWebアプリを作ってみた」シリーズの第4回です。
このシリーズでは、過去に完全初心者の僕が作ったWebアプリを参考に、
初心者なりに試行錯誤しながらその改良版を一から作っていく過程をお見せしています。
このシリーズのモットーは、「同様の初心者が、アプリ作成の流れをつかみながら同様のアプリを作れるようになること」です。
ということで、基本的にアプリを作成していく過程を順を追って解説していますが、
「正確な内容」よりも、「わかりやすいなんとなくのイメージ」を重視して記事を書いています。
経験者の方からすると、「正確にはちがう！」と突っ込みたくなるような内容もあるかと思いますが、
難しい知識よりも、なんとなくでいいので流れをつかむ！
そんな内容となっていますので、同じ初心者の方の参考になればうれしいです！
それでは今回もはじめていきましょう！
〇前回の進捗
前回は、やっとWebページの中身に入り、トップページのModel、Controller、Routerを作りました。
ただ、前回はViewを作るまでたどり着けなかったので（笑）、
今回はまずトップページのViewを作りトップページを完成させ、
ユーザ機能の実装に入っていきたいと思います！
〇Ruby、CSS、HTMLの違い
Viewの作成を始める前に、こちらについて書いておきます。
Ruby on Railsでは、主にRuby、HTML、CSSの三つの言語を扱います。
（応用でJavascriptも使いますがとりあえず置いときます）
プログラミングスクールに入って体系的に学ぶ前、
正直この3つの言語の違いさえわかりませんでした。
なので、Railsをやる際に3つの言語を扱うと聞いても、
「同じアプリの中で3つの言語？はい？どうやって？」
と思っていました（笑）。
なので、同じような方がいた場合を考え違いを書いておきます。
Rubyはいわゆるサーバーサイドの言語です。
つまり、サーバー内のデータを扱う言語です。
超簡単にかみ砕くと、僕たち人間が見えない、パソコンの中で実行してるコードです。
Railsでいうと、
Modelはサーバのデータのファイルなのでモロサーバサイドですよね。
また、アプリにアクセスしてる人は、データの中身を直接見ることができません。
なので、Rubyで書きます。
ちなみにRubyは「～.rb」で表します。
ControllerとRouterも、アプリ内の行動とModelを結び付けるファイルたちなので、
アクセスしている人からは見えません。
よってこちらもRubyで書きます。
さて、次にViewですが、こちらはアプリのレイアウトでした。
これは、アクセスしている人、つまりアプリを使っている人から見ることができます。
このように、実際にアクセスしているユーザが見る部分を各言語を、
フロントエンドの言語といいます。
フロントエンドの言語が、HTML（～.html）とCSS（～.css）です。
HTMLは良く知られていますが、文字を書くコードです。
対してCSSは、HTMLで作った文字たちをデザインする言語です。
色や詳細な配置を決めたりする言語です。
こちらの事前知識をふまえて、Viewの作成に入ります。
〇【トップページ】Viewの作成
それではViewを完成させてしまいましょう！
Viewは、ページのレイアウトを示しています。
ファイル名は、Controllerで定義したメソッドとリンクしています。
indexメソッドの場合は、index.html.erbです。
・application.html.erb
では早速index.html.erbを編集したいところですが、
その前にやることがあります。
上のフォルダを見ると、views/layoutsのフォルダに
application.html.erbというフォルダがあります。
これはすべてのページに共通するレイアウト設定を管理しているファイルで、
まずはこれを設定する必要があります。
ただ、このファイルって「これとこれとこのファイルをすべてのViewで適用させます！」と定義するファイルで、
適用するための定型文が決まっています。
なので…
僕が以前別アプリで作ったファイルをコピペしちゃいましょう！（笑）
とりあえず、下に僕が以前作ったapplication.html.erbを載せちゃいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>MyHobby</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <div class="container"> <%= yield %> </div> </body> </html> |
もう、細かいことは覚えなくていいと思います。
（というか、僕が覚えていません（笑））
ただ簡単に言うと、
|
1 2 3 4 5 6 7 8 |
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>MyHobby</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> |
このへんは、文字コードの統一だったり、セキュリティのための設定
|
1 2 3 4 5 6 7 8 9 10 11 |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> |
ここは、bootstrap、jqueryなどの適用設定となっています。
bootstrapはページのデザインを簡単にできるツールです。
Viewを作るうえでbootstrapは必須なので、勉強することをお勧めします！
.
ちなみにjqueryはjavascriptを簡単に記述するためのファイルですが、
基本機能のみの実装には必要ないので、ここで覚える必要はないと思います。
|
1 2 3 |
<div class="container"> <%= yield %> </div> |
ではあとはこの部分ですが、ここはとりあえずスルーして先に進みましょう（適当）
では、とりあえずapplication.html.erbはオッケーです。
・index.html.erb（toppage）
あとは、先ほど自分で作ったtoppageのindex.html.erbを編集します。
前回の記事でトップページのレイアウトを示しました。
ここでも再度レイアウトのイメージを載せておきます。
もちろん、まだリンクや細かいレイアウトは何も設定していないので、
ただのHTMLファイルになります。
上記のレイアウトを表示させるためのHTMLを、以下のように書きました。
|
1 2 3 4 5 6 |
<div class="center jumbotron"> <div class="text-center"> <h1>ようこそ！</h1> <h3>始める</h3> </div> </div> |
「class=”center jumbotron”」では、bootstrapのjumbostronクラスを使用しています。
その他のコードの説明は、HTMLの超基本コードなので、勉強しておきましょう。
ちなみに、各コードの基礎の学習は、今の時代無料でできます。
僕は、Progateを使って基礎の学習をさせていただきました！
このアプリは、完全初心者が楽しくプログラミングを始めるのに持って来いの素晴らしいアプリだと思うので、
HTML、CSS、Rubyの基礎はここで学んでしまうとよいと思います！
ここまで出来たら、再度ターミナルにて
|
1 |
$ rails s |
を実行し、アプリを起動させましょう。
（すでに起動されている場合は必要ありません。）
アプリを開くと（トップページに飛ぶ）、
無事、トップページに以下の画面が表示されました！
これにて、トップページを作ることに成功しました！！！
〇次回 ～User機能の実装について～
トップページができたので、次回からはUser機能の実装に入っていきます。
Userからはトップページと違いデータベース、つまりModelを扱うので、Model、Controller、Router、Viewの操作が少々複雑になっていきます。
でも僕も初心者なので、一つずつ丁寧にやっていきますので、今後もこちらの記事を参考に進んでいっていただければと思います。
今回も、ありがとうございました！
