Ishibashi

勉強記録です

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

課題

phpStormでプロジェクトを作成すると、.ideaというフォルダーが作成されるため、バージョン管理の対象から外したい。

解決策

  • .gitignoreに以下を記述
# 「.idea」フォルダを除外
.idea/
git add .idea/

すでに管理対象となっているファイルは、.gitignoreに記述しただけでは対象から外れないため以下のコマンドで除外する。

# ファイルの場合
git rm --cached .idea/workspace.xml

# フォルダの場合 
git rm --cached -r .idea/

# コミットする
git add .gitignore
git commit -m ".gitignoreの除外指定を変更"

コンセプトの考え方

1. ターゲットに届けたい「思い」を考える

ターゲットにとってのコンセプト=「価値」

  • グラフィックデザインの場合
    ターゲットに最も響く「役に立つ考え方」または「役に立つ情報」

  • プロダクトデザインの場合
    ターゲットに最も響く「基本的機能」

デザイナーにとってのコンセプト=「意図・意味・意思」

デザインには何がターゲットにとって最良の価値なのかを考えた「意思」を込めることが必要

2. ターゲットの視線で欲しいものを考えてみる

自身の五感で人々の意識の動向を探る「定性マーケティング」で以下の2者の視点で観察する

  • 業界の枠組みの中にいない「素人の視点」
  • デザイナーとしての自分の意識内の「真の不満」

3. ターゲットとペルソナを読み解く

  • 「ターゲット」とは世の中でマイナスを背負って生きているリアルな人々
  • ターゲットが「商品やサービス」を獲得して、理想の現実を手にした人々を「ペルソナ」

ペルソナの人物像を描くことで、成功のイメージを持たせることが出来る
デザインの対象を「ターゲット」にするか「ペルソナ」にするかで、表現の差が生まれる

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を更新する必要する必要があるとのことで、以下のコマンドで更新をしました。

npm config delete prefix
npm config set prefix /usr/local

再度以下のコマンドでgatsby CLIをインストールすることで解決しました!

npm install -g gatsby-cli

Vue.jsオプションの構成

基本的なオプションの構成

f:id:mn1021:20190821221701j:plain

①mountする要素

②アプリケーションで使用するデータ

③算出プロパティ

④ライフサイクルフック

⑤アプリケーションで使用するメソッド

 

 

<component>

</component>

 

<script>

</script>

 

<style>

</style> 

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

v-modelディレクティブを使用した双方向バインディング

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

f:id:mn1021:20191210005700j:plain

クリックイベント

1:Vue.jsではボタンのイベント処理が簡単!

Vue.jsではイベント処理も、テンプレート記法*1とVueインスタンス*2を組み合わせることによって行える。

 

2:「v-」で始まる属性はディレクティブ

「v-」で始まる属性はVue.jsのディレクティブ(命令)。

 「v-on」はイベントを処理するためのディレクティブ。

コロン( ; )で区切って処理をDOMのイベントを記述する。

「:click」を指定するとマウスのクリックを捕まえて処理を行う。

「=」の後にはイベントが発生した場合の処理を記述する。

 

f:id:mn1021:20191114223544j:plain

 


3-1:処理をメソッドとして用意する

「v-on:click」属性に指定できる文は1つだけではない。

複雑な処理はメソッドとして用意して呼び出すとテンプレートの見通しが良くなる。

  

f:id:mn1021:20191118212959j:plain

 

 

3-2: 「methods」オプションを用意

プログラム側では、Vueオブジェクトのコンストラクタに「methods」オプションを用意。

その下の階層にメソッドをオブジェクトリテラル((JaveScriptの表記法としてメソッド名をキー関数をその値に設定する。

 

f:id:mn1021:20191119221826j:plain

 

1で「methodsオプション」を追加し、2で「changeMsg1( )メソッド」を定義。

 

 

「dataオプション」で設定したプロパティには、methodsオプションで設定した関数からは「this.プロパティ名」でアクセスすることができる。

 

 

4: v-on:click属性の省略形は「@click」

クリックイベントを捕まえるv-on:click属性はよく使うので「@click」という省略形が用意されている。

 

f:id:mn1021:20191121213547j:plain

 

*1:HTMLベースで、Vueインスタンスのデータと描画されたDOM を宣言的に対応させることができるもの

*2:Vueアプリケーションを起動するために、Vue関数を新しく作成することによって作成するもの