Ishibashi

勉強記録です

会話体ライティング: ユーザーとデジタルプロダクトの心地よい対話

会話体ライティングとは インターフェースに表示される言葉は、あなたが実際に顧客と対面して語りかける言葉と同じ働きをする 嘘やごまかしがなく、心のこもった人間らしい言葉が使えれば、顧客のエクスペリエンスはよりよいものとなります。 インターネット…

オブジェクトの省略記法

概要 「オブジェクトのプロパティ名」と「設定する変数名」が同じ場合、省略することが可能。 省略記法を使用しない場合 省略記法を使用しない場合は以下のようになります。 const name = "田中"; const age = 20; // ユーザーオブジェクトを定義 const user…

スプレッド構文

概要 スプレッド構文は配列やオブジェクトに対して使える記法で、要素の展開、要素をまとめる、要素のコピー・結合が出来ます。 以下よりそれぞれで出来ることや注意点を記載していきます。 要素の展開 スプレッド構文は、...(ドットを3つ)繋げて使用するこ…

デフォルト値

概要 デフォルト値は関数の引数やオブジェクトの分割代入時に使います。 値が存在しないときのデフォルト値の設定をします。 引数のデフォルト値 JavaScriptでは値が存在しない場合に、デフォルト値が設定されていないとundefinedとなるため以下のようになり…

分割代入

概要 分割代入とは、オブジェクトや配列から値を抽出する方法のことです。 配列から値を取り出して、あるいはオブジェクトからプロパティを取り出すことが可能となっています。 また、別個の変数に代入することも可能にします。 以下より、分割代入を使用し…

アロー関数

概要 アロー関数はES2015で追加された関数の記法。 従来の関数 従来はfunctionという記述をしてから関数名、引数、処理内容を記述するという記法をしていました。 function func1(value) { return value; }; console.log(func1("func1です。")); //func1です…

テンプレート文字列

概要 テンプレート文字列は、文字列の中で変数を展開する新しい記法。 以下より従来の文字列と変数の結合と、テンプレート文字列の記法を記載していきます。 従来の文字列と変数の結合方法 文字列と変数の結合のために + を使用します。 const name = "田中"…

JavaScriptでの変数宣言

概要 変数宣言とはプログラムを実行する際に、繰り返し利用できるように文字や数値の入れる箱に名前を付けて宣言すること。 変数を宣言するときはvar let const の3種類を使用します。 従来のJavaScriptではvarを使用していたのですが、上書き可能であること…

Brewfileの使い方

目的 新しいPCに買い替えたときのために、現在インストールしているパッケージやアプリを一括でインストールしたい 導入手順 事前準備 Homebrewをインストール Homebrewのインストール手順はこちらに記載しています Brewfileを作成 Brewfileを作成したい場所…

Google Optimizeで要素を追加する方法

やったこと サービスのUIをより良くするためのABテストをしたい 手順 追加したい要素の直前の要素を選択 エディタパレットの「要素を編集」から「HTMLを挿入」 「後に追加」で要素の追加ができる 注意点 何ページにもわたるwebサイトで1ページ目にはあるけれ…

figmaで横スクロールのプロトタイプのつくり方

やりたいこと 以下のような、figmaで横スクロールのプロトタイプの作成 今回スクロールしたい範囲はこちらです。 手順 1.スクロールしたい範囲を選択 2.スクロールしたい範囲を領域に合わせて、青い枠を表示したい領域に合わせる 3.Designタブより、Frameを…

定量分析と定性分析の役割

課題 ユーザーが定着してくれない CV(コンバージョン)に至る前にサイトから離脱してしまう サービス企画段階の市場調査を反映させても期待していたほどに使われない 改善施策を打ってもすぐに頭打ちになる 要因 サービス・商品に日々触れることで「詳しくな…

anyenvの導入方法

目的 anyenvを導入すると手動でプロジェクトごとにnodeのバージョンを切り替えを行わなくて便利とのことなので導入することにしました。 導入手順 Homebrewでanyenvをインストール Homebrewのインストール手順はこちらに記載しています # anyenvをインストー…

Homebrewのインストール

インストール方法 Homebrewのサイトより以下でインストール /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" バージョンの確認 brew -v インストールの問題を確認 brew doctor

バージョン管理の対象から外したいファイルを「.gitignore」に記述する方法

git

課題 phpStormでプロジェクトを作成すると、.ideaというフォルダーが作成されるため、バージョン管理の対象から外したい。 解決策 .gitignoreに以下を記述 # 「.idea」フォルダを除外 .idea/ git add .idea/ すでに管理対象となっているファイルは、.gitigno…

コンセプトの考え方

1. ターゲットに届けたい「思い」を考える ターゲットにとってのコンセプト=「価値」 グラフィックデザインの場合 ターゲットに最も響く「役に立つ考え方」または「役に立つ情報」 プロダクトデザインの場合 ターゲットに最も響く「基本的機能」 デザイナー…

gatsby CLIでcommand not foundだったときの解決方法

課題 Gatsbyを利用するためにgatsby CLIをインストールし、動くことを確認したところ… npm install -g gatsby-cli gatsby -v 問題が発生しました。 -bash: gatsby: command not found 解決策 最新のmacOS(macOS Cataline バージョン10.15)ではnpm configを更…

Vue.jsオプションの構成

基本的なオプションの構成 ①mountする要素 ②アプリケーションで使用するデータ ③算出プロパティ ④ライフサイクルフック ⑤アプリケーションで使用するメソッド <component> </component> <script> </script> <style> </style>

双方向データバインディング

v-modelディレクティブを使用した双方向バインディング 「v-modelディレクティブ」を使用すると、ユーザーが入力したテキストボックスなどのフォームの文字列をVueインスタンスのデータとバインドすることができる。 ユーザーがテキストボックスなどに入力し…

クリックイベント

1:Vue.jsではボタンのイベント処理が簡単! Vue.jsではイベント処理も、テンプレート記法*1とVueインスタンス*2を組み合わせることによって行える。 2:「v-」で始まる属性はディレクティブ 「v-」で始まる属性はVue.jsのディレクティブ(命令)。 「v-on」はイ…