技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

JSON.parse()とJSON.stringify()の違い

JSON.parse()とJSON.stringify()の違い

JavaScriptブラウザーでは組み込みの JSON オブジェクトが利用でき、それには以下の 2 つのメソッドが備わっています。

■ parse(): JSON 文字列を引数に取り、それに対する JavaScript オブジェクトを返します。
■ stringify(): オブジェクトを引数に取り、等価な JSON 文字列を返します。

超簡単にまとめるとJSONの生成する時がJSON.stringfiy()JSONの読み込みをする時がJSON.parse()になります。

JSON.stringify() – JavaScriptJSONを作成する

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);
// オブジェクトを引数に取り、等価な JSON 文字列を返します。

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

配列に対しても利用可能

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);
// 配列を引数に取り、等価な JSON 文字列を返します。

console.log(myArrStr);
// "["shark","fish","dolphin"]"

■ 応用篇
JSON.parse() は、値が返される前にオブジェクト値を変換できる2つ目の引数として、関数を指定することができます。

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

↓
{
    "name": "SAMMY",
    "email": "SAMMY@DOMAIN.COM",
    "plan": "PRO"
}

JSON.parse () – JavaScriptJSONを読み込む

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);
// オブジェクトを引数に取り、等価な JSON 文字列を返します。

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"


---- 追加 ----

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}
const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);
// 配列を引数に取り、等価な JSON 文字列を返します。

console.log(myArrStr);
// "["shark","fish","dolphin"]"

---- 追加 ----

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

■ 応用篇
JSON.stringify() は、2つの追加引数を指定することができます。1つ目はreplacer関数で、2 つ目は文字列または数値を、返された文字列のスペース(インデント)として使用します。

const user = {
  id: 229,
  name: 'Sammy',
  email: 'Sammy@domain.com'
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"Sammy"}"

参考

【parse / stringify】JavaScriptでJSONを簡単に扱う方法 | IT・ものづくりエンジニアの転職・派遣求人情報なら【パソナテック】

フロントエンドの環境設定

フロントエンドの環境設定

概要

Babel : ES6 -> ES5への変換
Node.js : JSライブラリ管理
webpack: 1つにまとめる(読み込み速度UP)
polyfill: 下位互換
vue-cli: 必要ソフトをパッケージ化

Npm

■ Npmとは Node.jsはJavaScriptを実行する環境です。

本来、JavaScriptWebブラウザに組み込まれていて、ブラウザ上でしか実行できませんでした。

しかし、Node.jsはその場でのスクリプトの実行を可能にしてくれます。 さまざまなライブラリが存在しているのですが、それらのインストールを行うツールとして、Node.jsに組み込まれているのがNpmです。

■ package.jsonとは npmを使ってパッケージをインストールする際に、バージョンなどの情報をJSON形式で記録して依存関係をまとめたファイル

■ 参考リンク

npm入門 - Qiita

npm よく使うコマンドまとめ

webpack

■ webpackとは webpackとはモジュールバンドラーになります。

webpacklを利用することで、複数のモジュールを依存関係を解決して一つのアセットにまとめることが出来ます。

■ 参考リンク

webpackまとめ - 世界一適当な技術ブログ

css-loader

webpack の loader であり、JS で構築されるアプリケーション内で CSS を扱うために利用されます。

■ 参考リンク

css-loader | webpack

最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA

babel

Babelとは、簡潔にいうと、JavaScriptのコードを新しい書き方から古い書き方へと変換するツール

ブラウザによってはES2015のJavaScriptの書き方では正常に動かないケースが存在する

具体的にはJavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。

そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。

Polyfill

polyfillはES5に存在しない関数やライブラリの代替コードのこと。

■ 参考リンク

Polyfill (ポリフィル) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

polyfill、babelとは?jsをどのブラウザでも動くようにしてくれる。(IE対応) - Qiita

フロントエンド勉強でしたことまとめ

業務でフロントエンドをすることになったけど、バックエンドがメインなのでフロントエンドの勉強をしなおす。

何やったか忘れた時ようにやったことまとめる。

Vue.js

動画コンテンツ

■その1: 【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ

Vue.jsの基本

  • Vue.js devtool
  • v-bind
  • v-bindとスタイル
  • v-show
  • v-if
  • v-for
  • v-textとv-html
  • v-cloak
  • v-onと@
  • computed
  • thisとアロー関数
  • リアクティブ
  • ライフサイクルフック

フォームと非同期通信

  • 双方向データバイディング(v-bindとv-on)
  • v-model
  • computed(get/setter)
  • promise/async/await/fetch
  • watch+Ajax

コンポーネント

SFC(SingleFileComponent)

  • VueCLI
  • import/export
  • render/$mount
  • scopedCSS

VueRouter SPA

  • router-link
  • 動的パラメーター
  • ネストルート
  • リダイレクト
  • トランジションリンク

Vuex

  • actions
  • mutations
  • state
  • getters
  • mapヘルパー

Vue.js3対応

  • vue.js devtools
  • provide/inject
  • teleport
  • script setup
  • ref()
  • reactive()
  • toRefs()
  • computed()
  • watch()
  • watchEffect()
  • setup(props)
  • emit(context, emit)
  • setup Vuex

■その2: [2022年決定版] Vue3 x Typescriptによるアプリケーションづくり

紹介

  • 開発環境の整備

Vueの導入

  • 環境構築
  • viteで作られたアプリケーション
  • template, script, style
  • templateについて
  • scriptについて
  • styleについて

Vueの導入

  • コンポーネント指向について
  • 初めてのコンポーネント
  • v-bindデータの埋め込み
  • v-on処理を埋め込む
  • ネイティブイベントを扱う
  • 動的なアプリケーションへの入り口
  • RefとReactive
  • v-model双方向バインド
  • computed property
  • watch
  • CompositonAPIとOptionAPI
  • script setup
  • ライフサイクル

コンポーネント同士のコミニケーション

  • Props
  • Emits
  • コールバックとEmit

より深くコンポーネントを理解する

大規模アプリでのコンポーネント同士のコミニケーション

  • Provide/ inject
  • injectionKey

HTTPリクエス

  • バックエンドセットアップ
  • Postリクエストデータ
  • Getリクエストデータ
  • Loading
  • エラー

Nuxt.js

動画コンテンツ

■ その1:【Nuxt.js】入門から応用まで!【Firebase】と連携しWebアプリをつくってみよう【SPA】

NuxtJs2

NuxtJs2基本操作

  • フォルダ構成
  • ルーティング
  • オートインポート
  • ライフサイクル
  • context
  • asyncData,fetch
  • middleware
  • plugin

Firebase & SPA

  • firebase概要
  • firebase SDK
  • pluginのinjectとnuxt.config.js
  • firestore
  • authentication
  • ユーザー登録
  • Vuexモジュール
  • ログイン
  • ログアウト
  • middleware・redirectの作成
  • ロードでstate消える時の対策

記事コンテンツ

■ その1:RailsとNuxtでバックエンドとフロントエンドを分けた開発を行ってみよう!

Rails

  • APIとは何か
  • 基本的なAPIの開発(モデル、コントローラー、ルーティング)
  • フロントエンドに返却するJSONの扱い方
  • CORS(Cross-Origin Resource Sharing)の仕組み

Nuxt

  • Nuxtを用いた基本的な開発の進め方
  • computedやcreatedなどのライフサイクルの仕組み
  • コンポーネントの仕組み
  • Vuetifyの基本的な利用方法
  • Axiosを用いた非同期通信の方法
  • Vuexを用いたログイン状態の管理
  • 新規登録時のアニメーションコンポーネントの作成方法
  • ログイン成功時のメッセージコンポーネントの作成方法

その他

  • NuxtとRailsAPIの接続
  • フロントバックを分けた状態で開発環境から本番環境へ移行する際の注意
  • Firebase Authenticationを用いた認証機能の実装
  • Firebase Hostingを用いたフロントエンドアプリケーションのデプロイ
  • Herokuを用いたバックエンドAPIのデプロイ

HTML/CSS

動画コンテンツ

■ その1:【tailwindcss】CSSが苦手な人向け じっくり取り組んでみよう【次世代のCSS】【わかりやすさ重視】

tailwindcssの基本

  • ボックスモデル(margin, padding)
  • 幅と高さ(width, height)
  • フォントとテキスト(font, text)
  • 色・color
  • 擬似要素(hover: focus:)
  • 透明度(opacity)
  • 線関連(border, divide, rounded)
  • リング(ring)

レイアウト関連

  • display
  • Flexbox
  • Grid
  • レスポンシブ対応
  • overflow
  • visibility
  • container

レスポンシブ対応

  • アイコン(svg
  • カード
  • フォーム
  • サンプル

その他のクラス

カスタマイズ

  • tailwindcss.config.js
  • VScodeのおすすめプラグイン
  • カラーパレット
  • オリジナル色
  • フォントカスタマイズ
  • オリジナル色
  • ファントカスタマイズ
  • テーマ
  • @apply
  • @layer
  • Purge

Webアプリ画面制作

  • テーブル フォーム

Tailwindcss ver3

  • インストール
  • tailwingcss.config,js
  • JIT
  • 色と透明度
  • Box shadow
  • 下線の装飾
  • width, height, margin, padding
  • アスペクト(縦横比)
  • スクロール位置調整
  • ver2との比較

JavaScript

動画コンテンツ

■ その1:JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】

関連資料

JavaScriptの基本

  • 変数
  • 配列
  • 連想配列
  • if
  • for of
  • switch
  • String
  • Map
  • Array
  • Object
  • this
  • 変数スコープ

ブラウザ・DOM・WebAPI

  • ブラウザオブジェクト
  • HTMLセマンティックウェブ
  • BEM
  • DOM
  • appendchild
  • load, DOMContentLoaded,即時関数
  • setInterval,Math.floor
  • ファイルアップロード
  • バリデーション
  • Windowオブジェクト
  • WebAPI
  • フロントエンド開発環境

非同期処理・例外

  • 例外処理
  • Promise
  • async/await

通信・ajax

  • CORS
  • fetch
  • fetch/async違い
  • Location,History
  • クッキー
  • WebStorage

クラス・モジュール

記事コンテンツ

Railsでファイル操作するとき

Railsでファイル操作するとき

Railsでファイル操作するときはDir.children(Ruby2.5以上で利用可能)ではなくrails.root.joinを利用する方が良い。

Dir.children実行時ファイルからの相対pathで取得してしまうので、実行箇所によって動かなくなるケースが稀にある。

一方rails.root.joinはrootディレクトリからの相対パスで取得できるので、実行個所によって動くなるケースがない。

参考サイト

Ruby 2.5新メソッド: Dir.children と Dir.each_child(翻訳)|TechRacho by BPS株式会社

Rails.root.join("foo", "bar")よりも、Rails.root.join("foo/bar")が良いのでは?というお話 - Qiita

個人開発でサービス名を決めるときに考慮すべきポイントまとめ

個人開発でサービス名を決めるときに考慮すべきポイントまとめ

個人開発でサービス名を決めるときに事前に考慮すべきポイント

  1. 既に同じような名前のサービスが存在しない
  2. 検索したときに強すぎるSEOサイトが存在しない
  3. 検索したときに問題のある(エロ系とか)がヒットしないか
  4. SNS系のアカウントでサービス名のアカウントが取得ができるかどうか

参考

個人開発における開発プロセスを公開してみる - Qiita

(vue.js) methods / computed / watchの比較表

(vue.js) methods / computed / watchの比較表

オプション名 methods computed watch
メソッド 算出プロパティ 監視プロパティ
使い方 一般的な関数と同様 return内に特定したいdataを含める(this.xxx) 特定したいdata名で作成コールバック関数含める
キャッシュ されない される される
実行タイミング 再描画の度に実行 特定data変更時、特定dataを元に派生したデータを使う時 特定data変更時、特定のコールバック関数を実行、非同期処理など

GASを利用してGoolgeForm回答があった時に自動連携でSlack通知する方法

GASを利用してGoolgeForm回答があった時に自動連携でSlack通知する方法

業務でGoogleFormを利用する部署があるのですが、GoogleFormでお客様問い合わせがあっても見逃してしまうケースが多いという相談を受けました。

そこで、GooleFormからお客様問い合わせがあったタイミングでSlackの通知チャンネルに自動通知できるシステムを構築してみました。

今回はその作業の流れを備忘録として残します。

手順説明

自分が実際に作業で行った流れをステップ毎に紹介します。

STEP1 「Slack側の設定」
STEP2 「GoogleForm側の設定」

step1 「SlackのIncoming WebHooks」を取得する

SlackでIncoming WebHooks※を登録します。

※WebhookとはWebサービスであるイベントが実行された時に外部サービスにPOSTリクエストを実行する仕組みの事です。

1. ワークスペース名のプルダウンを押すと、「設定と管理」が表示されるのでクリック
2. 「アプリを管理する」をクリック

すると、以下のようなwebページに遷移します。

appディレクトリに「incoming」と入力して検索をクリック

すると検索結果一覧に「Incoming Webhook」が表示されるので、選択します。

通知したいチャネルを選択して「Incoming Webhookインテグレーションの追加」を押すと、Webhook URL※が表示されるので保存しましょう。(このURLはあとでGASでプログラミングする時に利用します)

※ POSTリクエストするリクエスト先をWebhook URLと呼びます。

参考:SlackのWebhook URL取得手順

step2 Google Apps Scriptの作成

slackに通知するためのスクリプトを作成していきます。

スクリプトはGASを利用します。基本はJavascriptで書くことができます。

Slackと自動連携したいGoogleFormを開いて、スクリプトエディタを選択します。

すると、以下のようなGAS入力画面に移動するのでスクリプトを書いていきます。

スクリプト完成コード(GAS)

function sendToSlack(body, channel) {
  // STEP1で取得したWebhook URL
  var url = "https://hooks.slack.com/services/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";
  var data = { 
    // 通知先チャネル
    "channel" : channel,
    // ユーザー名称
    "username" : "問い合わせ通知",
    // Slackのメッセージを装飾 参考:https://qiita.com/daikiojm/items759ea40c00f9b539a4c8)
    "attachments": [{
      // 色
      "color": "#46D235",
      // 通知メッセージ内容
      "title": "google-formより問い合わせがありました",
      // attachmentの本文
      "text" : body,
    }],
  };
  // JavaScript のdataオブジェクトを JSON 文字列に変換
  var payload = JSON.stringify(data);
  // オプション内容
  var options = {
    // POSTリクエストで送信する
    "method" : "POST",
    // リクエストの Content-TypeをJSON指定
    "contentType" : "application/json",
    // payload指定
    "payload" : payload
  };
  // POSTリクエストを実行
  var response = UrlFetchApp.fetch(url, options);
}

function onFormSubmit(e){ 
  // 参考:https://qiita.com/ryo-yamaoka/items/7677ee4486cf395ce9bc
  var body = "<!here> 詳細情報\n";
  var applicant = "";
  // e.responseでFormResponseオブジェクトが取り出せます。そこからgetItemResponsesを呼び出し、ItemResponseの配列が取り出す
  var itemResponse = e.response.getItemResponses();

  for (var j = 0; j < itemResponse.length; j++){    
    var formData = itemResponse[j];
    // スプレッドシートのカラム名(googleフォームの質問)がtitle変数に代入        
    var title = formData.getItem().getTitle();
    // スプレッドシートのセルの値がresponse変数に代入
    var response = formData.getResponse();

  // Formの質問タイトルによって代入する値を変更する
  switch (title) {
      // 質問タイトルがメールアドレスの場合はmail変数にresponseを代入
      case "メールアドレス":
        mail = response;
        break;
      // 質問タイトルが電話番号の場合はnumber変数にresponseを代入
      case "電話番号":
        number = response;
        break;
      default:
        break;
    }
  }

  // 通知の際に表示する内容をbodyPublic変数に代
  var bodyPublic =  body + "メールアドレス:" + mail + "\n電話番号:" + number;
  // 通知したい内容(bodyPublid)と通知したいチャンネルをsendToSlack関数に渡して実行
  sendToSlack(bodyPublic, "#log-google-form-inquiry");
}

トリガーを設定します。

画面左側の選択項目からトリガーを選択

下記のトリガー設定項目から実行したい関数を選択。

今回の場合だとonFormSubmitを実行する関数に設定します。

今回はGoogleFormが送信されたタイミングでSlack通知して欲しいのでイベントのソースを「フォームから」を選択し、イベントの種類を「フォーム送信時」を選択。

まとめ

上記の作業を完了すれば、GoogleFormからお客様から問い合わせがあったタイミングでSlackに通知されるような仕組みになっているはずです。