2019-06-16

【Vue.js】クライアントサイドで環境変数を使う

Vue.js

vue-cli3になったことによって、環境変数を扱うことが非常に簡単になった。その中でもクライアントサイドで利用することができるようになったことが非常にありがたい機能だと思った。

4種類のファイル名

プロジェクトのルートに環境変数を記述したファイルを配置し環境変数を利用できる。ここではsrc配下ではないので注意が必要。

認識できるファイル名には4種類ある。

.env
.env.local
.env.[mode]
.env.[mode].local

.envは、すべてのタイミングで読み込まれる。

.env.localは、すべてのタイミングで読み込まれるが、gitの管理下からは外れる。

.env.[mode]は、development test productionなどのモードの中から指定されたモードのときだけ読み込まれる

.env.[mode].localは、development test productionなどのモードの中から指定されたモードのときだけ読み込まれるが、gitの管理下からは外れる。

f:id:yoshitaku_jp:20190615233411p:plain — プロジェクト作成直後。自動でGitの管理下からは外れている。

クライアントサイドで環境変数を使う

他の言語同様ファイルの中でキー・バリューを設定する。このときに接頭辞としてVUE_APP_を付与することで、クライアントサイドでも環境変数を使うことができる。VUE_APP_を付与しないとundefinedとなる

VUE_APP_TITLE=env
TITLE=title

console.log(process.env.VUE_APP_TITLE) // env
console.log(process.env.TITLE) // undefined

2019-06-09

Vuetify.jsのインストール方法

Vue.js

Vue.jsのUIフレームワークに 「Vuetify.js」 がある。Webアプリを作っているときに、CSSがうまく表現できなかったのでUIフレームワークとして導入してみた。その導入する際に、0からインストールする方法と現在走っているプロジェクトに導入する方法で異なる点があったのでまとめる。

インストール

まずはnpm install vuetify --saveかyarn add vuetifyを実行し 「Vuetify.js」 をインストールする。ここから新規プロジェクトに導入する場合と、既存のプロジェクトに適応する場合で少し異なるので注意が必要。自分が既存のプロジェクトに適応されるときにミスをしたので同じミスをしてほしくない思いから既存プロジェクトに適応する方法を先に書く。

既存プロジェクトに適応させる

「Vuetify.js」 のインストールが終わったら、index.jsかmain.jsに次の記述しをする。Vue.useメソッドで 「Vuetify.js」 をプラグインとして利用する宣言をする。

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

「Vuetify.js」 のCSSファイルを読み込ませるためにindex.jsかmain.jsへ次の記述をする。

import 'vuetify/dist/vuetify.min.css'

最後にindex.htmlに次のフォントを読み込ませて終了。

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

新規プロジェクトで導入する

vue create pg-vuetifyを実行し、Vueの環境を作成する。今回は導入することを優先するので、デフォルトで進める。作成した環境に移動しvue add vuetifyを実行し、 「Vuetify.js」 を導入する。 「Vuetify.js」 を導入する際もデフォルトの設定で実施する。無事に環境が作成されると次のファイルが作成・更新される。

.gitignore
README.md
babel.config.js
package.json
public/favicon.ico
public/index.html
src/App.vue
src/assets/logo.png
src/assets/logo.svg
src/components/HelloWorld.vue
src/main.js
src/plugins/vuetify.js
yarn.lock

今回の記事の中で、既存プロジェクトに導入する手順を最初に書いたのはファイルが更新されてしまうのが理由であった。gitでバージョン管理をしていればファイルが更新されてもあまり心配はないかもしれないが、バージョン管理をしていないときは注意が必要。

まとめ

「Vuetify.js」 のインストール手順を試した
既存のプロジェクトに導入するときは、ファイルが上書きされないように注意が必要

2019-06-01

じぶん Release Notes 0.29.1

じぶんリリースノート

f:id:yoshitaku_jp:20190601202426j:plain

5月1日〜31日のあいだの出来事がリリースされました。

自分リリースノートとは、こちらの記事を参照してください。 blog.a-know.me

初回なのでフォーマットは全てお借りしているものです。

技術・開発関連

技術面での取り組みは以下の通りです。

weite-blog-every-weekで使うRSSツールをGoに置き換えました。
- https://github.com/yoshitaku-jp/api-wbew

イベント

参加したイベントは以下の通りです。

お世話になった会社の先輩の送別会に参加しました。
Write-Blog-Every-Weekのメンバーの送別会の幹事をしました。

本

読んだ

Webを支える技術
- HTTPの章

買ったもの

主要な買い物は下記の通りです。 - 無印良品のベッド

ブログ

リリースノートを除き、次のエントリを書きました。

PV数

5月は4327でした

f:id:yoshitaku_jp:20190601184540p:plain

仕事

部署異動の話し合いをし、7月から所属部署が変わることになりました。

5月に直接お会いした方には感謝の言葉を述べさせていただきましたが、悩み・相談に乗ってくださった方ありがとうございました。

KPT

K

ベッドを買って快適になった
断捨離をして荷物が減った
部署の飲み会に初めて参加した
岩手と宮城へ行った
サイトの改善をして褒められた

P

コミュニケーションを積極的に取れなかった
太った
本を読む時間が取れなかった

T

ソファを買う
関わる機会が少なかった人とコミュニケーションを取る
頭の中だけで完結せず話し合う
運動の頻度を週2に増やす
積極的にフィードバックをもらいに行く
次回のリリースは2019/07/01です

2019-05-29

Go言語のstrings.Replaceを使って、改行コードを含む環境変数を置換する

f:id:yoshitaku_jp:20190529181651j:plain

GoとNetlifyを使って簡易的なAPIサーバを構築した。処理の中でGoogle スプレッドシートにアクセスする必要があり、認証情報をNetlifyの環境変数に設定した。しかし、環境変数から改行コードを含む値を取得する時にハマった。一般的な、どの環境でも起こりうるので気をつける。

今回はGo言語で実装していたこともあり、strings.Replaceを使って解決した。

環境

go1.12.5

ソース

package main

import (
    "fmt"
    "os"
    "strings"

)

func main() {

    fmt.Println(os.Getenv("HOGE"))
    fmt.Println("----------------")
    fmt.Println(strings.Replace(os.Getenv("HOGE"), "\\n", "\n", -1))

}

出力結果

set HOGE="Hello\nWorld" && go run main.go

"Hello\nWorld"
----------------
"Hello
World"

まとめ

Netlifyの環境変数に認証情報を設定した。
改行コードが値に含まれていたためハマってしまいました。
ReplaceAll という関数もあり、これは必要な引数が違う
- golang.org

参考

blog.konboi.com

qiita.com

Gopherくん

github.com

2019-05-25

Go言語のgofeedを使ってRSSをパースする

f:id:yoshitaku_jp:20190527152510p:plain

きっかけ

Write-Blog-Every-Weekのメンバーのブログ情報をとってくるときに、GAS上でRSSをパースしていました。しかし、今後複数人でメンテナンスをする可能性ができたため、GAS上から移動させることとなりました。JS繋がりでnode.jsへ移行することも考えましたが自分の中でnode.jsへの理解が追いつかず、せっかくなので新しい言語のGo言語へ移行することにしました。

gofeedを使う

タイトルにもある通りgofeedを使いました。「go feed」で調べたときに、広そうな検索ワードであったにもかかわらず上位に出てきたためです。

github.com

環境

go version go1.12.5 darwin/amd64

インストール

go get github.com/mmcdole/gofeed

ソース

今回のソースコードは、自分のはてなブログに対して実行しています。様々なURLに変更して試してみてください。

package main

import (
    "fmt"

    "github.com/mmcdole/gofeed"
)

func main() {

    url := "https://yoshitaku-jp.hatenablog.com/rss"

    fp := gofeed.NewParser()
    feed, _ := fp.ParseURL(url)

    items := feed.Items

    for _,item := range items{
        fmt.Println(item.Title)
        fmt.Println(item.Link)
    }    
}

出力結果

Wrappalyzerを使ってサイトで使われている技術を見てみよう
https://yoshitaku-jp.hatenablog.com/entry/2019/05/19/070000
基本は大切 / Vue.js チュートリアルのToDoリスト作成から学んだこと
https://yoshitaku-jp.hatenablog.com/entry/2019/05/06/190000
前向きになろう / 理論と事例でわかる自己肯定感を読んだ
https://yoshitaku-jp.hatenablog.com/entry/2019/05/05/233000
わかりやすい説明を / 技術をつたえるテクニック ～分かりやすい書き方・話し方～ を読んだ
（中略）

まとめ

RSSを取得してパースする処理が簡単にかけました。GASでは自分でパースしていたので全員分のブログ情報を取得できていませんでしたが、ライブラリを使ったことにより無事全員のブログを表示することができました。非常に嬉しいです。

write-blog-every-week.netlify.com

おしまい

2019-05-19

Wrappalyzerを使ってサイトで使われている技術を見てみよう

Tips

自分が作ったプロダクトや関わったプロジェクトでどのような技術が使われているか知らない人はいないとおもいます。ですが、他人や他社がどんな技術をサイトに採用しているか気になったとしても、知ることは難しいはずです。そんな時に使えるのがWappalyzerです。

www.wappalyzer.com

友人にWappalyzerを教えてもらって、自社のサイトにどんな技術が使われているのか見たりして楽しみました。

使い方

Wappalyzerはサイトでどのような技術が使われているか確認することができます。使い方は次の2つです。
1. Wappalyzerにアクセスし、知りたいサイトのURLを入力する
2. ブラウザの拡張機能を導入し、知りたいサイトにアクセスする

使ってみよう

実際にTwitterのサイトで使って確認してみました。Twitterでは次のものを使っているようです。

Analytics : Google Analytics
JavaScript Framework : React
Web Framework : express
Miscellaneous : webpack
Web Server : Express
Programming Language

情報が多く表示されるサイトもあれば、表示されないサイトもあります。自身が所属している企業や、自身が気になっている企業の情報を調べて見ると面白いのではないかと思います。

f:id:yoshitaku_jp:20190514165743p:plain

他の使い方

分野ごとで採用されているプロダクトの割合や、各技術を採用しているWebサイトの一覧が見れます。

Web Servers

これはWebサーバーの割合です。Apache、Nginxが上位でIIS、OpenGSEと続いています。

www.wappalyzer.com

React

Reactを使っているWebサイトの一覧です。

www.wappalyzer.com

Vue.js

Vue.jsを使っているWebサイトの一覧です。

www.wappalyzer.com

まとめ

今回はサイトで使われている技術を見ることの出来るWappalyzerを紹介しました。サイトによっては使っているバージョンまで確認することができるので、転職活動を考えている人にとっては企業研究に使えたりするのではないでしょうか？

2019-05-06

基本は大切 / Vue.js チュートリアルのToDoリスト作成から学んだこと

Vue.js

今回はVue.js チュートリアルをおこなっていて、改めて自分が理解できていないことをまとめました。実際におこなったチュートリアルは「基礎から学ぶ Vue.js」の付録についていたものです。

基礎から学ぶ Vue.js

作者: mio
出版社/メーカー: シーアンドアール研究所
発売日: 2018/05/29
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

cr-vue.mio3io.com

ローカルストレージ API の使用
ref 属性
watch オプションの「ウォッチャ」機能
まとめ

ローカルストレージ API の使用

ユーザのブラウザに情報を保存する方法です。自分は勉強を始めたとき、Vue.jsとFirebaseを使って実装をはじめてしまったために通らない道でした。どの環境でもある機能ですし、簡単なプロトタイプを作るときは積極的に使っていこうと思いました。まずはローカルで使えるデータベースのように捉えればよく、データの追加・データの取得、データの削除ができることがわかりました。

データの追加
- localStorage.setItem(keyName, keyValue)
  - keyValueには文字列しか保存できない
データの取得
- localStorage.getItem(keyName)
データの削除
- localStorage.removeItem(keyName)

データ追加の「keyValueには文字列しか保存できない」に対する対策は、JSON.stringify(obj)を使いJSON 文字列に変換して使うようにすると良いということがわかりました。

ref 属性

ref属性をつけると、DOMに直接アクセスすることができることがわかりました。過去に何度も様々なところでthis.$refs.hogeって書いてありましたが、ちゃんと調べずに使っていました。

公式ガイドにも次のURLで記述がありました。

https://jp.vuejs.org/v2/guide/components-edge-cases.html#子コンポーネントインスタンスと子要素へのアクセス

次の記事は、Reactではありますがidを使うよりrefを使ったほうが便利なようです。

Reactではidよりrefを使ったほうがいい - Qiita

watch オプションの「ウォッチャ」機能

多くの場合では算出プロパティの方が適切ではありますが、カスタムウォッチャが必要な時もあるでしょう。データの変更に対して反応する、より汎用的な watch オプションを Vue が提供しているのはそのためです。データが変わるのに応じて非同期やコストの高い処理を実行したいときに最も便利です。

算出プロパティのcomputedと似ている機能かつ、computedを使用されるケースが多く、出会いませんでした。非同期などの重い処理をwatchに任せるのが望まれるようで、computedはgetter・setterのようなときにつかうのがよいことがわかりました。引数に変更前の値と変更後の値が設定されるのも特徴でした。

まとめ

どれも基本的な機能ではありましたが、調べてブログにまとめてみました。もともとはVue.jsとTypeScriptでToDoリストを作って素振りをしてみようと思って始めたのですが、うまくいかずに一度Vue.jsでtodoリストを作るところに戻ってきました。思い返せば、Vue.jsでもToDoリストを作ったことがなかったので心を新たに実施してみましたが非常に学びが多いものでした。

プログラミング問わず、自分が作りたいものを動くように作れるだけでもちろんよいと思います。しかし、ある程度先に進んだときに基本的なところに立ち戻って見ると新しい発見があるんじゃないかと思います。自分の中に「型」をしっかり作ってから「型破り」なことをしていきたいです。

2019-05-05

前向きになろう / 理論と事例でわかる自己肯定感を読んだ

本

技術書典6にて頒布されました。理論と事例でわかる自己肯定感を読みました。

booth.pm

心の中でいろいろ整理が付き、前向きになれた気がするので紹介しておきます。

次の項目に当てはまっている人は読んでみることをオススメします。太字になっているものが個人的には刺さりました。
・どうせうまくいかないと思って挑戦できない
・興味がある募集やお誘いを自身がなくって受けられない
・自分のことが好きだと思えない
・ありのままの自分を周囲に見せると落胆されたり嫌われるのではないかと思う
・周りの人に受け入れられていると感じられない
・趣味は中のいい友達に合わせる
・自分らしくないと思うことが多い
・周囲に嫉妬したり、否定的になったり、見下したりしていまう
・頑張り続けていないと安心できない
・自分の判断に自身が持てずに、受け身になったり、発言するのが怖い
・褒められても受け入れられない
・気分が落ち込んでしまう
・ストレスに振り回されてしまう

自己肯定感とは

自己肯定感とは、心理学の分野では「自分自身を自ら価値あるものとして感じる」ことだそうです。
自己肯定感には二つの気持ちがあります。・自分に対して「とても良い」と思う気持ち
・自分に対して「これで良い」と思う気持ち

「とても良い」気持ちは他者と比べて感じる優越感であり、「これで良い」気持ちは自分の基準で自分を受け入れて好感を抱く気持ちのようです。この２つはどちらも大切であり、分けて考えなければいけないところがポイントのようです。本書では、「とても良い」と「これで良い」がどうやって湧いてくるのかと、気持ちが向上することでの影響について述べられています。

自分はどうか

いくつか当てはまってはいるのですが、周囲の目や評価を気にしすぎてしまうのが自分の中で割合が大きいと思いました。本書によれば「とても良い」気持ちも、「これでよい」気持ちも低いようです。いち早く不安な状態を解消するために短期間での改善が見込める「よても良い」気持ちを改善することからからやってみようと思います。アプリを作ってみたり、資格をとることが考えられるでしょうか。今思い返してみれば、Vue.jsでサイトを作り上げて誰かに評価してもらえたことが嬉しかったりしたので、小さなことですが完成さて色んな人に見せて歩くのがいいかもしれません。

感想

技術書典で頒布されたこともあり、心理学の内容ですがIT技術者向けの例が多く取り入れられていて読みやすかったです。式で表すと、「とても良い」気持ち=結果*重要度 と独自に噛み砕いて説明してくれているのも良いところだと思いました。

2019-04-28

わかりやすい説明を / 技術をつたえるテクニック～分かりやすい書き方・話し方～を読んだ

本

mochikoAsTechさんが技術書典6にて頒布されました「技術をつたえるテクニック～分かりやすい書き方・話し方～」を読みました。

内容は大きく分けて次のようになっています。

技術を⽂章で分かりやすくつたえる
技術を登壇で分かりやすくつたえる
教わり上⼿をはじめよう

今回自分が興味あったのは、「技術を⽂章で分かりやすくつたえる」です。ブログを書いたり、ドキュメントを書くために大切なことが載っていると思い購入しました。

読み進めてみると言われれば当たり前のことが並んでいましたが、当たり前のことを当たり前にやることが難しく、改めてブログを書くときは気をつけなければと思いました。これから技術系の文章を書く人は「どう書いていけばいいのか」「何を網羅すればいいのか」が、わかりやすくまとめられているので初めに読むといいと思いました。

いくつか改めて気がついた点があるので、まとめておこうと思います。

読者層をはっきりさせる

「万人に最適な説明はありません。伝える相手が変われば最適な伝え方も変わります。」と最初にありました。4月になって自分の身の回りで「どうやって説明したらいいだろう」と考える場面が多くあり、改めて考え直さねければならない内容でした。

「技術を文章でわかりやすくつたえる」章の内容ではありますが、何をどうつたえるかよりもこれからつたえる相手はどういうバックグラウンドなんだろうかを想像したり理解することが大切だと気が付きました。書くという視点においては「想定する読者とゴールを書いておこう」と書かれており、予防線のようになりますが、ゴールを最初に記述することによって読者とのミスマッチを防ぐことが効果的であると書かれていました。まずは、自分はチェックシートを作り過去の記事をリファクタリングしていこうと思います。

「すんなりはいってくる」ための工夫

相手にわかりやすく説明するためには例を使おうと書かれていました。今までの経験からも理解できていることはすぐに例を上げて説明できますし、逆に理解できていないことはうまい例をあげられないと読んでいて気がつきました。特定できる個人がいる場合での説明では、相手が興味あることを知り、興味あることに絡めて具体例を提示することで相手の理解を促せると感じました。書くという視点においては「万人に理解できる例」を自分の中で用意し説明できるようにしておくことが大切かなと感じました。まずは簡単にでもイメージ図を書くことができるかが自分の中での理解度基準になると思いますし、そのイメージ図を描ける準備をしておこうと思いました。

つたえることは一つに絞る

説明するときは、一つのことだけで完結することはなかなか難しいものです。しかし、相手に今理解してほしいことに焦点を当てれば話題が飛び散らかることもないと思っています。今振り返ると自分の中での反省点は、書くときには一つに絞りきれていないことです理由はヌケモレがないかを意識しすぎて完璧を目指しているからだと思います。さらにいえば、細書に記述した「読者層をはっきりさせる」ことができていないからだとも思いました。「万人に最適な説明はありません。伝える相手が変われば最適な伝え方も変わります。」とあるように、切り捨てる層はバッサリ切る勇気を持とうと思います。人に口で説明するときは「つたえることは一つに絞る」を意識できている方なので、プレゼン資料を作る要領で書くことをしてみようと思います。