Webアプリを作ってみよう

第2話 開発環境を整える

Webアプリを作る方法は各種あり、私の紹介する方法はionicとAngularと言うフレームワークを使います。

フレームワークとは何ぞや？となる方も多いと思いますが、色々な仕掛けが準備してある道具箱とでもとりあえず思ってください。

一例を挙げるとHTMLで作ったテキストボックスに値を入れると、そのまま変数として使えて、その変数が変わるとテキストボックスの表示も自動的に変わったりするような仕掛けもあったりします。(0から作ると手間です)

開発環境ですが無料の物で整います。

無料とは言っても、少なくとも機能的な不満は感じたことがありません。

あえて言えば(初心者向けの)日本語の解説情報が、もう少し欲しいと言う位でしょうか？

ただしリスクがない訳ではありません。ネットから入手の宿命ですがバージョンアップ等で今までと異なる部分が出てきて、結果、調べた情報が役に立たない事もあります。

今回の私の場合は、前回の環境設定から2年ほど経過していたため、Node.jsのインストール時に前回なかった選択肢で選択ミスをして、プロジェクトの作成に失敗しました。(この時点では開発環境が整ったと勘違いをしていました)

そして原因を見つけるのとその対応に、かなり時間が取られました。

以下、直面したトラブルと対応した内容の紹介です。とりあえず判らなくてもご一読して下さい。

----------------------------------------------------------------------

現行(2024/05/02時点)のNode.jsのインストールでは、どうやらMicroSoftのVisualstudio(codeでは無い)やPython関係のツールを組み込む必要があるようです。

もし、あなたがVisualStudioでの開発(例えばC++)やPythonでの開発を、インストールしようとしているPCで行ったことがないならば、Node.jsのインストール画面の下記のメッセージが出る画面『Tools for Native Modules』で、以下の

Automatically install the necessary tools.(以下略)

の部分にチェックをつけてインストールをしてください。

開発経験や思い当たる節がある場合は・・・情報を探してみてご自分で判断してください。この画面に参照情報のURLがあったように思います。

これらのツールが無い場合、その後のionicプロジェクトの作成で"必ず"失敗します。

実は、Node.jsのインストール終了時にも(終了後に立ち上がるpowershellで)エラーが表示されているのですが、大変控え目な表示なので当初は気づきませんでした。

以下の動作記録を参考にしてご判断ください。powershellがすぐに終わる様なら、多分エラーが出ています。

Node.jsのインストール画面が終わるとコマンドプロンプトが自動で立ち上がり、処理後に次のメッセージ『続行するには何かキーを押してください』が出るので指示通りにEnterキーなどを押します。（2回繰り返すと思います）

次に『このアプリがデバイスに変更を加えるのを許可しますか?』と言うシステム許可を求める画面が出るので、『はい』を押して承認するとpowershellが起動します。

この時、エラー時は短時間でType ENTER to exit:エンターキー押下と言うメッセージが出ますが、上の部分にさりげなくエラーの内容が書いて有ります。

エラーが出た場合、メッセージ（英語だが既にファイルchoco.exeがあるため停止と言う内容）を読むことをお勧めします。英語に自信が無い場合はCtrl+Aでメッセージ全体を選択し、Ctrl+Cでコピーして翻訳サイトなどを利用するのが良いでしょう。内容はファイルchoco.exeが存在するフォルダ(エクスプローラで隠しファイルが表示されるようにしないと見つからない）を削除する事でうまく行く可能性があると言うもので対応としては

・エクスプローラーで隠しファイルとフォルダを見る事の出来る状態にして

・choco.exeが存在するだろうと言われた指定のフォルダを削除

・その後Node.jsをアンインストールして(一度再起動するのが良いかもしれません)

・再度インストールしてください。(インストーラーは削除していなければ、まだダウンロードフォルダにあるはず)

となります。

成功時は、かなり時間がかかります。その際、warningエラー(警告レベルで致命的でないエラー)が多数出るかもしれませんが、私の場合は問題なくionicプロジェクトの作成実行が出来ました。

----------------------------------------------------------------------

さて大分おどかしましたが、いよいよ開発ツールのインストールを始めます。(ネットにつながる環境で行ってください）

※筆者の環境はWindows11です。LinuxやMac等でも大きな違いは無いとは思いますが、Windows前提の記載になる事をご容赦ください。

以下の複数のツールをインストールしますので順番に行いましょう。

・Node.js(上でトラブルが起きたツールです。慎重に!)

・Ionic CLI

・Git

・VisualStudioCode

１．Node.jsのインストール

Node.jsの公式サイトから最新のNode.jsをダウンロードしてファイルを開きます。

インストーラーが立ち上がりますので

・nextを押して始める

・ライセンスの同意の画面が出るので、文言のテキストの下の"I accept ・・・"にチェックを入れnextを押下。

・インストールフォルダーの確認画面が出ますが、そのままnext押下。

・カスタムセットアップの画面が出ますが、そのままnext押下。

※ここ重要！！！※

・Tools for Native Modulesと言う画面が出ます。Automatically install the necessary tools.(以下略)にチェックをつけてnext押下。

・最終画面が出ますので、Installボタンを押下。

・しばらく時間がかかりますがFinish画面が出ますのでFinishボタンを押下して終了します。

・インストール画面が閉じ、コマンドプロンプトが立ち上がり、何か処理後に次のメッセージ『続行するには何かキーを押してください』が出るので指示通りにEnterキーなどを押します。（2回繰り返すと思います）

・Windowsが、このPCに変更を加えるのを許可しますか？と聞いてくるので許可します。PoweerShellが立ち上がり、何か処理を始めます。短時間でType ENTER to exit:エンターキー押下と言うメッセージが出た場合は、エラーを疑ってください。

(前述のトラブルと対応した内容の紹介を参考にしてください。)

・成功時もかなり時間がかかり、たくさんのメッセージが出ますが、最後にType ENTER to exit:エンターキー押下と言うメッセージがでてエンターキーを押して終了だったと思います。

２．Ionic CLIのインストール

Ionic CLIで検索すると、Ionic FrameWorkのサイトのIonic CLIと言うリンクが見つかると思います。

そこに記述している通りにインストールするわけですが、書いて有るのは次の一行です。

npm install -g @ionic/cli

これは、Windowsのコマンドプロンプトから行うのですが、使ったことの無い方がほとんどかもしれませんので、次のエピソードでまとめて紹介しますのでわからない方は、そちらをまずご一読ください。

Ionic CLIのインストールは、コマンドプロンプトを立ち上げて、上の一行を貼り付けて実行するだけです。

ただし、かなり前のバージョンのionicCLIをインストールした経験がある場合は”npm uninstall -g ionic”で前のバージョンを先にアンインストールする必要があるかもしれません。（パッケージ名が変更されているとの事）

３．Gitのインストール

個人的にはGit機能使いませんが、使う方も居るでしょうし何よりインストールしないで問題が起きると手に負えなくなると困るのでインストールします。

なおGit機能不要の方は”VisualStudioCode　Git無し”で検索をかけるとヒントが見つかるかも？

やり方は”gitのインストール手順”で検索するのが早いでしょう。

(何分ネット環境は頻繁に変わることもあり、公式見るのが確実と言えます)

OSごとに違いがあるので、そこだけ注意ですがインストーラーをダウンロードして開き、デバイスの変更許可に”はい”と答えるとインストーラーが立ち上がりますので、ひたすらnext押下でインストールが始まります。

最後にFinishボタンを押して(リリースノートが表示されるかもしれませんが)終了です。

４．VisualStudioCodeのインストール

注意点としては、VisualStudioと言うものもあるという事です！

（どちらもMicroSoft社製ですが、Code無しの”VisualStudio”は有料かつ用途が違う）

こちらも公式アクセス、OSにあったインストーラーのダウンロード、ファイルを開いてインストールの流れになります。

ファイルを開くと使用許諾契約書の同意画面が出ますので、下の同意するを選び次へを押します。

各ページ色々書いて有りますが、インストールボタンが表示されるまで次へで良いと思います。

インストール完了後、完了ボタンを押すと(チェックを外していない限り）VisualStudioCodeが実行されます。

バージョンアップによって、以降の動作は変わる可能性があるので参考程度にしてください。

Welcome画面が出ますが無視しても良いかもしれません。

さてVisualStudioCodeですが様々な拡張機能が用意されています。

その中の一つに日本語化機能がありますので導入してみましょう。

VisualStudioCodeの左のサイドバーアイコンの内、(おそらく上から5つ目)にExtensionsのアイコンがあるので、これを押下します。

JapaneseLanguagePackと言うものがあるのでクリックすると、このバージョンではどうやらインストール済みの模様(Unistallの選択肢が出ています）

使用法について書いて有るのを読むと、

　・Ctrl+Shift+Pを押す

　・displayと入力してフィルターをかけ”Configure Display Language”を押す。

　・各言語の中から日本語を選ぶ

　・Restart(再起動）して良いか聞いてくるのでRestartボタンを押す。

　・日本語表示で再起動する。

以上、各ツールのインストールが終了して開発環境が整いました。