ひよっこエンジニアの雑多な日記

とあるプログラミングスクールで働くひよっこエンジニアが覚えたことや悲しみを記すブログ

【Vue.js】vue-routerとmathjaxを掛け合わせてみたら数式が変換されていなかった話

携帯にいつのまにか書いた2018年の目標に週1でブログを更新するという項目があったため今週も書きました(使命感)
最近技術記事書いてなかったし、ちょうど苦しめられたことがあったので備忘録をば

概要

vue-routerを使ってSPAチックなWebアプリを開発していて、コンポーネント内にmathjaxで数式を変換して表示するような箇所がありましたがvue-routerでコンポーネントレンダリングした箇所が数式を変換していないという問題が発生しました。。。
普通に画面遷移で作っていたときは変換されていたので完全に見落としてました。。。

再現

vue-cliでvueプロジェクトを作成

$ vue init webpack mathjax-test

index.htmlにmathjaxのCDNを配置する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mathjax-test</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 以下を追記 -->
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>
  </body>
</html>

ひとまず数式が表示されるか確認するためにsrc/App.vueに数式を設置してnpm run devを実行

<template>
  <div id="app">
    $$
    \begin{eqnarray}
    \sum^n_{k=1}a_k = S_n = a_1 + a_2 + ....+a_n
    \end{eqnarray}
    $$
  </div>
</template>
$ npm run dev

いい感じに表示されます。

f:id:kimuraysp:20180113164720p:plain

vue-routerを使ってクライアントサイドルーティングを実装する。
とりあえずコンポーネントを二つ作ってみる。

src/components配下にFormula1.vueとFormula2.vueを作成します。

<!-- Formula1.vue -->
<template>
  <div id="formula1">
    $$
    \begin{eqnarray}
    \sum^n_{k=1}a_k = S_n = a_1 + a_2 + ....+a_n
    \end{eqnarray}
    $$
  </div>
</template>

<script>
</script>

Formula2は適当に数式を変えて作成してください。
コンポーネントを作成したらrouterの設定を行います。

import Vue from 'vue'
import Router from 'vue-router'
import Formula1 from '@/components/Formula1'
import Formula2 from '@/components/Formula2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/formula1',
      component: Formula1
    },
    {
      path: '/formula2',
      component: Formula2
    }
  ]
})

とりあえず/formula1/formula2というルーティングを作成して、リンクをクリックしたらそれぞれのコンポーネントを表示するようにします。
src/App.vueを以下のように書き換えます。

<template>
  <div id="app">
    <div class="links">
      <router-link to="/formula1">数式1</router-link>
      <router-link to="/formula2">数式2</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

vue-routerの書き方に沿ってリンクとコンポーネントの表示場所を作成します。
そして数式1をクリックしてみると。。。

f:id:kimuraysp:20180113164411p:plain

mathjaxが効いていない!!!/(^O^)\ナンテコッタ

普通に画面をレンダリングした時には効いていたのに、一体なんなのかと。。。

とりあえずmountedのタイミングでmathjaxを読み込むように修正

src/components/Formula1.vueのscriptsにを追記

export default {
  mounted() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
  },
}

これで表示されるんとちゃいます?と数式1をクリックしたら数式が表示されました。

f:id:kimuraysp:20180113164443p:plain

mathjaxを利用しつつvue-routerを使う場合は数式が入ってくるであろうvueコンポーネントmountedのタイミングでmathjaxを読み込ませる必要があるようです。
createdのタイミングでは変換されず。。。

もしmathjaxとvue-routerを掛け合わせる時にはまっている人がいたら参考にどうぞ。。。

今回のソースコードも一応上げておきます。
https://github.com/kimuray/sandbox-vue-router-mathjax

最後に

これ実際に仕事ではめられた悲しみなんですが、仕事でやっていたときはmountedで読み込ませるだけでもダメで、createdのタイミングでも読み込ませるという二段構えをしないと数式が変換されませんでした。。。

仕事の環境はvue.js + Rails(しかも変換箇所はマークダウンで記載されている)みたいな感じだったのが何か影響していたのかなあ。。。

もしmountedにmathjax設定しても動かない場合はcreatedにもmountedと同じ記載をすれば動くかもしれないのでおためしあれ。。。

地方の人って変わりたいけど変われないジレンマを抱えてるのかも

年末年始休暇を終えて東京に帰ってきました。
今回の帰省は気づきが多い帰省になった気がします。

勉強しようと思って、帰省の荷物に入れたオライリー本を1/4も読めていないのは内緒のお話。。。
あと明日から仕事したくない。。。

帰省を振り返って

帰省の過ごし方は予定の合う友達と飯行ったり、実家のコタツでダメ人間と化していたりと割と普段の帰省と変わらずな感じでした。
ちょっと違ったのは飯行ったりした友達が結婚して家庭を持った状態になっていたりしたことですね。

あとは親が割と今後のキャリアについて悩んでいたりするタイミングだったので、50近くになってもこんなに悩むことになったりするのかと人生の難しさを感じたりもしました。

今回のブログのタイトルは帰省で友達や親と話して感じたことです。(とはいっても話したの数人なのであれだけど)
ただこの内容は今後自分が成し遂げていきたいことにつながりそうな感じがするので形として残しておこうという趣旨です。

みんな悩みを抱えてる

今回あった人たちで悩み的なものが一つもなかった人がいませんでした。
自分自身も多少は抱えてるものもあるのでなにかしら悩みがあるのは当然だと思います。

ただ今回話をしてきた人たちは、個人的に以下のような感覚を受けました。

  • 解決するための思考や行動ができていない
    • できていないというより解決するという選択肢がそもそも存在していない
  • 悩みを完全に受け入れてしまって解決するのではなくこれを気にせず受け流してしまえばいいんだというような雰囲気
  • 自分ではどうしようもできないと思い込んでいる

確かに仕事的な悩みだと、人と人のしがらみがあって思うように動けないというような制限があったり、末端だったりすると会社事情の問題には口を出しづらかったりという要因があったり、家庭的な悩みだと奥さんや子供という自分だけではない存在がでてきて自分一人の問題ではなくなったりと、外的要因で身動きが取れなくなっているという事実もあるように感じます。

個人的に言わせてもらうと、上記のような要因があったとしても、それでも思考・行動がなさすぎる感覚を持っています。
話を掘っていくと大体はどこかで諦めて行動するだけ無駄という結論に達している感じが否めませんでした。
それと同時に自分では解決は無理とさじを投げている感じもします。

私自身がこれまで自分で行動することで自分の人生や周りの環境を変えていくといったことができている感覚なので、最終的には自分がやるかやらないかが大事だと思っています。
そのため諦めの早さには少し歯がゆさを感じる部分がありました。

しかし、少し考えてみると地方ゆえの難しさがそこにはあるように思いました。

地方って思っている以上にチャンスがない

私は4年前に新卒でSEとして前職の某SI企業子会社に入社しました。
そして、勤務地が東京となり、紆余曲折を経てRailsを学習して、現在の会社にエンジニアとして転職してうまいことやってこれています。
自分で前職のキャリアのままではまずいと感じて行動した結果今の自分があります。
その経験があるので行動さえしてしまえば意外となんとかなるという感覚が自分の中に形成されました。

そのため周りにも、とりあえず動いてみたらいいと思うと結構気軽に言ってしまうのですが、地方だとそれが難しいかもしれないと考え始めています。1 (とはいえ最終的には地方の人でも自分で動かないとどうにもならないという事実もありますが。。。)

よくよく考えてみると私は「たまたま世の中的にニーズのある技術に興味があって、たまたま東京にいたから動きやすかった」という側面があるなと思いました。

東京にはいっぱい仕事があって、いっぱい面白いところがあって、いっぱい人がいます。その分だけチャンスが多いってことです。
自分が興味のある分野もITだったのでエンジニアが売り手市場の昨今は自分にあったフィールドを探すことが簡単です。

ただ地方はその辺りが全然違います。
仕事の選択肢がかなり限られる、面白いところはほとんどない(地方人の憩いの場はイオン)、人は少ない(優秀な人ほど都会の方にでていってしまう)といった具合に、東京に比べて切れるカードが少なすぎると思います。

だったら東京に出てくればいいじゃんという意見もあるかと思います。
個人的にも東京に出てくることができるのであれば、出てきちゃった方がいいと考えています。
東京に出てくるという変化を恐れず行動することで確実に自分の人生を変えることができると思います。

ただ家庭を持っている人やそもそも東京に出る資金がない人はそれが難しいと思います。
だからこそ現状の悩みの解決というより、受容してしまうという形になってしまうことが多いのかなあと感じました。

あとは情報格差ですね。
自分の周りだけかもしれませんが友達で家にPCがないというパターンが結構多いです。
情報がないということは手札を用意することもできないということだと思います。

私は職業をどうしたいか悩んでいる人には割とプログラミングの勉強をすることを勧めたりするのですが、PCがないとそもそも勉強という選択肢すらとれません。

そのため地方の人は現状を打破するための手段、選択肢を持ち合わせていない人が多いという仮説があるなと思いました。
もし情報を得る手段を知っていたら、もし東京のように色々なものがある環境に身を置けていたなら、色々と話が変わってくる部分があるかもしれません。

きっかけをまっている

帰省中に会った友達の一人に「きっかけがあればな。。。」とふと呟いたのを聞いて、たしかに地方だときっかけがなかなかないなと思いました。
かつ情報を得る能力が欠如している人だときっかけをきっかけだと考えることができなかったりすると思うんですよね。

方法は現状全く検討がついていませんが、地方に住んでいる人たちが色々な選択肢に気づいて行動できるような環境が整えば地方が元気になってくるのではないかなあと思ったりもします。

地方創生という言葉をたまに聞いたりしますが、これを成し遂げるためには地方に住む人たちがもっと柔軟に働いたり、所得が増えたりするような社会を作っていく必要があると思います。

このきっかけは本当は自分で見つけて掴み取るのは大事なのかもしれませんが、少し都市部のほうから何か働きかけていくことが必要なのだと思います。
このきっかけを提供する仕組みであったり、活動であったりを自分発でやっていきたいと感じています!

最後に

書いてみて思ったけど、この話題は扱いが難しいような気がするなあ。
結構自分の考えの押し付けにもなっちゃいそうな気がしたり。。。
とはいえこの問題は解決しないといけない課題だと思うし、個人的に解決していきたい課題に感じる。
個人的に色々な力をつけてこの課題に全力で向き合ってみれたらいいのかなとか思ったりもしてますね

明確に答えのない話だからすごく「思う」とか「感じる」とかぼやっとした語尾が多かったなあ。。。
もっと言語化できれば解決策に近づけそうな気もする

そういや最近技術記事を書いていない!!
来週とか書こう!あと今月の目標も立てよ!


  1. 東京で働いているIT会社の人とかで会社をブラックだなんだと言っている人は環境は恵まれている(会社には恵まれていないのかも)と思うので行動を起こすべきだと考えています。環境を変えるための行動をせずにあーだこーだ言うのは筋違いなんじゃないかなあとか思ったり

2018年の目標(野望)

年が明けて早3日ですが、あけましておめでとうございます。
今年もよろしくおねがいいたします!!

年も明けたということで今年の目標を書いて行こうかなと!!

今年の目標

  1. 個人的にサービスを10個作ってリリースする
  2. 使える技術の幅を広げる
  3. 現在の会社で収益の柱になるサービスを立ち上げる
  4. 自分のブランディングを考える・土台を築き始める
  5. 人との繋がりを広げる
  6. 副収入を今の3~5倍にあげる

大きな項目としては上記の5つです!
一つずつ紐解いていきます!

個人的にサービスを10個作ってリリースする

去年はサービス作ろうと友人なんかとやってみたりしましたが、結局個人的なもので形になったものは0だったので今年こそはということで!
10個というのはスピード感を持ってものを作るという意味合いも込めてです!(あとは期間を短くすることで変に大きなものを作ろうとなるのが防げるかなと)
世の中に公開して使ってもらうためにはどうすればいいかという観点も磨きたいのでマーケティング周りも学習していきたいです。

使える技術の幅を広げる

これはエンジニアとして手を出せる領域を広げていきたいという意気込みですね!
今はRailsとVue.jsでアプリケーションを作ったり、VPSAWSを使ってアプリを公開するというWebアプリケーションを作るための最低限の基礎を持っているつもりですが、これだけだとこれからの世の中的に弱いかなあと思ったりしています。
第4次産業革命と言われている昨今で活躍するためにはWeb技術+αが求められるのかなと感じているのでの部分をつけたいと思います!
データ解析あたりが世の中のニーズともマッチしていそうな気がするのでその辺りに足を伸ばそうかと!
RailsAWS、フロントエンドの技術もしっかり深めていきたい!

現在の会社で収益の柱になるサービスを立ち上げる

現在所属している会社が新しい収益の柱を作れるように開発側からサービス企画を促していきたいと思います。
去年は既存サービスの改善提案などは行ってきていたのですが、新規で何かを始めるということはできていませんでした。
一応スタートアップといわれる部類の会社なのでスピード感を持って構築・改善をして行くことを目標にサービス立ち上げを先頭に立って行います!
2018年は新規で教育 × テクノロジーを促進していけるようなサービスを構築していきたい思います。

自分のブランディングを考える・土台を築き始める

これは自分が何を成し遂げたくて、何ができる人間なのかを自分の人生を振り返って構築していきたいと考えているので目標としました。
自分というブランドを確立して行くためには今の年齢から思考、行動をして行く必要があると最近人と話して思いました。
今後は何かしらの形で独立していきたいと考えているので、自分のブランドを作ることが近々では重要な事項だと考えています。
もしかしたら傲慢なことかもしれませんが、将来的に自分に関わってくれた人たちを幸せにできることを行いたいを考えています。
自分自身の力を大きくすることで、より世の中に働きかけやすくなると考えているので自分のブランドを構築することはとても重要だと思います。
2018年はこのブランド構築の土台を作っていきたいと思います!そのために自己分析や様々な知識を身につけていきたいです!

人との繋がりを広げる

これは結構課題感に感じているものの、苦手意識から今まで全然できていなかった事項ですね。。。 ブランディングのところで自分のやりたいことを明確にして、何かを起こしていくとなったら間違いなく人との繋がりが重要になると感じています。。。
その時になってから作るのもありかもしれませんが、やはり早めに動くにこしたことはないと思いますし、人との繋がりを作る訓練もしておいた方がいいと思いますし。。。
あとはエンジニアとして見識を広めるために色々なエンジニアに繋がることも大事だとも思っています。。。
ということで去年までは消極的だった勉強会やコミュニティ、イベント参加などを最低月2くらいのペースでやっていきたいと思います!

副収入を今の3~5倍にあげる

去年からちらほら個人的にお仕事の話をもらって副業するようになったのですが、まだまだ収入としてはお小遣いレベルなのでこれを本業がなくてもなんとかなっちゃうよというレベルまで持っていきたいと思います!
副業は開発を請け負ったりするだけでなく、もっとそれ以外の領域にも手を出してみたいなと!
何がともあれ先立つものは必要ですしね!笑
副業だけと言わず収入が上がることがあれば積極的に挑戦してみたいと思います!

最後に

なんか書いてみて思ったけど、今年は結構欲張っていく必要がありそうだなーと思いました。笑
ただ2018年は自分が今後どう生きていくかを決める第一歩となる年だと考えているので、貪欲に活動していきたいと思います!
これを全部達成できたらかなりの成長を遂げられそうなので頑張ろう!やってやれないことはない!

今年1年の振り返り

とりあえず年の瀬なので2017年の棚卸しをして2018年を気持ち新たにむかえようかなということで今年を振りかえります

年始に書いた目標振り返り

2017年の年始に以下の目標を掲げていました

  • コミュニケーション
  • 興味関心
  • 意思決定

目標設定が定量的に測れなさすぎて振り返りが難しいのですが。。。笑
個人的にはコミュニケーションは少し改善したかなあ
去年の正月に読んだ電子書籍が僕の中でバイブルとなりました

一年前と比べて人と話してる時に興味関心を持つようにはなったかなきっと

月ごとに振り返ってみる

目標振り返りはすごく微妙な感じだったので月ごとに振り返っていきます(汗

1月

1月はちょっとした受託案件でGitHub APIと決済APIを使ったシステム開発を行った記憶
このあたりからオブジェクト指向を意識してプログラム書くようになった気がする

2月

2月はチームマネジメント頑張ろうと思って色々試してみようという感じになっていたなあ
結果的にうまい感じにマネジメントはできていなかった気がするけど、コミュニケーションが結局のところ大事だねというのがわかった記憶
Twitter振り返ってみるとこのあたりから現状に疑問を抱き始めてるっぽい
あと2月はRubyのイベントで登壇したなあ。懐かしい

プレゼンは作って録音しながら練習することで客観的に自分のプレゼンが見れるのでおすすめ
あと自分はスライドの資料に喋ることを一字一句漏らさず書くことでうまい感じにプレゼンができる人種なのかもしれないという気づきもあった
資料作りなんかはなかなかストレスフルだったけど成長できた気はする

3月

なんか給料上がった月だったらしい
あとパーマかけた気がする
あと彼女できた

4月

年度明け早々扁桃腺炎のやばいやつにかかって入院した
喉の痛みが微妙な時は内科ではなく耳鼻咽頭科へどうぞ
あとはこのあたりから仮想通貨がすごいことになったなあ
入院しながらドキドキした記憶

5月

XRPXEMを握りしめることを決意
5月あたりから会社のシステム再構築を本格的に着手しはじめたな
この開発は自分の開発力を結構向上させる開発で自信つけることができたなあ
あとは社内調整に失敗してWebサイト更改に失敗
外注費50万弱をドブに捨ててしまいました。。。

6月

長野に旅行へ
上高地いいところでした
6月でも涼しくて過ごしやすかった
あと旅館がめっちゃよかった

副業として友達がやっている事業のweb周りをお手伝いすることになった

7月

データ移行スクリプトを作るのにくるしんだ記憶
バルクインサートの速さに感動した
このブログの月間アクセスが1000になった笑

8月

開発してたシステムをリリース
1週間ぐらいバグ報告多すぎて死ぬかと思った(テストめっちゃ大事)
あとはPS4買った
後輩と恒例のコミケに行くという儀式を行った

元受講生が新事業やるって行っていたのでインフラを用意する副業やった
めっちゃ安請負してしまった

9月

北海道に旅に出た
めっちゃ楽しかった(小並感)
転職ドラフトに出場したっけ
4件ぐらい指名がきたし、自分の相場感もなんとなくわかった
このあたりから自分の価値をそこそこ気にするようになった気がするな

10月

セルフブランディングとか言い始めた時期
友達とサービス作ろうぜといってまた頓挫した
何がダメなんだろうなあ。。。時間が投資できてない?熱し易く冷め易い?
副業の方で結構真面目に決済APIを使った実装を行うようになった

相当やばい便秘にかかって2週間お通じがこなかった。。。
人生初イチジク浣腸を使った
まじで速攻でて浣腸すごいってなった

11月

彼女と喧嘩?した
価値観のズレとかそういうのは違う人間である以上しょうがないからきちんと話し合って行くことが大事だと思った
ストレスがある時は紙とかに書き出すと何にイライラしてるのか明確になったり、気づいてない事象に気付けたりするのでおすすめ

あとフリーランスに興味持ち始めた

12月

続・仮想通貨がやばいことに
クリスマスをリア充っぽく過ごせた

自分のブランドつくっていくことを決意

ざっくり書いてみたけど、意外と毎月何かあったな
来年はもっと充実した年にできるようにしよう

とりあえず長くなったから来年の目標は明日書こう

【Rails】Modelでlink_to使いたいときにincludeするもの

概要

URL生成してaタグを載せたようなメッセージをModelで作りたくなり、何をincludeすれば良いのかわからんかったのでメモ
(結局link_to使わなかったけど)

対応内容

include ActionView::Helpers::UrlHelper

こやつをincludeすればモデルでもlink_to使えるようになります(使わんかったけど)

その他

とりあえず記事書かないといけない気がした

【CentOS7】firewallで特定のポートに特定のホストからのみアクセスさせる設定

気がついたら最終更新から1週間以上立っていました(驚愕)
先週北海道に旅だったり、無駄に副業に忙しかったり、PS4買ったりしたからしょうがない!!。。。。しょうがないんや(反省)

さて一週間記事更新してなかったから今回はとりあえず更新したいという思いもあり、軽めの記事。

概要

冗長構成を組んでいるインフラ環境で特定のミドルウェアへのアクセスはアプリケーションサーバーからのみのものを受け付けたいとなった時にfirewallで設定してやるということを行いました。
ちょっとコマンド長くて、またやるとき忘れそうなんで書き留めとく感じ。

今回は7777ポートに特定のIPアドレスからのみアクセスを受け付けたかったという想定。

方法

まずは7777へのアクセスさせていた設定を消しておく

$ firewall-cmd --permanent --remove-port=7777/tcp

特定のIPアドレスを通す設定を行う

 $ firewall-cmd --permanent --zone=public --add-rich-rule="rule family="ipv4" source address="IPアドレス" port protocol="tcp" port="7777" accept"

firewallをリロード

$ firewall-cmd --reload

設定確認

$ firewall-cmd --list-all

public (active)
  target: default
  icmp-block-inversion: no
  interfaces: eth0
  sources: 
  services: dhcpv6-client mysql ssh
  ports: 
  protocols: 
  masquerade: no
  forward-ports: 
  sourceports: 
  icmp-blocks: 
  rich rules: 
        rule family="ipv4" source address="IPアドレス" port port="7777" protocol="tcp" accept

rich rulesが設定されていればOK
複数ホストを設定したい場合はIPアドレスを変えてrich ruleの設定コマンドをもう一度叩けばOK

最後に

そういやCodeDeployの書きかけの記事がある
早く書いて世に出さないと(やり方忘れかけ)

【Nginx】ELBを通して認証用tokenをリクエストにのせる

一週間ぶりくらいの更新。週1では更新していくように勤めたい(手抜き記事だったとしても)

今回は完全に手抜き記事かつ備忘録

概要

今回Railsで簡単なToken認証をできるようにして無駄にAPIを叩かれないように対処したのですがEC2一台構成の環境では認証をパスすることができたものの、ELBを使って冗長な構成になっている環境ではうまく実行されなかった。

実行したかったのはAPIにリクエストをかけるような感じのcurl

curl https://example.com/api/v1/hoge -H 'Authorization: Token token' -X PUT

ELBを通してリクエストをかけるとAuthorizationの情報が抜け落ちてしまって認証が通らなくなっていた。

対応内容

NginxでリクエストヘッダーにAuthorizationの情報を乗せるようにすればうまくいきました。 設定は以下の感じ(locationのティレクティブに設定する感じ)

proxy_set_header Authorization $http_authorization;

一行入れれば解決でした。 $http_authorizationにリクエストに乗せたAuthorizationの情報が入っているのでそれをheaderに設定すればいけるって感じっぽいですね!

さいごに

最近開発のモチベはあるものの、その他雑務のせいでモチベが削られるという微妙な状態になっている…