JSON.parse()とJSON.stringify()の違い
JSON.parse()とJSON.stringify()の違い
JavaScriptのブラウザーでは組み込みの JSON オブジェクトが利用でき、それには以下の 2 つのメソッドが備わっています。
■ parse(): JSON 文字列を引数に取り、それに対する JavaScript オブジェクトを返します。
■ stringify(): オブジェクトを引数に取り、等価な JSON 文字列を返します。
超簡単にまとめるとJSONの生成する時がJSON.stringfiy()
でJSONの読み込みをする時がJSON.parse()
になります。
JSON.stringify() – JavaScriptでJSONを作成する
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 () – JavaScriptでJSONを読み込む
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を実行する環境です。
本来、JavaScriptはWebブラウザに組み込まれていて、ブラウザ上でしか実行できませんでした。
しかし、Node.jsはその場でのスクリプトの実行を可能にしてくれます。 さまざまなライブラリが存在しているのですが、それらのインストールを行うツールとして、Node.jsに組み込まれているのがNpmです。
■ package.jsonとは npmを使ってパッケージをインストールする際に、バージョンなどの情報をJSON形式で記録して依存関係をまとめたファイル
■ 参考リンク
webpack
■ webpackとは webpackとはモジュールバンドラーになります。
webpacklを利用することで、複数のモジュールを依存関係を解決して一つのアセットにまとめることが出来ます。
■ 参考リンク
css-loader
webpack の loader であり、JS で構築されるアプリケーション内で CSS を扱うために利用されます。
■ 参考リンク
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
babel
Babelとは、簡潔にいうと、JavaScriptのコードを新しい書き方から古い書き方へと変換するツール
ブラウザによってはES2015のJavaScriptの書き方では正常に動かないケースが存在する
具体的にはJavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。
そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。
Polyfill
polyfillはES5に存在しない関数やライブラリの代替コードのこと。
■ 参考リンク
フロントエンド勉強でしたことまとめ
業務でフロントエンドをすることになったけど、バックエンドがメインなのでフロントエンドの勉強をしなおす。
何やったか忘れた時ようにやったことまとめる。
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とアロー関数
- リアクティブ
- ライフサイクルフック
フォームと非同期通信
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
より深くコンポーネントを理解する
- Slot
- 動的コンポーネント
大規模アプリでのコンポーネント同士のコミニケーション
- Provide/ inject
- injectionKey
HTTPリクエスト
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でバックエンドとフロントエンドを分けた開発を行ってみよう!
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
個人開発でサービス名を決めるときに考慮すべきポイントまとめ
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と呼びます。
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に通知されるような仕組みになっているはずです。