Windows11にTypeScript/Reactの環境構築をしてみた

趣旨

  • お仕事でウェブアプリ開発をすることになった
  • 今回はJavaScriptベースで開発するのだが、せっかくなのでTypeScript+Reactを検討中
  • 先ずは、環境構築だ！ということでメモ書きを残していきたいと思います

手順

  1. Node.jsのインストール
    • こちらより、インストールをダウンロード
    • 今回は、node-v20.11.1-x64.msiにしました。
    • ダウンロードできたら、インストーラ起動して、何も考えずに[next]をクリックしていけばOK
    • インストールが完了したら、コマンドプロンプトで >node -v を実行しインストールできたかを確認します
  2. yarnのインストール
    • yarn自体は一言でいうと、パッケージ管理ツール。npmみたいなものらしい。
      • 詳しくは、こちらを後で読んでみようかなと思います！
    • 以下を実行でインストールできます

      • npm install -g yarn

  3. TypeScriptのプロジェクト作成
    • 以下コマンドを実行。
      • npx create-next-app Hoge-App --typescript
      • 以下は、自分が実行したときの出力です。 --typescript書き忘れた汗。笑
C:\sample-js-calender>npx create-next-app sample-js-calender
Need to install the following packages:
create-next-app@14.1.3
Ok to proceed? (y) y
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
Creating a new Next.js app in C:\sample-js-calender\sample-js-calender.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 366 packages, and audited 367 packages in 28s

132 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created sample-js-calender at C:\sample-js-calender\sample-js-calender

C:\sample-js-calender>
  1. 実行してみる
    • ディレクトリを移動し、> yarn devを実行
    • 表示されるURLにアクセスすると、サンプルが表示されます！

新しいWindowsPCにインストールするものリスト

趣旨

最近新しいPCを購入したので、ノリノリで環境構築をやっていきたいなあと思っています。
ですが、何をいれたらいいんだっけ...？と迷子状態になっちゃいました。
今後も初期化したり新しいPC購入したりとあると思うので、備忘録として残したいなと思います。
随時、更新していきます！！

インストールリスト

エディタ系

  • Visual Studio Code
  • サクラエディタ
    • ちょっとしたメモを取るときなどに重宝します！
    • PCにもデフォルトでメモ帳が入っていますがシンプルかつ多機能なのでこちらがお気に入りです

ソース管理

便利機能

  • Windows PowerToys
    • カラースポイトなど、便利な機能がたくさんあります。
      PowerToys

その他

  • Kindle For PC
    • 基本やiPadなどで読書しますが、PCでも見たいときありますよね～

Windows11にvenvを利用してpython環境を構築してみた話

新年早速の記事です！今年は今までよりも多くアウトプットを出していきたいなと思います！

趣旨

先日新しいPCを購入して、pythonをインストールしたのですが、
せっかくなので環境構築もしっかり実施して後で環境再構築などが実施し易いようにしたいなと思いました。

前提条件

pythonのインストールのみを実施済みであること
今回私が利用した端末ではpythonが未インストールであったため、
公式サイトよりインストーラをダウンロードしてインストールのみ実施しました。
インストール元は こちらです。

What's venv？

venvとは、PC内に分離したpython環境を構築できるツールです。 コマンドで起動・停止できるので簡単で便利だなと思います。

手順

コマンドプロンプトで任意のフォルダに移動して、

$ python -m venv python_env

上位コマンドのみで環境構築が完了します。
現時点では、ライブラリなどはインストールされていないため、
別途ここから個別でインストールする必要があります！
起動は以下です。

$ cd python_env/Scripts
$ activate

停止は以下です。

$ deactivate

参考

- venvによるPythonの仮想環境構築（Windows）

【RaspberryPi】久しぶりラズパイで遊ぼうと思いOS初期化したときのメモ

本当に久しぶりの投稿です。

3年ぶりになってしまいました！笑

 

社会人になって４年目となりましたが、

まだまだレベルアップしていきたいなと思っています。

→　当たり前な話なんですが、改めて言葉にするとちょっと意識変えられそう。

 

ラズパイは元々持っていたのですが、

2,3年前ぶりに利用するので心機一転OSの再インストールしてから利用したいなと思っていました。

以下のRaspberry PI Imagerというアプリを利用することで、

初期化できるようです。

www.raspberrypi.com

 

今回は、Windowsでインストールして利用してみました。

インストールして起動すると、こんな感じに画面が表示されます。

Imagerトップ画面

「OSを選ぶ」で表示されるリストから、

今回は「削除」を選びます。

OSを選ぶ　を押すとこんなリストが表示されるよ。

対象のSDカードを選択して、「書き込み」を押すと、

削除処理が始まります。

 

今回は、OSの再インストールまでしたいので

完了したら、そのまま「OS」からインストール対象を選択して

再度書き込みを行います。

 

↓書き込み中の画像。

 

書き込み完了です！





 

Node-REDをインストールしてみました

node-red

Node-REDとは何か

Node-REDは、ノード(処理一つずつをまとめたもの)を繋いでいき
システムを構成することが可能な グラフィカル な言語です。
繋ぎ合わせた流れのことを フロー と呼びます。
元々、Webシステム開発者に人気が高い言語です。

以下が、公式サイトになります。
Node-RED{:target="blank"}
日本語用のサイトもあります。
Node-RED 日本用サイト{:target="blank"}

Windows10にNode-REDをインストールしてみる

先ほどの日本語サイトにwindows10用のインストール手順が載っていますので、
こちらに従ってインストール開始！

windows10インストール手順{:target="_blank"}

上記のサイト通り進めれば問題ありませんでした。

いざNode-REDを起動してみる

手順通りだと、おそらくグローバルにインストールしているはずなので、
好きなDirで以下のコマンドを実行すると立ち上がってくれます。
> node-red
起動したら、どこかに[info] Server now running at http://~ と出ますので、
コピーしてブラウザで開いてあげると。。

f:id:ryo2712:20200725134603p:plain
Node-RED起動時の画面

起動できました！！
次回からは基本的なNode-REDの使用方法を確認していきたいと思います！

<feathericons>HTMLにかっこいいアイコンを使用したい！

JavaScript

今回の目的

HTMLに画像（アイコン目的の）を埋め込むときに、
わざわざ探すのがめんどくさい。
おまけにデザインを考慮すると探すのが難しい。

そこで、今回は feathericons というJavaScriptとして使用できるライブラリを使用してみる。
feathericons(Github)

とりあえず丸(circle)を表示してみる

  • HTMLの内でライブラリをインクルード
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  • アイコンを埋め込みたい位置でタグを使用
<i data-feather="circle"></i>  
<script>  
  feather.replace()  
</script>

このコード自体は、先ほどのタグの内容を、
本来svg画像を埋め込むタグ等に変換してくれます。
以上で、circleが指定の場所に表示されます！！

HTMLで<a>タグを踏んだ時に、navbarに重ならないようにしたい！

問題点

bootstrapでnavbarを設置。  

ページ内で<a>タグを使用して画像などにジャンプさせると、  

navbarに画像が重なってしまう現象が発生。  

f:id:ryo2712:20200719014854p:plain

navbarに重なってる

原因  

<a>タグでジャンプする際は、ジャンプ先のタグ上部に画面上部が一致するような仕様になっている。  

 

解決策

ジャンプする際に、指定の高さ分更に移動する関数を準備した。  

$(function () {

var windowWidth = $(window).width();
var headerHight = 70; //余分に移動する高さ
$('a[href^="#img"]').click(function() {

var speed = 100;
var href= jQuery(this).attr("href");
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-headerHight;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
 
});

});

 

 'a[href^="#img"]'は、<a>タグ&href="#img"(idがimgから始まるものすべて)を指す。  

条件を満たすアンカーがクリックされたときにこの関数が発火するようになっている。  

 

おまけ

修正して実際にジャンプしてみると、ちゃんと直ってました！！  

f:id:ryo2712:20200719020831p:plain

直った！