IT初学者部

プログラミングに関することを中心に、備忘録として残していきます。

Reactプロジェクトにleafletでも導入してみる

React

はじめに

c-mappアプリケーションプロジェクトをとりあえずreactで作成してみることにしました。

ということで、reactにleafletを導入する手順について簡単に備忘録を残します。

そもそもなんで？

もともとはVue.jsでマップアプリケーションを作成していたんですが、一度Vue.jsでアプリケーションを作成してしまった、というのが理由になります。

せっかく別にマップアプリケーションを作るのなら、別のライブラリを使って作成したい！というのと、Angular, Vue.jsで1つずつアプリケーションを作成しているので、次はReactの版だ！という思いになりました。

ということで、新生c-mappの作成です。

今回の手順としては、leafletを導入して見るところから始まります。

手順

Reactプロジェクトのディレクトリで、以下のコマンドを実行します。

npm install react-leaflet

React Leaflet | React Leaflet

Leaflet自体はjavascriptで動くもので、それをインストールしてきて使うのでも十分なのですが、より最適化され、使いやすくなっているReact-Leafletを利用していきます。

Installation | React Leaflet

ここにいくつか書いてありますが、単純にReact-Leafletを導入したいのであれば上記のコマンドで十分です。

インストール後、以下のような記載を実施すれば地図を表示させること自体は可能となります。

(一部抜粋した状態です。より詳しく知りたい方は公式HPなどを参照ください。)

import { MapContainer, TileLayer } from 'react-leaflet';

export const Sample = () => {

 return (
  <>
    <MapContainer
        center={35, 139}
        zoom={13}
        style={ height: "75vh"}
    >
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
        />
    </MapContainer>
  </>
 )
};

こんな感じの書き方をし、npm startなどでローカル起動すると地図が表示されます。

この辺については、c-mappの作成の中で記事にしていこうと思います。

今日はここまで。

おわりに

React, Angular, Vue.jsとありますが日本国内だと特にReactが強い用に思います。（Googleトレンドの件数など） Reactできるようになって損することは当分なさそうですね。

flutterの開発環境を構築する。(Windows 11篇 PART2)

環境構築 Flutter

はじめに

前回の記事でflutterをインストール、環境変数に設定するところまで完了しました。

今回は、flutter doctorで必要なツール、設定の確認などを行うところから始めてみましょう。

ということで、早速取り掛かります。

現状を確認する

以下コマンドを実行してください。

flutter doctor

これは別にやらなくてもいいんですが、最新バージョンにアップデートできるらしいです。

せっかくなのでやってみます。

この表示のあとに、以下のような表示がコンソールにされるはずです。

緑色の表示はインストール、設定が完了しているもの、黄色はインストール自体はされているが設定などがされていないもの、赤色がインストールもされていないもの、というのがわかると思います。

とりあえず設定できるものからやっていっちゃいましょう。まずは、Android toolchainの部分を設定していきます。

Android toolchain

Android Studioを開き、Settings画面を開きます。

Appearance & Behavior > System Settings > Android SDK まで開きます。

開いたページでSDK Toolsタブを選択します。

Android SDK Command-line Toolsがインストールされているか確認します。（おそらくインストールされていないと思います。）

チェックボックスにチェックを入れてからOKを選択し、インストールしましょう。

次に、

Android license status unknown.

の解消です。コンソール出力の指示通り、以下のコマンドを実行してください。

flutter doctor --android-licenses

いくつかAccept?と要求されるので、すべて「y」で同意してください。同意後、完全なインストールが完了すると以下の表示がされます。

All SDK package licenses accepted

一旦この状態で再度、flutter doctorを実行してみましょう。

先程は黄色になっていた部分が緑色担っていると思います。こんな感じで設定を続けていきましょう。

Visual Studioの設定

Visual Studioのインストールと、その中でデスクトップ版のC++の構築をしろという指示内容になっています。 とりあえず、Visual Studioをインストールしていきましょう。

Visual Studio 2022 IDE - ソフトウェア開発者向けプログラミング ツール

Visual Studio Codeとは別物です。(Microsoft Visual Studio)

Communityを選択してください。（個人用で無料のものです。他のバージョンは有料となります。機能などの違いありますが、個人の開発でやる分にはCommunityで十分です。）

インストーラをインストールしたら、起動していきましょう。

こんな感じの画面になると思うので、C++によるデスクトップ開発を選択し、インストールを実行しましょう。 この画面はインストーラ起動すればいつでも開けるので、Visual Studioで別に開発作業を行いたい場合箱の画面を開いてからインストールすればOKです。

今回は、Flutterの環境を構築できれば良いので、C++によるデスクトップ開発にチェックを入れてインストールします。

インストール完了後、もう一度 flutter doctorを実行しましょう。

すべて緑色になってます。更に、No issues found!と出ているので、これで環境構築完了です。

おわりに

Android Studioがインストールされていない場合はインストールしてください。

いい加減flutter使って開発作業にあたりたいですが…時間がね。

Herokuの無料枠廃止について

雑感・その他

はじめに

www.itmedia.co.jp

PaaSのHerokuで提供されていた無料プランが廃止されるということで、大きな衝撃を受けています。

というのも、私が個人的に開発作業、検証などを行う際に利用していたサービスであるためです。

TwitterなどでもITエンジニアの方の多くがこれに衝撃を受けているようで。。。。

代替案について考える

もちろん、無料枠が廃止されるだけなので、他サービスと同様に料金を払えばいいだけなんですが、そうするとわざわざHerokuである必要があるのか？という話になってしまいます。

無料で使える範囲のサービスがあれば他に移行していきたいですが、ないならいっそawsなどに移行して勉強できるようにさらにいろいろと増やしていこうかしらなんて考えてますが。。。

おわりに

DynosとPostgres使ってたのでDBサーバーもどうするかを考えなきゃいけないですね私の場合。。。

Flutterの開発環境を構築する。(Windows 11篇)

環境構築 Flutter

はじめに

Mac版のflutter開発環境構築の記事は以前書いているので、今回はwindows11版のほうで書いてみようと思います。

まあやることとしてそこまでmac版とは変わらないし、簡単だとは思いますが。。。

手順

docs.flutter.dev

上記のサイトから「Windows」を選択します。

遷移先ページ

ダウンロードしたzipフォルダを任意の場所に展開します。

フォルダ展開後、環境変数設定を開き、Path項目に以下の形で追記してください。

~(任意のディレクトリ)~/flutter/bin

上記の形でバイナリーファイルを環境変数に設定し、環境変数に反映されているか確認してください。

起動後、以下のコマンドを入力して実行してください。

flutter -version

実行後、こんな感じの表示がされていれば環境変数への設定がされていることが確認できます。

一旦今回はここまで。

おわりに

次回の記事で、その先の設定（必要なツールの確認、インストール、設定処理など）を記載していこうと思います。

Angularプロジェクト、「ng serve」でエラーになるので、とりあえず起動できるようにしてみます

Tips Angular

はじめに

AngularプロジェクトをVSCodeで開いているとき、VSCode上のコンソールで「ng serve」を実行してもエラーになってしまいます。

ということだったんですが、解決法としては本当に簡単だったので、念のため記載しておきます。

原因

PowerShellで実行したからでした。

というのも、PowerShellで実行する際はスクリプト実行の許可を付与する必要があります。

こんな感じのメッセージが出てくるはずです。

 このシステムではスクリプトの実行が無効になっているため、ファイル {ファイル名} を読み込むことができません。

今回実行したngコマンドに権限を付与することでも実行できますが…もっと簡単な方法があります。

対応

コマンドプロンプトで実行する。

ターミナルを開き、以下の箇所でコマンドプロンプトを選択し、そこで開かれるターミナルで再度コマンドを実行してください。

これで問題なく起動できます。

おわりに

こちらのサイト様で対処法について詳しく記載されておりますので、参考までにどうぞ。 [PowerShell]スクリプトを実行すると「このシステムではスクリプトの実行が無効になっているため、ファイル *スクリプトファイル名* を読み込むことができません。」エラーが発生する

Angularにbootstrapインストールしようとしたときにエラーが出たので解消した

Tips Angular

はじめに

ng add @ng-bootstrap/ng-bootstrap

対処

angular - Error when installing ng add @ng-bootstrap/ng-bootstrap - Stack Overflow

stackoverflowに記事があったので。

npm config set legacy-peer-deps true

npmなどのバージョンとインストールしようとしているモジュールのバージョンが不一致になっているとここでエラーになるそうです。

このconfig設定を行うことでバージョン違いでも半強制的にインストールを実施させることができるんですが、本当であれば合致するバージョンにダウングレードするなどしたほうが確実で正確性もあるんでしょうね。

PostgreSQLでテーブルにカラム追加する際の処理について

データベース

はじめに

趣味でやってるプログラミングで利用しているDBなんですが、テーブルに項目追加することになりました。

ということでテーブルへのカラム追加について簡単に記載します。

記載の仕方

ALTER TABLE table_name  ADD COLUMN column_name data_type;

余談なんですが

カラムの追加する位置を指定するっていうのは可能なんですかね？と思い調べてみましたが、MySQL以外はできない模様。逆にMySQLはできるんですね…。

何使ってても基本線はバックアップテーブル作成、カラム追加した新規テーブル作成、作成した新規テーブルにバックアップテーブルのデータをインサートしていく、という形のようです。