いろいろ学べる「管理ページ」のWebサービス！
Silicon Valley Super Ware
2020年5月12日
いろいろ学べる「管理ページ」のWebサービス！
「お問合せページ」は、4月に作ったHTMLファイルベースのお問合せフォームと 内容的にはほぼ同じなので、あまりフレームワークを使うメリットを感じられない方も 多かったのではと思います。管理ページになると、少しはフレームワークのありがたみがわかってきます。
管理ページには「２つの顔」がある！
一番大きな違いは、管理ページには「２つの顔」があります。- ログイン画面（管理者がログインしていない状態）
- 管理画面（管理者がログインしている状態）
ログインの状態で画面を切り替える！
Vue.jsには「v-if」とう記述方法があります。これは、「template」の部分の HTMLを書く際にこのアトリビュートを使うと、条件によって表示したり、 表示しなかったりをコントロールできる機能です。Vueの特徴は、HTMLの方に「プログラムの機能を持たせている」所があります。
これがReactの場合は、JavaScript側でレンダリング（画面の書き出し）を 制御する方法が使われていますが、Vueは違ったアプローチで実現しています。この辺りが、好みが分かれるところの一つです。
<div v-if="login">
<p>ログインしている場合に表示</p>
</div>
<div v-if="!login">
<p>ログインしていない場合に表示</p>
</div>
このように、2つの違った「顔」を別々のブロックに分けて書いて、
条件によって表示する部分を変えるという事ができます。
<p>ログインしている場合に表示</p>
</div>
<div v-if="!login">
<p>ログインしていない場合に表示</p>
</div>
これができると、２つの顔があっても楽勝ですよね？
この辺が、HTML単体でページを作る場合には面倒な部分を Vue.jsを使うと簡単にできてしまう！ そのあたりが、効率アップの理由です。部品化を進める！
もう一つ、考えたいことは今回のような「管理ページ」の場合、 一つのページで作る事は難しくありません。しかし、将来のWebサービスの開発を考えると、よく使う部分は 部品にしておくと、将来再利用する事ができます。 当然、必要な度に最初から作る必要がなくなるので、効率も上がります。
部品が充実すれば、あとは組み合わせるだけでWebサービスが作れる！
今回の「管理ページ」では、３つの部品化を考えています。- ログインのフォーム
- 個別のメッセージを表示するフォーム
- テーブルの表示（これはなくても良いかもしれません）
部品化のメリット！
部品化のメリットで大きな部分は「再利用」をする事にあります。 しかし、それ以外にもいろいろ恩恵を受けられます。コードが見やすくなる！
一つのページに詰め込んでいろいろ書くよりは部品化をすすめて、 一つのファイルの記述をシンプルにした方が、見通しの良いコードになります。見やすいコードにすることは、デバッグも楽になりますし、後でコードの手直しをする場合も 楽になります。コードは書いている時には余り問題は無いものですが、時間が立つと 詳細は忘れてしまうものです。
後で見てもわかりやすいコードは、結果的には大きな時間の節約になります。
部品化して、管理ページの記述をシンプルに！
そうした理由から、少なくても、2つの部品（ログインフォームとメッセ―ジフォーム）に 分けて作るとコードが見やすくなります！管理ページは3つのVUEファイルで
管理ページのVUEファイル、ログインフォーム、メッセージ表示フォームに 分ける事にします。今回はお問合せのリストのページは管理ページに入れてしまいます。全部で３つのファイルを作ってください！
お問合せの表を管理ページに残したのには理由があります！モジュール間のデータの受け渡しを今回は少なくすることを優先しました！
実は部品化の問題点もあります！それは、モジュール間でデータの受け渡しを しないといけなくなるからです。実はこれが意外に面倒なので今回はシンプルにするために、 モジュール間のデータの受け渡しを少ないモデルにしたわけです。 詳しい話はこれからの投稿で説明していきます！
次はログインフォーム
明日の予定はログインフォームと管理ページをつなげる作業にする予定です。簡単なデータのやり取りも出てきます！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿