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

JavaScript

  • 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 [shell] version:  […]

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

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

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

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

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

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

  • 2018年3月18日
  • 2018年3月19日

【JavaScript】ブロック要素の位置を指定した要素から調整する

positionを使った指定では親要素からの位置をするが、任意のブロック要素からの位置を指定する方法。 全然違うところにあるけど、見た目上ハマっているように見せたいときなど。 [javascript] // 要素の位置を取得し、変数に格納 let offset = $(‘.wrapArea’).offset(); // 取得した要素の位置から、表示する位置を指定する $(& […]

  • 2018年2月13日
  • 2020年6月14日

【chart.js】ありすぎてわかりにくいプロパティの書き方

chart.jsは公式のページで詳しく使い方が書いてあるし、紹介している記事も大変多い。ただ、さくっと使うには目を通す量が多すぎるのと、古いバージョンでの紹介記事が混在しているため、備忘録としてメモ。 chart.jsを使うための最低限の設定 ただグラフが書ければいい程度であればこの章のみでできる。 chart.jsの読み込み 下記リンクからバージョンを選んでクリックし、copy script t […]

  • 2018年2月4日

[WEB]SVGを使った手書き風フォントアニメーションの一番簡単な作り方

はじめに よくあるっと文字をペンで「すらすら~」と書いていくようなアニメーションをWEBサイト等で追加したいとき。 表現の仕方が少し難しく、検索の仕方もいろいろなワードで検索されていますが、やりたいことは「文字の手書き風アニメーション」、「フォントアニメーション」、「フォントライン アニメーション」といった感じ。 いろいろ方法を探しましたが、中でもSVG画像とツールを使ってJavaScriptで実 […]

  • 2018年1月27日

【JavaScript】LocalStorageの使い方

簡単な使い方 ※LocalStorageではなくSettionStorageを使う場合は、下記1行目でSessionStorageを変数に入れる。 LocalStorageにデータをセットする [javascript] let storage = LocalStorage; let value = ‘テストデータ’; storage.setItem(‘キー名&# […]

  • 2017年11月3日
  • 2017年11月3日

Vue.jsの解説を公式より詳しくやっていく①

目的 vue.jsは公式の日本語ガイドがかなり充実したものになっているが、HTML,CSS,JSの知識の前提を中レベルとしている。 ここではそれよりもさらに低いレベルでも理解できるようにまとめていく。 ※翻訳の関係なのか、日本語がやや変な部分も補完していく。 ※自己学習かねてのため、回りくどい部分あり 準備 index.htmlを作成し、最低限のコードを書く サンプルではjsは外部ファイルには書か […]

  • 2017年7月28日
  • 2017年8月3日

もう迷いたくない。基本のjavascriptサマリー

JavaScriptを習得したいと思っていろいろ触っているときに、古い情報と新しい情報が混在して困った。既にJavaScriptについての理解ができていれば、それらの情報に困ることもないのだろうが、それ以前の問題の私。 なので、「JavaScriptの基礎の基礎を書きながら覚える」かつ「最近の書き方などをTipsとしてメモ」していきます。まずはファイルの準備や表記方法についてと、簡単な関数を使って […]

  • 2017年7月25日
  • 2017年7月29日

JSONの表記とJQuery

JSONとは JavaScript Object Notationの略。 一言で言うと、わかりやすく簡単なデータ記述言語。 WEB APIでのデータの送受信などにJSONフォーマットが使われる。 Web API とは Application Programming Interface(アプリケーション・プログラミング・インターフェース)の略。 「Webサービスをプログラミングから操作するための方法 […]

  • 2017年5月7日
  • 2017年7月29日

【JavaScript 2-1】 関数について

関数とは 複数の文で書かれた命令をまとめて呼び出せるようにする仕組みのこと。 [javascript] var name = prompt(‘名前を教えてください’); greet(name); // ↑関数の呼び出し function greet(name) { var message = ‘こんにちは’; alert(message + name […]

  • 2017年4月26日
  • 2019年5月10日

【JavaScript 1-5】 ジャンケンゲームを作る

プログラム js/app/js ポイント 定数で固定データをわかりやすく 1~4行目 数字のままではわかりにくいので、GU,CHOKI,PAという変数にそれぞれ代入する。 この値は不変の値になるため「定数」と呼び、定数であることがわかるように大文字にする習慣を付ける。 数値に変換 8行目 【JavaScript 2-1】 if文を使った条件分岐で使ったparseFloat関数の応用で、parseI […]