- 1. 【Node.js】ExpressとOpenWeatherMapAPIを用いて天気予報を取得してみた
- 2. Node.js + Web3.jsを使用した機能検証用アドレス新規生成、残高照会、送金
- 3. Node.js + Web3.jsを使用した機能検証用NFTミント、照会、移転、焼却
- 4. 【個人開発】Webアプリ制作
- 5. 【初めての個人開発】『これおれがわるいんか?』- 超局所的SNS
- 6. Node.js環境構築ではまったこと
- 7. 特定のLambdaを指定した時刻に実行する(Node.js)
- 8. 個人開発で会計アプリを再度開発しました!
- 9. Prismaを使った型安全なデータベース操作
- 10. markdownで予定管理できる markwhenを使ってみた
- 11. [Javascript入門した]package.jsonの要素について
- 12. 【募集】看護師を支援する技術共有プラットフォームの開発協力者募集
- 13. 【個人開発】初めて個人でWebアプリ(レシピ管理アプリ)を作ってみた
- 14. NodeJS入門
- 15. TypeScriptでパスエイリアス”@types”を定義してはいけない理由
- 16. TypeScriptの実行環境をDockerで作る
- 17. Google Spreadsheet APIを用いたNode.jsでのスプレッドシート操作
- 18. 【初心者】Node.js(Express)でHTMLを読み込もうとしたらCSSを拒否された件について
- 19. PostGISからベクトルタイルを作成する
- 20. ユーザー新規登録処理を書いてみた(zod , node.js , mysql ) [備忘録]
【Node.js】ExpressとOpenWeatherMapAPIを用いて天気予報を取得してみた
## はじめに
UdemyのWeb Developer BootcampでNode.jsやExpressの学習を進めていた中で、試験的にWeb APIも使用して、
簡易的な現在の天気を検索するアプリを作成してみました。## 概要
今回作成したのは、**OpenWeatherAPI** という気象情報を取得できるWeb APIを使用しました。
URLは[コチラ](https://openweathermap.org/)から。
ユーザー登録が済めばすぐにAPIキーの取得が可能です。:::note warn
APIキーは有効化されるまで少し時間がかかるので注意してください。私は約20分ほどかかりました。
:::無料版と有料版で、取得できる回数や日数が変わってきますが、今回は無料版を使用するため、現在の天気を取得していきます。(無料版APIでも1分間に60リクエストかつ1ヶ月100万リクエスト可能らしい)
検索ページで都市名を入力すると、その地域の気象情報を取得できる形にします。## Node.js と Express
**No
Node.js + Web3.jsを使用した機能検証用アドレス新規生成、残高照会、送金
はじめに
—
本記事はLinux/Unixサーバーを対象にGUIを使用できない環境で機能検証するためにEthereumまたはEthereum互換の別チェーン(例:Polygon、Fantomなど)上にアドレス新規生成、残高照会、送金の確認手順を解説します。ブロックチェーンの機能検証にお時間を多くかけたくない方におすすめです。本記事では、Japan Open Chainという日本発のブロックチェーンをサンプルとして使用します。
※ Japan Open Chainについてはこちらの記事をご参考ください。
→ 解説レポート〜「1分でわかる!Japan Open Chain」必要なソフトウェア:
・Linux/Unix環境(本記事ではUbuntuを使用する)
・Node.js/npm
・ether.js
・fs.js
・readline.js
・path.js
・dotenv.js
・Web3.js
・秘密鍵(Metamaskなどからエクスポートしたものを使用)
Node.js + Web3.jsを使用した機能検証用NFTミント、照会、移転、焼却
はじめに
—
本記事はLinux/Unixサーバーを対象にGUIを使用できない環境で機能検証するためにEthereumまたはEthereum互換の別チェーン(例:Polygon、Fantomなど)上にNFTミント、照会、移転、焼却の確認手順を解説します。ブロックチェーンの機能検証にお時間を多くかけたくない方におすすめです。本記事では、Japan Open Chainという日本発のブロックチェーンをサンプルとして使用し、SolidityでERC721標準に基づいたNFTスマートコントラクトは既にデプロイした状態の確認手順となります。
※ Japan Open Chainについてはこちらの記事をご参考ください。
→ 解説レポート〜「1分でわかる!Japan Open Chain」※ デプロイ済みのスマートコントラクトについてはこちらの記事をご参考ください。
→ 【個人開発】Webアプリ制作今年の4月から、半年かけて、Webアプリケーションを1から作成しました。
作成したのは「家計簿アプリ」です。## 1. ツール概要
#### ①アプリの目的
現金の入出金を管理および、1ヶ月における家計の入出金を把握できる「家計簿アプリ」を目的として、作成しました。#### ②アプリ作成背景
個人的な話になりますが、私は家計簿をつけるタイプです。現在も家計簿をつけるために使用している家計簿アプリがあるのですが、このアプリがサービス改悪を行い、データの閲覧期間が、[全期間]→[直近1年間]へ変更となりました。
(調べれば私が使用しているアプリがばれそうですが(笑))このことから、”自分が使うため” に家計簿アプリの作成を行いました。
#### ③アプリ使用者
②で書いた通り、自分自身です。ほかに使用者は全く想定していませんでした。
(このことから、CSS等は全く手を付けていません。自分が使えればOK!)さて、概要を記載したところで、次はアプリの機能について記載します。
## 2. 機能一覧
機能一覧として具備している機能は下記のとおりです。
【初めての個人開発】『これおれがわるいんか?』- 超局所的SNS
# はじめに
デプロイはしているものの、リリースというほど大そうなものではありません。
納得できる品質には達していませんが、どんな機能を実装したのか、
自分なりにおさらい/デモンストレーションしてみようという趣旨の記事です。季節の変わり目による風邪のフルパッケージに見舞われた状態で執筆します。
https://koreore.vercel.app/
(使ってもらえたら嬉しいです)
—
# 自己紹介
東京都在住、29歳男性。Webディレクター/CC字幕制作エディターの経験あり。
現在はWebエンジニアへのキャリアチェンジに向けて学習~就職活動中です。
今回の開発も、就職の役に立てばと思い作り始めました。# Webサービス概要
X(旧Twitter)ライクなSNS。タイムラインには、ユーザーが経験した
「これおれがわるいんか?」と言いたくなるような理不尽な出来事が流れてくる。それを “わるくない” と “う~ん” の二択で評価する/される。
—
※実際の画面
![image.png](https://qiita-image-store.s3.ap-noNode.js環境構築ではまったこと
# :writing_hand: はじめに
こんにちは。環境構築Lv.1の私です。
今回はTypeScriptで組んだプログラムの動作確認環境が欲しく、以下記事を参考にNode.js環境(バージョン管理には NVM for Windows)を構築しました。– [nvm-windows の導入と簡単な操作をやってみた](https://qiita.com/akipon0821/items/eaeffe79221cfcd4d258)
– [Windows への Node.js(npm)のインストール](https://qiita.com/gahoh/items/8444da99a1f93b6493b4)基本的には上記記事の手順で大丈夫だと思うのですが、
自分のローカルの都合なのか所々うまくいかず、あれ?となったところがあったので備忘とします。– nvmがうまくインストールされなかった
(nvm versionコマンドでバージョンが表示されない)
– node, npmがうまくインストールされなかった
(node -v, npm -vコマンドでバージョンが表示されない)#
特定のLambdaを指定した時刻に実行する(Node.js)
Lambdaで、自分自身を1分後に呼び出せるようにしてみました。
## 要約
– EventBridge Schedulerを使用
– 2種類のロールを用意する必要がある
1. 実行ロール
1. EventBridgeのスケジュールに付与するロール
– 作成しようとしているスケジュールと同名のスケジュールがあるとエラーになるので、先に削除が必要## IAMロールの用意
### 1. 実行ロール
Lambdaで実行する場合、Lambdaの実行ロールに下記を含める
“`json
{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “Statement1”,
“Effect”: “Allow”,
“Action”: [
“scheduler:CreateSchedule”,
“scheduler:DeleteSchedule”,個人開発で会計アプリを再度開発しました!
## 各種リンク
アプリケーション
https://accounting-app-six.vercel.app/loginGithub
https://github.com/nobu0605/accounting-app## 開発した理由
自分はエンジニアになる前に3年半バックオフィスの仕事をしていました。
今でも会計に興味があるので、今回開発しました。4年前にも同様のアプリを開発しました。現在は動いていなく、今回新規で改めて開発しました。
https://qiita.com/nobu0605/items/14320342f66bc718e2a5## 機能
・収益と費用
![画像の説明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vav0qjyv7voemgivi64s.png)・仕訳入力
![画像の説明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36g75qec7wxb58qtij49.png)・財務レポート
![画Prismaを使った型安全なデータベース操作
## Prismaとは?
Node.jsやTypeScriptを使用したアプリケーション開発で、データベースとのやり取りを簡素化し、型安全なデータベース操作を実現するためのORMです。ざっくり分かりやすく言うと、SQLを書かなくてもデータベースとやり取りがでできるツールになります。Node.js自体には、リレーショナルデータベースに対して直接アクセスするための標準的なライブラリや統一されたインターフェースが存在しないので、データベースとの通信はNode.jsで一貫した方法で行うわけではなく、各データベースごとに異なる方法を使う必要があります。
そこでORMを使うことで、データベース操作を統一的に行えるようになり、異なるデータベースに対しても同じコードやメソッドで操作ができるようになります。
## 基本的な使い方
Todoアプリを前提として、Prismaの基本的な使い方を説明します。
### 1. Prismaスキーマの作成
Prismaスキーマは、データベースモデル、データソース、Prisma Clientの設定などを定義するファイルです。これをもとに、Prismaはデータmarkdownで予定管理できる markwhenを使ってみた
# 使ってみるに至った理由
markdownでタイムラインやカレンダーなどのスケジュール管理ができるということで面白そうだと思った🤔
markdownで書けるので、Github管理もできるし良さげかも❓️# markwhen is 何❓️
[Markwhen](https://markwhen.com/) はテキストをタイムラインに変換するツールです。
マークダウン風のテキストを書くと、見栄えの良いタイムラインやその他のビジュアライズが可能です。
👇️この方のポストで見つけました。 @miyattiさん、ありがとうございます!cursorで予定管理とかできないかなーと思ってたら「markwhen」という面白いプロジェクトを発見した。https://t.co/okvXj8uZxy markdown的な書き方でスケジュールをかくと、ガントやカレンダービューで表示してくれる。これに、clasp+G
[Javascript入門した]package.jsonの要素について
## このページについて
普段はデータエンジニアとして、python, SQLを主に使用しているが、業務でフロントやバックエンドを作ることになりそうなため、これまで手付かずだったJSを学習する.あくまで自習の備忘録として書く.
人に見てもらうことを想定していない為、体系的な解説でもなく、中身も端折っているので悪しからず.※但し数ヶ月後の自分はもはや他人なので、その時の自分が読んでもわかるように書く.
## package.jsonとは
Node.jsやjavascriptプロジェクトの設定ファイルのこと.
依存関係やスクリプトなどを管理するために使われる.
これがあることで、プロジェクトの構成を把握でき、他の開発者もプロジェクトのセットアップが簡単にできる.## 構成要素
“`package.json
{
“name”: “node_js”,
“version”: “1.0.0”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exi【募集】看護師を支援する技術共有プラットフォームの開発協力者募集
## コロナ禍で疲弊した元看護師が0から学習して挑戦。。
私は元々、コロナ禍のICUで看護師をしておりまして、医療崩壊の現場を経験しました。おそらく、今はもうコロナは落ち着いて皆さんは普段通りの生活に戻っているとは思いますが、
急性期病院では、コロナ禍で疲弊した看護師の離職に対して今でも看護師の数が戻っておらず
変わらず疲弊した状態で働いている状態です。私もその一人で、コロナ禍のICUで休憩なしで20時間働いた経験がなん度もあるほどでして
体調を崩し戦線を離脱しました。体調を戻すための休暇として現在休んでいるのですが、
以前から興味があって独学で学んでいたコンピュータサイエンスの学習を再開し
何か医療現場のために作れたらなあ、と思い考え
思いついたものを開発しようとしているところです。しかし、実務未経験であることやまだセキュリティやインフラ関係の知識に疎いので
一人ではすごく時間がかかると思い、ダメもとで募集をかけてみようと思った次第です笑## 一緒に開発してくれる人を募集しています
**看護師を支援する技術共有プラットフォーム**を開発しようと考えています
【個人開発】初めて個人でWebアプリ(レシピ管理アプリ)を作ってみた
## はじめに
半年間をかけて頑張って開発したレシピ管理アプリについて、備忘として記載します。
このレシピ管理アプリは、料理好きの方向けに開発したWebアプリケーションで、現在はローカル環境でのみ動作する形で作成されています。![ログイン.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762672/a8556b0f-381e-81d3-b0fb-78f2bfbdd98f.gif)
## 1. 作ったツールの概要
### アプリの目的
– このレシピ管理アプリは、料理を愛する方々が個人の料理レシピを簡単に管理し、より多くの料理を作りたくなるような意欲やわくわく感を提供することを目的としています。ユーザーは自分の好みに合わせたレシピを記録・管理し、いつでもオリジナルの味を再現できるようにします。### ターゲット
– 料理愛好家、家庭料理を楽しむ方、またはレシピをカスタマイズして管理したい方をターゲットにしています。年齢や性別を問わず、幅広い世代に向けたアプリです。### 背景
–NodeJS入門
CodeMafiaさんの[Node.jsで学ぶWebシステムとソフトウェア開発基礎!Node.js完全入門ガイド
](https://www.udemy.com/share/107wK13@N109UUsvhAl6dCxmbJ97kKtUPbPi0Wiw8b5c6tJaCjC-FJsBn1dAE_3w2qTYptqM/)に入門したので忘れそーと思ったことなどを備忘録としてまとめました。
若干自分の言葉に変換してたり解釈が誤ってる可能性もあります。また、それは知ってるわーてことなんかは端折ったりもしていますので、前提がなくて分からないとか、そもそも信用ならないという方はぜひ受講をおすすめします。
CodeMafiaさんの講義は色々購入させていただいているのですがどの講義も他の方だとさらっと飛ばされるような所に一歩踏み込んで裏側の仕組みまで説明してくださる場面が多いのでめっちゃ面白くておすすめです。
[こちらCodeMafiaさんの他の講義](https://www.udemy.com/courses/search/?src=ukw&q=CodeMafia)
# Java
TypeScriptでパスエイリアス”@types”を定義してはいけない理由
# 問題:”@types”を定義するとインポートエラーが発生する
型定義ファイルをまとめて格納するための、typesディレクトリがあったとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/b6b64af5-6f40-cb17-b8ed-9c6f38fe01b3.png)
呼び出すたびにパスを直接指定するのは、保守の観点から望ましくないため、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/01d17e7a-2ba0-1e8d-79a9-42b85433be4a.png)
tsconfig.jsonへパスエイリアスを追加したとします。
“`tsx
import { Article } from ‘@types/article’;
“`インポートを行うと
“`
型宣言ファイルをインポートできません。’@types/article’TypeScriptの実行環境をDockerで作る
## はじめに
Typescriptの勉強を始めたので、まずは実行環境を作りました。
nodejsの環境を作るだけですが、どなたかの参考になれば幸いです。
## やりたいこと
Typescriptの実行環境を作りたい
## 方法
Dockerfileでコンテナを起動## Dockerfileの中身
NODE_VERでバージョン指定できます“`
ARG NODE_VER=20.10.0
FROM node:${NODE_VER}WORKDIR /usr/src/app
# コンテナ内で必要パッケージを追加
RUN npm install -g typescript ts-node ts-node-dev“`
## docker-compose.ymlの中身
“`
ARG NODE_VER=20.10.0
FROM node:${NODE_VER}WORKDIR /usr/src/app
# コンテナ内で必要パッケージを追加
RUN npm install -g typescript ts-node ts-node-dev
“`Google Spreadsheet APIを用いたNode.jsでのスプレッドシート操作
## 概要
この記事では、Google Spreadsheet APIを使ってNode.jsアプリケーションからスプレッドシートを操作する方法を解説します。具体的には、Googleのサービスアカウントを使用してスプレッドシートにデータを **書き込み**、特定のセルの値を **読み取る** という操作を行います。さらに、CLIからキーワードを入力し、スプレッドシート内のデータと比較・検索する処理を実装します。
## 期待した結果
A列2行目以降にハロースプレッドシートと書き込まれる
B列2行目以降に書かれている任意のテキストを検索して表示される| Message | searchKeyword |
|:-:|:-:|
| ハロースプレッドシート |任意のテキスト |
| | |## 依存パッケージのインストール
## 事前準備
### 1. Google Cloudでサービスアカウントの作成
1. Google Cloud Console にログインし、プロジェクトを作成します。
2. **APIとサービス > 認証情報** から「サービスアカウント」を【初心者】Node.js(Express)でHTMLを読み込もうとしたらCSSを拒否された件について
こんにちは。
最近になってNode.jsの勉強を始めたのですが、開幕早々躓いた点がありましたので備忘録として残しておきます。
ちなみに私はNode.jsのことを少し前までJavaScriptのライブラリの一種みたいに考えていた人間です……。
(だって……「~.js」みたいな表記してるから!)
もし何か間違っている箇所などありましたらご教授頂けますとありがたいです。▼今回導入や実行に辺り参考にさせて頂いた記事です。ありがとうございます。
https://qiita.com/ryome/items/16659012ed8aa0aa1fac
***
さて、Node.js、Expressを導入してローカルサーバーを立ち上げる所までは順調に進んでおりました。
(Hello World!を表示させる定番のアレですね)
そして自分が制作していたWebページを表示させてみようと思い、
先程の記事を参考にHTMLを読み込ませる記述を書いてみました。
“`Node.js
// 静的ファイルの提供とキャッシュの有効化
app.use(express.static(‘/’, { maxAge: 8PostGISからベクトルタイルを作成する
# はじめに
[こちらの記事](https://qiita.com/k96mz/items/fdb410af634d91ee44d2)でPostGISデータベースを作成しました。今回は、作成したPostGISデータベースからデータを抽出し、ベクトルタイルを作成するところまでをやってみたいと思います。
[こちらの記事](https://qiita.com/T-ubu/items/146a86558281abac8b2e)を参考にさせていただきながら、本記事を記載します。node.jsのコードの書き方で推奨される記載方法に変化があるため、参考記事の書き方と、それを改良したコードの両方を書いていきたいと思います。
使用したレポジトリは以下です。
https://github.com/k96mz/20240917Postgis2vector## 環境
macOS Sequoia 15.0(チップ:Apple M3)
zsh 5.9
PostgreSQL 16.4
PostGIS 3.4.2
node.js v20.15.1
npm 10.7.0# レポジトリの準備
レポジトリを作成ユーザー新規登録処理を書いてみた(zod , node.js , mysql ) [備忘録]
## zod でのvalidation check
[前提]
next.jsでツイッターlikeなmusicpostアプリケーションを作成している。
今回tsでログインフォーム、新規登録フォームの処理を書いている。
色々苦労したのでまとめる。
tsのライブラリーであるzod , dbはmysqlを用いてユーザーの入力のチェック、新規登録を行う。mysqlの操作を少しでも覚えたいのでORMなどは使わない。
先に、完成版
以下からコードについて詳しくみていく。“`typescript
import { NextRequest } from “next/server”;
import { NextResponse } from “next/server”;
import { formSchema } from ‘../../../validations/schema’;
import { ZodError } from “zod”;
import bcrypt from ‘bcrypt’;
import { db } from ‘../../../lib/db’;e
関連する記事
OTHERカテゴリの最新記事
- 2024.11.14
JAVA関連のことを調べてみた
- 2024.11.14
iOS関連のことを調べてみた
- 2024.11.14
JavaScript関連のことを調べてみた
- 2024.11.14
Rails関連のことを調べてみた
- 2024.11.14
Python関連のことを調べてみた
- 2024.11.14
Lambda関連のことを調べてみた