IT初学者部

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

TortoiseGitをインストールすることでgitの使い勝手が良くなります。

はじめに

自作PCにgitを入れるまでは良かったんですが、TortoiseGitを入れ忘れていたので手順について記載します。

手順

TortoiseGit – Windows Shell Interface to Git

上記のサイトにアクセスし、Downloadをクリックします。

32bit版から64bit版かを選択します。(今回は64bit版をインストール。)

Language packのところには、様々な言語に対応しているのでそれを設定するためのインストーラーが入っています。

好きな言語を選択してください。

インストーラーのダウンロード完了したら、実行してください。

そのまま画面の表示に従う形でOKです。

言語パックは入れたかったら入れてください。

おわりに

これを行うことでアイコンオーバーレイ表示がされるようになります。エクスプローラーなどでフォルダ内を確認したとき、変更の有無が一目瞭然になるので活用していきましょう。

Node.jsインストールしてnpmのバージョン確認したら警告文が出た件

はじめに

前回の記事でNode.jsのインストール手順について記事を作成しましたが、今回はそれに関連する内容です。

Node.jsのインストール後、node -vと同様に以下のコマンドを入力してみました。

npm -v

npmのバージョンを確認するコマンドです。npmってなんやねんって話ですが、nodeのバージョンを管理するツール、コマンドです。くらいに思っていてください。

まあこの辺を詳しく知りたかったらQiitaなり色々とあるので、今回は割愛します。

このnpm -vコマンドを実行すると、以下のような警告文が表示されました。

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

別に警告文ですし、それにちゃんとバージョンも表示されているんですが、なんとなく気持ち悪いので、これを紐解いて解消していこうと思います。

手順

てかgithubのコミュニティにこんなのがありました。

https://github.com/npm/cli/issues/4980

やはり気になる人が多いみたいですね。

stackoverflowにも同様の内容があったんですが、今回の件とはあまり関係なさそうです。(一応URLは載せておきます。)

https://stackoverflow.com/questions/72401421/npm-warn-config-global-global-local-are-deprecated-use-location-glo

とまあ、困っている人はそれなりにいる様子。

Githubのページ見ていると、以下のコマンド実行で解消できるとのコメントが。

npm install -g npm-windows-upgrade

とりあえず実行してみます。

再度バージョン確認コマンドを実行してみます。

]

いや変わんなくない?

ということでコミュニティを読み進めていきますが…どうやら色々とやらなきゃいけないことが多いようです。

真の手順

まず、Windows PowerShellを管理者として実行します。

実行後、以下のコマンド実行してください。

Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process

これを実行することで、スクリプトの実行を可能にします。

これを実行しないと、以下のコマンドの2つ目が実行できないので必ずこれを行ってください。

こんな感じで選択するようでてくるので、Yの大文字ではいを選択してください。

選択後、以下のコマンドを実行してください。

npm install -g npm-windows-upgrade

実行後、今度は以下のコマンドを実行してください。

npm-windows-upgrade

実行すると、npmのバージョンを選択するように出てきます。 8.12.1を選択してください。

Have a nice day!って出てくると、インストール完了です。

npm -vコマンドを実行してください。上記のように警告文が表示されず、バージョンが表示されていれば完了です。

おわりに

この記事を書いている時点(6月上旬)ではあまり日本語のドキュメントなかったんですが、とりあえずこれで問題ないみたいです。 別に警告文出ててもいいっちゃいいかもしれませんが、気持ち悪いので出ていないに越したことないですね。

とりあえずこれで実行環境、開発環境をある程度整えられました。本格的に開発作業に着手していけるでしょう。いや、していきます。という感じです。

Macbook Pro(2021 14インチモデル)とSurface Pro7を比較してみる

はじめに

surface pro7にとって分が悪い戦いというのは百も承知で、使っている感じから色々と書き連ねていきます。

というのも、天下のマイクロソフトAppleがそれぞれ出しているPCなわけですから、ある意味競合する2つの製品ですよね!?(Macbookと比較するならSurface Proではなくlaptopやbookでは?と言われてしまうと、それはそうなんですよね…。で終わってしまう話なので、一旦無視します。)

なんでこの2つ比較すんの?そもそも2021年秋に発売されたmacbook proと2019年発売のsurface pro7ではmacbookの圧勝では?という話ですが、これは単純に私が持ってる端末がこの2つだから、というのが理由です。というかそれ以外にないです。

流石にこの手の記事作るときに、全く触ったことがない、ちょろっとしか触ってない、この程度で記事書くわけには行きませんからね。(この手の、というのはマイナスな内容を含む記事という意味です。これ良かったよ!みたいな記事は普通に書きますからね。ちょっとしか触ってないとしても。)

ということで、色々と比較していきましょう。

スペックなどは比較しません。

まあ書いてる通り、わざわざスペックやら装備やらについてはここでは書きません。なぜって?それぞれ公式HPなり家電サイトなりでいくらでも見られるからです。

別にどっかに書いてある情報なんかはわざわざこの手の個人ブログの記事で見る人より、公式HPで確認するほうが確実です。ということで、適当に公式HPのりんくでもはりつけておきます。

surface pro7 Microsoft Surface Pro 7- 技術仕様 - Microsoft Surface

macbook pro support.apple.com

じゃあ何を比較すんの?って話ですが、使ってる感覚として、良かった点、いまいちな点、この辺を洗いざらい書いていこうと思います。

Surface pro7

良かった点

意外と馬鹿にできないです。ぶっちゃけノートPCって部屋で寝ながら使うとか、怠惰な生活を送るには辛いじゃないですか?? 純正タイプカバーを外せば、タブレットみたいに使えます。あくまでも、”みたい”ということをお忘れなく。

  • デスクトップみたいに使える

何を言ってるんだ?って話ですが、surface pro7は後継の8と違ってUSB-A、USB-Cなどが接続可能で、ディスプレイにつなげたり、キーボード、マウスなどにつなげるなどして、部屋のパソコンラックなどにそれっぽいデスクトップ環境みたいなものを構築することが可能です。

デスクトップってどうしてもハードルが高い(というか、家電量販店などでもノートPCが主流でデスクトップを販売しているところも少なくなっているような…?)というのもありますし、わざわざBTO自作PC組むなんていうのも、、、ね?(私は最近自作PC組み立てましたが。)

というのもあって、デスクトップ的なものを作る、というか、モニターに接続するなどやりやすくていいです。あくまでも、”みたい”ですが。

  • surface penを買えば、液タブみたいに使える…?

surface penなるものがあります。こいつを購入すると、液タブみたいに使えるわけです。きっと。

なんで急に自信ないのって?液タブを使ったことがないからですが…。

まあでも、簡単な図やメモを取るみたいなことは確実にできますよ。gartic phoneとかを友人とやるときなどに、一人だけめちゃくちゃわかりやすく絵をかけるみたいなアドバンテージも得られます。(いるか?そのアドは…)

  • windowsなのでソフトウェアなどの互換性が高い

これはメリットだと思います。でも別にsurfaceじゃなくてもOSがwindowsなら大体そうでしょって話でもありますが…。

  • officeがついてくる(ついてきてしまう)

officeがついてくる…というか、ついてきてしまいます。これのせいで他所の国より割高らしいんですが、officeついてくるっていうのはいいですよね。エクセルとかワードとか。プライベートで使う機会は…仕事上よりは少ないと思いますが、あると便利です。 スプレッドシートで良くね?って?それはまあ言わないお約束で…。

  • macbookに対抗できる唯一のオサレPC

持論なんですが、macbook以外のPCって別に喫茶店とかで開いていたとしてもオサレでもなんでもないですよね。あー仕事してるんだ、とか、あー仕事用のPCをパブリックな場で開いてしまうようなセキュリティ意識なんだ、的なこと思われそうです。

ですが、surfacemacbookに唯一対抗し得る、オサレPCです。喫茶店で開いていても、なんかオシャレ。ちゃんとappleのロゴみたいに天下のwindowsのロゴもついてます。

イマイチな点

  • 別にこれじゃなくてよくね?

なんというか、器用貧乏。 本格的に環境を作りたいならデスクトップPCで良いし、出先など様々なところで作業にあたるならノートPC買えばいいです。 タブレットみたいに使えるって話も、別にタブレット買えばいいし。 何より、キーボードがいまいちです。タブレットのキーボードのほうが使いやすいと思います。

ただ、とりあえずなんかほしいなって思うなら買ってもいいかもしれません。2 in 1 PC買うならこれがいいかも。

  • たまにストレス

なんかよく知らないですけど、開発作業だの色々やってると動作重い時があります。仕方ないだろそれはって話でもあるんですが、正直言ってストレスに感じることがなくはないです。

Macbook Pro

良かった点

  • 文句を言わせないスペック

何するにしてもストレスが溜まることはありません。文句を言わせないスペック。Apple M1チップ搭載、RAM16GBって話は伊達じゃないです。

  • 茶店で開いていてオサレ

何にしても作業をするにあたり、オサレであることは馬鹿にできないです。仕事でもない作業なんて言うのは自己満足みたいなもんなんで、それをしている自分に酔っているのが楽しいなんてときありますよね。

まあ喫茶店にかぎらず、所有欲、そういうのを満たしてくれるのは貴重かもしれません。別にsurfaceも十分それを味わえるだろ、というご指摘に対しては、仰るとおりですとしか返答できませんが…。

  • マウスパッドが便利

別にこれは他のノートPCでも対応していますが、より本能的に使えるような気がします。気がしているだけかもしれませんが…。

イマイチな点

  • windowsより対応するソフトウェアが少ない

流石にOSのシェア率など考えればわかるように、ソフトウェアなどの数は圧倒的にwindowsのほうが多いです。 TipsなどもWindowsのほうが圧倒的です。

これらはいずれもシェア率考えれば当然のことなんですが、イマイチな点として上げられる部分だと思います。

  • 勝手がわからん

3月くらいに購入したんですが、未だに作業するときに慣れないです。 キーボードの入力モード切り替えも未だに慣れてないです。そのくらい難しいと感じることが多々あります。

  • 高い

マジで値段が高い。それに見合うスペックなので文句はありませんが、apple storemacbook airに変えるかマジで迷った。

結局どっちがいいんだよ

多分いいのはmacbookです。スペックが圧倒的に上なので。というか、2021年モデルと2019年モデルでは2021年の方がいいに決まってます。

ただ、記事見れば分かる通り、surface pro7のほうが記述が圧倒的に多いですよね。思い入れも多いし、使っている時間も多いのがわかるなあと自認できます。

ただ、パソコン1台だけメイン機で買う予定です!というのであれば、Appleファンでもない限りはHPあたりのノートPCを購入するのがベストでしょう。

おわりに

というか、何買ってもメリット・デメリットあるし文句つけたくなるので、好きなやつ買うのが一番後悔しないですよね。この手のは気になったやつを買っちゃうのが一番いいです。

仮にイマイチだったとしても、世間一般で評判が良いから、なのか、自分が気に入ったから、なのか、購入理由がどっちのほうがあきらめがつくかって言うと後者だと思うので…。

Node.jsのインストール手順でも書いておく(Windows11版)

はじめに

Windows10だろうが11だろうが大きく変わることはないと思いますが…。

今回はNode.jsのインストール手順についてでも記事を書いておこうと思います。

最近自作PCを組み立てたんですが、こっちで開発作業をするにあたって全く環境構築ができていません。ということで環境構築をすることになったんですが、とりあえずNodeの入れ方でも書いておこうかなって感じです、ハイ。

ということでちゃちゃっとインストールしちゃおうと思います。

手順

nodejs.org

Nod.jsで検索してもいいし、上記のリンクから画面遷移してもいいです。

とりあえずアクセスして、以下のボタンから推奨版を押下してインストーラーをダウンロードしてください。

Node.jsって何?って話ですが、JavaScriptの実行環境くらいでいいです。認識としては。

これが入ってないと、JavaScriptの様々なライブラリのインストール、起動などをローカルで実行するのもめんどくさくなるので、開発するんだったらこれをインストールしておきましょう。

こんな感じでNextを押し続け、Installを実行してください。

こんな感じの画面が出てきたらインストール完了です。

インストールの確認

なんでもいいのでコマンドプロンプトを起動しましょう。マジでなんでもいいです。Winキー+Rでcmdでもいいですし、検索バーにcmdでエンター押下でもいいです。検索して普通にクリックしてでもいいです。

コマンドプロンプトを起動したら、以下のコマンドを入力しましょう。

node -v

v16.15.1のように、バージョンが返ってくるはずです。

とりあえずこれが出てくれば、インストール完了です。

おわりに

ついでにnpmのバージョン確認の処理も行いたいんですが、それについては別の記事で解説します。

java(openJDK)のインストール、環境変数への設定手順でも書いておきます。

はじめに

自作PCを組み立てたはいいものの、開発環境を未だに構築できていないので、今回はその辺の作業も含めて実施していきます。

手順

今回はjava18をインストールしてみます。

OpenJDK JDK 18.0.1.1 GA Release

↑のサイトにアクセスし、自分のPC環境に合致するファイルをダウンロードしてください。

今回はWindowsなのでそのままWindowsを選択します。

zipフォルダをダウンロードし、任意の場所に展開してください。

展開後、以下のパスを環境変数に設定しましょう。

C:\(任意の場所)\jdk-18.0.1.1\bin

ユーザー環境変数の「Path」に新規で追加してください。

適用後、cmdでコマンドプロンプトを開き、以下のコマンドを実行してください。

java -version

openjdk version "18.0.1.1" 2022-04-22
OpenJDK Runtime Environment (build 18.0.1.1+2-6)
OpenJDK 64-Bit Server VM (build 18.0.1.1+2-6, mixed mode, sharing)

こんな感じでバージョンが出力されていれば、環境変数の設定完了です。

JAVA_HOMEの設定やらなにやらについては別の記事で解説します。

おわりに

openJDKのインストールフォルダの場所探すのが一番難しかったりする。

create-react-appでエラー出たのでコンソールの出力通りに対応したら解消できた話

はじめに

Reactの記事書くのは初めてですかね。 vue.js使うことが多かったんですが、vue.js利用したアプリケーションは一つ作成しているので、原点に帰りreactを使っていこうと思います。

何が原点なんって話になるんですが、元々私自身は仕事でフロントエンド触るときはreactが中心でした。(たまにjqueryとか)

って感じだったので、仕事以外では他のフレームワーク、ライブラリでも使おうかなと思いVue.jsだのAngularだの使っていたわけです。

知らんがなって話かもしれませんが、そういう個人的事情でreactの開発はあまりやってこなかったんですが、久々にやってみようと思いまして、まずは環境構築!ってことで、早速取り掛かってみましょう。

普通にコマンド実行すれば勝手に作られますが

React + TypeScriptで開発していこうと思います。

そういうアプリケーションを作成するときは、以下のようなコマンドを実行してください。

npx create-react-app app-name --template typescript 

って感じでコマンドを実行します。(npmだとかnodeだとかはとっくにインストールされている前提です、ごめんなさい…)

これ実行すると色々進んでいって、最後に「Happy Hacking!」と出れば成功です、が…

こんな感じのメッセージが出力されました。

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

グローバルインストールのサポートをしていないため、コマンドを実行してcreate-react-appをアンインストールしてから再度実行してくださいみたいなこと書いてあると思います。

とりあえず指示に従って実行してみましょう。

npm uninstall -g create-react-app

実行すると普通に関連するパッケージなどがアンインストールされます。

アンインストール後、再度以下のコマンドを実行しましょう。

npx create-react-app app-name --template typescript 

同意を求められるのでyを押してください。

処理が開始されます。あとは自動でインストール、作成が行われていきます。

一通り終わるとこんな感じのメッセージが出てきます。

(切り取り方ちょっとミスりました)

以上で、create-react-appで「You are running create-react-app 4.0.3, which is behind the latest release (5.0.1).」的なエラーが出たときの対処法終了です。

おわりに

まあ対処法も何も、基本的にコンソールに出力されるメッセージを読んでその通りに処理を進めることで対応可能です。メッセージちゃんと読むのって大切なんだなあ…(当たり前)

iOSで「ホーム画面に追加」を選択時のfavicon.ico表示設定について

はじめに

今回は、WEBサイト等でのfavicon.ico設定についての追記内容です。

というか、どっちかというとWEBアプリケーションを作成する際に、iphoneのホーム画面へ追加する際に表示されるアイコンを設定する方法です。

まあ結果として一緒なんですが、とりあえずやっていきましょう。Vue.jsアプリケーションの例です。

結論からすると

index.htmlのどっかしらに

<link rel="apple-touch-icon" href="favicon.ico" />

これを記載してください。どっかしらって書いてますが、通常のWEBブラウザfaviconを設定している箇所があると思いますので、それの付近とかだとわかりやすくていいと思います。

おわりに

前にこれを調べて理解したつもりでいたんですが、当然のように忘れてもう一度調べてしまったのでもう調べることのないように備忘録にしておきます。