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

JavaScript

  • 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日

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

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

  • 2019年2月3日

【実践編】Reactとexpress。Json Web Tokenで認証機能を実装

はじめに 今回すること 前回は説明が長くなってしまい書けなかった部分を書いていきます。 具体的には、以下 ①認証処理をモジュール化して使いやすくする。 ②React側からアクセスしてみる Json Web Tokenって?というかたはまず前回の記事を読んでみてください。 【解説編】node.js expressを使ったAPIサーバーでJson Web Tokenの使い方 モジュール化して使いやすく […]

  • 2019年2月3日
  • 2019年2月3日

【解説編】node.js expressを使ったAPIサーバーでJson Web Tokenの使い方

はじめに 書いている内容 Reactとexpressを使ったWebサービスで、ユーザー情報の認証機能をJson Web Tokenを用いて実装する方法。 MVCモデルを用いたLaravelなどでは初めから用意されているAuthを使ったりして簡単に実装できますが、React単体でそういう機能はありません。 expressだけでならPassportというのも使えるみたいだけど、ちょっとやりたいことと違 […]

  • 2018年11月10日

Dockerでreact+express+MySQLの環境構築

reactは描画に専念し、expressでAPIサーバー、DBにMySQLといった構成。 やりたいことが明確だったので上記のように分けた構成をdockerで作ってみました。 reactの環境構築について調べていましたが、やり方はいろいろあるよう。 手軽なのに便利なcreate-react-appを使って構築することにしました。 docker-compose expressとreactでデフォルトの […]

  • 2018年8月24日
  • 2018年8月26日

【JavaScript】アニメーション対応のゲージ描画ライブラリJustGageについて

はじめに チャートの描画で有名なライブラリにはchart.jsなどがあるが、ゲージなどの描画に適したライブラリがないかと探してみると、JustGageというのがありました。 用途としては、車のスピードメーターや飛行機のコクピットのイメージでの使い道や、ゲームの体力ゲージなどの表示にも使えるかと思います。 使い方はとても簡単ですが、サンプルがあまり詳しく載っていないようなので、使い方と簡単なカスタム […]

  • 2018年5月10日
  • 2019年5月20日

【bootstrap】モーダルにパラメータを渡す方法

はじめに 以下で解説しているのは、 bootstrapのモーダルを使って、パラメータを渡し、表示されたモーダル内にその内容を表示させる手段です。 具体例・一覧画面から指定のボタンクリックで、そのリスト固有の値を表示させる・データ削除時に一度確認表示をさせてから削除させたいとき。 実装方法 「画面に複数ある削除ボタンの一つをクリックした際に、そのボタン固有のパラメータを取得」する方法で書いていきます […]

  • 2018年5月8日

【laravel】blade内にjQueryを書くと「$ is not a function」とのエラーになる場合

問題点 laravelのblade内にjQueryを書くと「$ is not a function」とのエラーになる場合。 解決策① jQuery.noConflict()メソッドを追加する。 上記はlaravelに限らず他でも有効。 適用前 適用後 解決策② laravelに沿った対処法という観点だとこちらのほうがもっといい。 bladeにインラインで使うのではなく、「public >> js」 […]