今月のまとめ　～　Nuxt.jsを使うか？

Silicon Valley Super Ware

2020年8月24日


今月のまとめ　～　Nuxt.jsを使うか？

今週は、今月のまとめをお届けしています！
すでに、紹介している通り、今月紹介した登山・ハイキングのためのWebサービスは「無料」 で提供させて頂いております。 一応、収益を上げる事も考えているので、収益は広告とアフリエイトを通して得られるようにという ビジネスモデルで運用しています。

使いやすさと、アクセスを増やすために「サービス（プログラム）」だけではなく、
その機能や使いかたなどを従来のようなWeb形式で同時に提供しています。

それに関連して、幾つか頂いたご質問があります。
それは、Vue.jsではなく、Nuxt.jsは使わないのかという事です！ 今回は、その辺りについてまとめてみました。

Nuxt.jsを使った方が便利！

結論から申し上げますと、Nuxt.jsを使った方がいろいろと良い事があります！
通常のフロントエンドフレームワークのVue.jsやReactを利用した場合は、 ページの生成（レンダリング）は基本的にJavaScriptで行う事になります。 つまり、通所のWebページで使われるHTMLのファイルではなく、表示する画面（中身）を JavaScriptを利用して作っています。
そのため、サーチエンジンとの相性が余りよくないと言われていました。

基本的にGoogleの場合は、そうした、JavaScriptで生成された部分も検索対象として 対応しているので、
最近は大きな問題ではないといわれています。

以前はサーチエンジン対策の為に、バックエンドでレンダリングをするために、 Nuxt.jsを採用するケースも良く耳にしましたが最近では特にバックエンドでやらなくても ある程度は問題がないようです。
しかし、従来のフロントエンドのレンダリングはページ読み込み後にJavaScriptを実行して 行うようになっているため、ページの読み込み後の表示が遅くなるという欠点もあります。 フロントエンドでレンダリングをしてしまえば、読み込み前にページのレンダリングが住んでいるので 読み込み時間の改善が可能になります。
ページのルーティング（routing）も従来のHTMLファイルを参照するような形で可能になるのも魅力です。
Vue.jsでVue Routerを使った場合、ヒストリーモードの場合は、通常のHTMLファイルをしていする感じで URLの指定ができますが、標準のモードでは基本のURLの後に「＃」が入ります。 機能的には問題はないのですが、ちょっと違和感を感じる利用者もいらっしゃるかと思います。
Nuxtでは、「＃」なしで、通常のように指定が可能です。
少し調べてみるといろいろ良い事あ出てきます！

Nuxt.jsは基本はVue.jsと同じ！

便利なので使わない手はない！という感じですが、今回は採用を見送りました。
幾つか理由があって、4月からの大きなテーマは、「最小限の勉強でWebサービス」を掲げている点にあります。 基本技術は「HTML」「CSS」「JavaScript」を中心に、Firebaseとフロントエンドのバックエンドを加えて Webサービスを作れるようにという趣旨でお届けしています。

なので、敢えて勉強する範囲は広げないという意味でブログでの紹介は見送りました。

今回敢えて取り上げたのは、「余裕があるならば便利」だからです！
既に触れたように、中身は殆どVue.jsと同じです。 若干初期設定の仕方や、ファイルの構成が違いますが、Vue.jsを使いこなしていれば 余り問題になる事はないと思います。
実際に、今回紹介したサービスも現在公開中の物は、Vue.jsで作ってあります。 しかし、水面下では、Nuxt.jsを実装中です。 今後、Webサイトとして、ドキュメントやさらに詳しい説明などのページを追加していく上では Nuxt.jsの方が有利と判断したからです。

Next と　Nuxt

フロントエンドと同様にVue版のバックエンドレンダリング版が、Nuxtですが、 React版は、Nextという事になります。やっている事は現在はほぼ同じです。
私の場合、多くの実装がReactなのでNextは使用した事があるのですが、 Nuexは殆ど利用経験がありませんでした。そこで、今回はこの登山・ハイキングのWebサービスを 題材に、Nuexで実装を進めています。既にVue.jsでも幾つかのWebサービスを作成していますので 大きな問題はなく進んでいます！
シリコンバレースーパーウエアでは、単に機能を作るだけではなく、ビジネスを意識した サービス作りの手法を提供しています。 単純に、Webサービスを作るだけではなく、どのように作って、どのようにビジネスにつなげて 行くかが鍵です。また、フリーランスの方だけではなく、就職を考えている方にも 「実践力」を養うことで「即戦力」のエンジニアとしてのスキルを身に着ける事ができます！

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。


Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む