プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ
CATEGORY

JavaScript

  • 2022年1月20日
  • 2022年1月20日

Amplify Studioを1ヶ月使い倒してみた

Amplifyをゼロから1ヶ月ほど触ってみました。 やったこととしては、Amplifyを使ってバックエンドをほぼ丸投げし、フロントエンドにフォーカスしたアプリケーションを作ることです。 わかってしまえば簡単なのですが馴染むまでは色々と詰まるところがあったので、ザックリ振り返りとして残しておこうと思います。 全ての始まり。AWSコンソールからBuild an app CLIでも出来るのですが最初に調 […]

  • 2021年11月30日

Next.jsで作ったアプリをVercelで公開する

Vercelアカウントを作成する https://vercel.com package.jsonにコマンドを追加する Vercel CLIをインストールする プロジェクトディレクトリ配下で以下コマンドを打ち、Vercel上にプロジェクトを登録する アカウントなどを聞かれるので入力したり、いくつかの質問に対しyかnで答えていく。上記でVercelとの連携が行われ、プロジェクトには.vercelフォル […]

  • 2020年10月31日
  • 2020年11月3日

【React.js】フォームのフォーカスを自動的に次に切り替えていく方法

なにがしたいか よくある電話番号などのフォームが3つに分かれているタイプで、3文字入力したら次のフォームへ自動的にフォーカスを移動。次の4文字を入力したら自動的に次のフォームへフォーカスを移動。ということをReactでやりたい。 jQueryなどでは容易だがReactではどうすれば?と思ったのでメモ。 結論 いくつか方法は見つかったが一番簡単な方法。Inputタグにrefを指定し、ReactDOM […]

  • 2020年6月4日
  • 2020年6月4日

ReactのアプリでLegacy context API~とWarningが出る場合の対処方法

事象 久しぶりにReactアプリをcreate-react-appで書いていると、なにやら気になるwarningがコンソールに出力されるようになりました。 その内容はこちら 簡単に書くと、従来のレガシーコンテキストが使われてるから、今は動くけど それは今後削除される予定のものだよ。 って感じの文字通り、注意でした。 ただ問題なのが、そのエラーを吐いてるのがどうやら読み込んだパッケージ側で起きている […]

  • 2020年6月2日
  • 2020年6月2日

【React】AceEditorを使ってソースコードの投稿、閲覧機能を作る

はじめに Reactで作るWEBサイトでソースコードを登録したり閲覧する機能を作りたかったため、AceEditorというものを使ってエディターを埋め込む処理を行いました。AceEditorはJavaScriptで使うことができますが、今回はReact用にパッケージ化されている「 react-ace 」を使って実装していきます。 パッケージのインストール react-aceのドキュメントがあるページ […]

  • 2020年6月1日
  • 2020年6月1日

【React】reactstrapを使って汎用的なモーダルコンポーネントを作る

はじめに React.jsを使ったフロントを作成していて、なにかの操作を実行する際。いきなり行うのではなく一旦確認を挟みたいときなどに便利な、モーダルウィンドウの実装方法を紹介していきます。 パッケージのインストール reactstrapというものを使いますhttps://reactstrap.github.io/ これはBootstrap4をreactのコンポーネント指向で簡単に扱うことができる […]

  • 2020年2月14日
  • 2020年2月14日

node.jsでUUIDの生成方法

UUIDとは? こちらに書いてあります。http://e-words.jp/w/UUID.html以下から早速パッケージのインストールと生成方法を。 npmでnode-uuidをインストール 作り方

  • 2020年2月11日
  • 2021年1月16日

【node.js】サーバー側でのバリデーションチェックに便利なvalidatorjsの使い方

はじめに node.jsに限らず、WEBアプリ作成をする際のバリデーションはフロント側、サーバー側共に必要になってくると思います。フロント側はhtml5の機能だけでもそこそこできるし、bootstrapで見た目も簡単に良い感じに表示することができます。以下では、サーバー側でもお手軽にバリデーションを実装する方法を紹介していきます。 npmのvalidatorjsを使ってバリデーションチェックを行う […]

  • 2020年2月2日
  • 2020年2月2日

ユーザー認証系のサーバーAPIをnode.jsで作ってみた

前書き SPAなどで使われる、アプリケーションサーバー(以下、APP側) をreactやvue.jsで実装、データ処理などはAPIサーバー(以下、API側) で行うといったアプリケーション。 フロントとバックエンドが明確に分かれているため開発効率が良いことや、APIは使いまわしが効くので、 APP側を別のプラットフォームに移すときなどはフロントだけに集中できたりといったメリットがあるので結構好きな […]

  • 2020年1月31日
  • 2020年6月14日

JavaScriptでMessageFormatのように文字列の置換をする方法と例

JavaScriptでjavaのMessageFormatを使う はじめに javaのMessageFormatって便利ですよね。この記事では、 javaのMessageFormatと同様のことをnode.jsでやるならどういった方法があるのか調べたので紹介していきます。 JavaScriptでやりたいこと 例えば、処理失敗時の表示。「エラーコード{0}エラー内容{1}」のように、定数化された文字 […]

  • 2019年10月1日
  • 2019年10月11日

複数サーバー運用でnode expressのexpress-sessionを使う際に考慮する点

はじめに Expressは「node.jsを使ったWEBアプリケーションの代名詞」と言えるほど簡単にWebアプリが作れる便利なフレームワーク。 この便利なフレームワークを使って「遊びで」Webアプリやサービスを作ったりしている分には困ることはまずないのですが、もう少し本格的なアプリを作るとなったときに小手先の知識じゃいけないということがわかり少しハマったので、そのときのメモとして残しておきます。 […]

  • 2019年9月25日
  • 2019年9月25日

create-react-appでPWA実践

はじめに Progressive Web Appsがすごいということなのでやってみました。 かつてはネイティブアプリを作る=iPhone app ならxcodeとswiftで作る。AndroidならAndroid StudioとJAVAでそれぞれ別に作るという感じでした。 それがreactのexpo cliを使えばどちらのOSにも対応したアプリが簡単に作ることができるようになりました。少し凝ったも […]

  • 2019年7月31日
  • 2019年7月31日

node.js express-gneratorで作ったexpressアプリでベーシック認証

ベーシック認証をかけるための方法。認証のパッケージ(basic-auth)をnpmでインストールし、少量のコードを追記するだけでサクッとできました。 basic-authパッケージをインストール ベーシック認証用のjsファイルを作成する basic-auth.js app.jsで読み込む 以下の2行を追記します

  • 2019年7月26日
  • 2019年7月26日

expressでviewに画像を指定するときのポイント

この記事の目的 静的htmlのように普通に画像ディレクトリのあるパスを指定しても表示されなかった。expressを使ってpugなどで画像パスを指定するときはまず画像があるディレクトリを読み込んであげる必要があった。 追加するコード 上記をトップのファイル(app.js)などに追記することで、この場合publicディレクトリが読み込めるようになる。 pugでの指定方法は以下のようにする

  • 2019年2月17日
  • 2020年6月12日

Meterial-UIを使うときのポイント~Grid編~

はじめに ReactのアプリケーションのUIコンポーネントといえばMeterial-UIではないでしょうか。Meterial-UIは2018年にversion1がでて、この記事の執筆時点で3.9.2となっています。 個人的には馴染み親しんだbootstrapのほうが画面のデザインは楽に進みそうだったのですが、せっかくReact使うんだからと思いMeterial-UIを使い始めました。 バージョンア […]