中山テック 代表の中山です。
さて、クライアントサイドのJavaScriptに触れるケースは多いですがサーバサイドはほんのり程度しかわからない私（汗
ひとまずとっかかりやすいvue.jsの構築をメモに残していきたいと思います。
※Linux版の構築はまた今度
楽天市場でデジタル機器も見つかる♪(PR)
そろそろふるさと納税で税金対策の時期ですよ♪(PR)
※ダウンロードはこちらから
他の環境があるならそれでもいいのですが、ターミナルが使いやすいことや階層構造表示がいい感じです。
まずはダウンロードし、インストールを行います。
今回はWindows版をDLします。
なおVueに限らずReactでも問題ないですし、Go言語ならプラグインも充実しております。
DLして損はないと思います。
Node.jsダウンロード
node.jsはJavaScriptの実行をしてくれる環境であり、通常ブラウザ内で動作するJavaScriptとは一線を画します。
とはいえWEBサーバ的立ち位置として非常に使いやすいミドルだと思います。
デフォルトでのポートは8080、Tomcat等起動している場合は落とすかポート番号変更を検討する必要もあるかもしれません。
ひとまずインストールを行いましょう。
インストール後は[node -v][npm -v]でそれぞれコマンドが使えるかどうか確認しましょう。
※環境変数が自動で設定され、念のための確認となります
vue.jsの導入
ツリー構造での開発を行うため、ここからvscode立ち上げします。
立ち上がったら「表示」⇒「ターミナルを」選択します。
するとアプリの下にターミナル(コマンドプロンプトと同じ)が出るのでコマンド操作を行いましょう。
※vscodeは使っても使わなくても同じです。前項の操作もvscodeでやっても結果は同じです
vue.jsはJavaScriptのFW(フレームワーク)となり、Node.jsを経由してシステムアクセスを行う算段です。
vue.jsの導入は[npm install -g @vue/cli]で出来ます。
終わったら
今回はTypeScriptとセットのプロジェクトを作成します。
Vue.jsは3.x系を選択します。
インストール後、サーバを立ちあげます(ポート:8080)
立ち上がったら、ブラウザで「https://localhost:8080」を入力します。
OK！完璧です！
開発する際はワークスペースを指定するといい感じですよ！
楽天市場でデジタル機器も見つかる♪(PR)
そろそろふるさと納税で税金対策の時期ですよ♪(PR)
まとめ
HelloWorldと導入までですが、そこまで難易度自体は高くないと思います。
あとは構文や使い方、ライブラリ等覚えていきたい所です。
構築作業自体は苦ではないので、得意としていないプログラミングを頑張るのみ・・・
是非皆様もvscodeや流行りのJavaScriptのFWを使用してみてはいかがでしょうか。
