クラサバアプリ脳で Webアプリを学ぶ(vue.js + python) 40代後半 のメモ その1
Webアプリ開発の重要性を痛感・・
いきなりですが、何をあたりまえな!という人もいるかと思いますが、世の中には全くWebアプリケーション開発に触れずにシステム屋さんをしている人たちもいます。
しかしながら、Zennの投稿記事を見ていても、主要なキーワードは、TypeScript フロントエンド など モバイルまたはWebアプリに関するキーワードが並んでいることを考えても、近年のアプリケーション開発において、何らかの形でWebアプリケーションに携わっている人が多いことが伺えます。
また、よくポートメッセ(住んでいるところがバレますね・・)などのIT系やメーカー企業の製品展示会(RX Japanなどが開催するものです)の技術展示においても、展示品の制御機器を管理する画面は Webブラウザベースで行う形になっており、アクセスする環境を選ばない形が標準となっているのが大半。Windows野郎&社内アプリケーションという閉じた世界であれば、デスクトップアプリケーションでも問題ないですが、システム開発の考え方をWebアプリケーションに転用できるようにしておかないと、今後、自分たちが保有している技術の幅が広がらないという思いを強く感じました。
まずは自身の現状を知ろう
VBの思い出でも書きましたが、個人的に開発してきたアプリケーションの大半は、Windowsで動作するデスクトップアプリケーションを主体に生活してきました。なので、アプリケーション開発の見積もりをしたり、開発ボリュームを想像する際にも、デスクトップアプリケーションを主体に考えてしまうため、Webアプリケーションに対していまいちピンとこない部分が多く、また、今後のアプリケーション開発において、「近頃の」Webアプリケーションの開発方式を「ある程度の形で」抑えておきたいという思いから、学習することに至りました。
この記録は、2020年あたりから、デスクトップアプリを主体に開発してきた40代後半エンジニアの、Webアプリケーションで一通りの形のアプリを作成するまでの、「(思い出せる限りの)メモ」となっています。
ここ最近のトレンド(言い回しが古い・・)Webアプリの開発手法を学習すると決めたわけですが、
自身の状況としては、遠いはるかかなたにWebアプリケーションを開発した(当時はEclipseも無ければVSCodeもなく、秀丸エディタでJavaコードをコーディングしていた・・)手法
そして、ASP.net(初期バージョンです)
の経験しかない状態でした(ひえー、もう全部15年以上も前か・・)。
あと、CSSに対する知識が非常に薄いです・・。
前提条件
前提条件として、Webアプリケーション開発ですが、イントラネット内での限定公開という形で動作することを前提とします。よって、セキュリティや認証関連はここでは考慮しません(本当は一番大事かも・・です。)
フレームワークおよび開発手法の選定
VBの思い出の通り、現在の状況として、主要アプリ開発言語については、VB.netからC#への置き換えを実施しています。そこで、情報収集を重ねていくうちに、とっつきやすい?であろう「C#でのWebアプリケーション開発」という選択を検討しました。つまり
ASP.net Core & C#
という構成です。最初はこの組み合わせで問題ないと想定していましたが、WindowsサーバーまたはLinuxサーバーを確保・利用できない可能性があるため(これもかなり限られた条件ですが・・)、却下となりました。開発言語は、使い慣れたC#が利用できるという最大のメリットがあるのですが・・。
次に想定したのが、
Python & Django
の組み合わせ。しかし、いろいろと調べていくうちに、データベースアクセスがORM主体のアクセスしかない(と勘違いしたため、実際はPythonで生クエリを実行できますね)データアクセス部分に不安を感じ、却下・・
ここで、利用できるプラットフォーム(IBM系サーバー)に合わせて利用できる手法を限定していくと
・Python
・PHP
・Java
・Node.js
(このとき、なぜかRubyは選択肢に入りませんでした・・)
という流れとなり、この中でオープンソースでライセンスが緩く、さらにセットアップ管理がしやすい
・Python
・Node.js
が選択として残りました。この2つを対象にフロントエンド、バックエンドを技術を選定していきます。
実行に必要な環境の勘違い
ただ、今から考えると、あれ?な部分があります。よく考えるとNode.jsがなくても、Webアプリケーションサーバー機能(nginxなど)があれば、JavaScriptによるWebアプリケーションは公開できますね(ただ、この話題は別枠で・・)。
当初、Vue.js などのフロントエンド向けアプリケーションフレームワークの実態をよくわからず、フロントエンド部分のWebアプリケーション実行に Node.js そのものをサーバーで実行させる必要があると勘違いしておりました(Webのことがわからないとかえって他の知識が邪魔をする典型的な例です)。
そこで、当初は
Node.js + Expressで動作するWebアプリケーションを構築しました。
参考書籍は以下
結果的に Node.js そのものの理解が少し深まりました。そしてこの後、フロントエンド用のフレームワークを選択し、Webアプリケーション構築へと向かいます。
フロントエンドアプリケーションフレームワークの選定
2020年当時として、フロントエンドアプリケーションフレームワークの選定としては、ネットで調べてみても
React
Vue
Angular
この3大フレームワークが該当します。この中で、Angularはフルスタックフレームワークとのことで、Python Django同様、機能過多(詳細調査するまえに選択をやめるというのは何とも難しい話ですが)ということで、 React と Vue の2つに選定を絞り、最終的に Vue を選択しました。
理由として
・Reactと比較し後発であること
・日本語ドキュメントが多い(という記述がネット上に多い)
・template構文で画面表示のHTMLがイメージしやすい
・学習コストが低い(ほんとかな・・?)
という点を挙げておきます。
ちなみに、Reactの学習はしておらず、比較できないので、どちらが良い、という比較に対しての意見はできないです・・。
よし、書籍を買いに行こう!
ここでおっさんエンジニアは、「プログラミングはネットで収集する情報も大事だが、やっぱり最後に頼れるのは書籍だぜ!」という持論(考え方は古いかもですが、やっぱりお金を払って入手する筋の通った情報は良いものです)があるため、Vue.js の開発における専門書籍を書店に探しに行きました。いろいろありましたが、その中で選んだ書籍は
21Stepで体得 Vue.jsハンズオン
です。数ある書籍の中からこの書籍にした理由は
・Windows Mac の両方で開発環境構築の説明が丁寧にされていること
・JavaScript、TypeScript、クラススタイル(ただ、vue3ではクラススタイルは採用しない方が良さそうですね)の3種類を丁寧にサンプルコードとして記載していること(これって地味に大変だと思います。)
・入力バリデーション、ダイアログ表示などのサンプルも丁寧に説明があること
・WebAPI(Axios)を利用した後の、エラーハンドリングなども詳細に記述
・チーム開発における開発プロセスに対しての記述があること(たとえば、初心者メンバーがいる場合理解しにいくい手法は混乱の元となるため、あえて取り入れない、などの実務開発の経験に基づくであろう記事があり、これが何よりも「現場アプリ開発としての生きた情報」であると個人的には思います)
となります。
執筆された時期と vue.js のメジャーバージョンアップの時期の兼ね合いもあり、vue.js3.0の情報としては少し当てはまらない部分もありますが、当時としては非常に参考にさせてもらいました。
さあ、学習だ!
購入書籍を元に学習を始める様子は、また別記にて・・。
Author And Source
この問題について(クラサバアプリ脳で Webアプリを学ぶ(vue.js + python) 40代後半 のメモ その1), 我々は、より多くの情報をここで見つけました https://zenn.dev/okojyo21/articles/19557a0118e8fc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol