WEBエンジニアの技術メモと日々

転職して１週間ですが、一応おすすめの環境などを設定してみたところです。 しかしながらSequel ProでDBへローカルからの接続ができません。 環境的には、インスタンスへSSMを利用して接続している感じで、そのインスタンスからはMySQLへの接続はできています。 なのでSequel Proではそのインスタンスを介してMySQLの接続をする感じなのですがうまくいきませんでした。 結論は awsコマンドが利用できないから でした。 Host forward-instance     HostName i-************     User [your.profile]     Port **     IdentityFile ~/.ssh/id_rsa     ProxyCommand sh -c "aws ssm start-session --target %h --profile [your.profile] --document-name AWS-StartSSHSession --parameters 'portNumber=%p'" なのでSequel ProではSSHの設定でMySQLの情報を記載し、フォワードするインスタンスの情報（~/.ssh/configに記載しているのでホスト名だけ）を記載しています。 すると以下の表示がされます 詳細を表示を見ると、以下の記載があるのでawsのコマンドが使えないことがわかります。 なのでProxyCommandを以下のように変更しました。 ProxyCommand sh -c "PATH=$PATH:/opt/homebrew/bin && aws ssm start-session --target %h --profile [your.profile] --document-name AWS-StartSSHSession --parameters 'portNumber=%p'" PATH=$PATH:/opt/homebrew/bin については、私はhomebrewでaws cliをインストールしているからで、awsコマンドが利用できるようにそれぞ...

前職ではintelliJを利用していましたが転職してVSCodeを利用しているよう。 基本自動保存に慣れていたのですが、週明けにメモ的に保存していたファイルを開くと。。。 真っ白 まずは自動保存ですかね。 VSCodeのPreferences->settingsで検索して、検索窓にautoと入れると auto save の項目が出てくると思います。 こちらのサイトを参考 にしました。 私はafterDelayで別途指定したミリ秒(default 1,000ミリ秒)で保存されるように設定 1秒もいらないかと思ったので2,000ミリ秒に変更しました。 設定項目名は Auto Save Delay 真っ白になったファイルに何か文字を記載 そうするとタブの未保存のポッチが指定秒数で消えるようになりました。 あー私の入社してから１週間のメモが、、、

Vue.jsをはじめて勉強中です。 前回 はVue定義のオプションでfiltersについて触った感じです。 今回はcomputedに触れていきサンプルコードと説明をもとにまた記事にしていきたいと思います。 ちなみに参考にする購入した書籍は こちら 。 computedというオプションはデータを処理して表示するなどをするときに使う。 例えば、 var items = [   {     name: '商品１',     price: 300,     quantity: 1   },   {     name: '商品２',     price: 400,     quantity: 2   } ] var vm = new Vue({   el: '#app',   data: {     items: items   },   filters: {     numberWithDelimiter: function (value) {       if (!value) {         return '0'       }       return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')     }   },   computed: { // 算出プロパティ     totalPrice: function () {       return this.items.reduce(function (sum, item) {         return sum + (item.price * item.quantity)       }, 0)   ...

Vue.jsをはじめて勉強中です。 前回 はVue定義のオプションでel/dataについて触った感じです。 今回はサンプルコードと説明をもとにまた進めていきます。 購入した書籍は こちら 。 filterというオプション これはdataオブジェクトに対して処理したい場合に記述します。 例えばdataに対して、金額表示を３桁のカンマで区切りたい時などです。 jsfiddle.netで実行しました。 （パイプで繋げて利用するところがsmartyを使っていたときの自前関数見たいな使い方だなと感じました。古くてすみません。。） <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app">   <p>表示金額: {{ price | numberWithDelimiter }}円</p> </div> var vm = new Vue({   el: '#app',   data: {     price: 1000000   },   filters: {     numberWithDelimiter: function (value) {       if (!value) {         return '0'       }       return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')     }   } }) window.vm = vm dataのpriceに対して処理をする場合にパイプ(|)で繋げてフィルター名を書いてあげると、関数のパイプの左側を引数として処理するということみたいです。 正規表現の部分は数字３回の繰り返しで、マッチした数字３回分とカンマで繋げていって文字列を返すというもの。 ちなみにfiltersは連結して複数適用できる。 value |...

Vue.jsをはじめて勉強中です。 前回 はVueが定義されるところを理解しました。 今回はサンプルコードと説明をもとにまた進めていきます。 購入した書籍は こちら 。 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app"> <p>{{message}}</p> </div> <script>   new Vue({      el: '#app',      data: {           message: 'こんにちは！'     }   }) </script> Vueを定義する際にオプションが指定できて、上のコードだとel/dataがオプション指定されています。 elプロパティは、DOM要素のオブジェクトかCSSセレクタの文字列が使える #app の要素をマウントしてその要素と子要素を置き換える DOM要素のオブジェクトの場合はこんな感じで確認できました。 el: document.getElementById('app') マウントはメソッドによるマウントもできる new Vue({...}).$mount('cssセレクタ/DOM要素オブジェクト') インスタンス生成後の任意のタイミングでマウント実行できる dataプロパティはUIの状態になりリアクティブシステムにのります。 例えば同じコードでjsfiddle.netで、jsfiddle.netのconsoleから vm.message='hello!' と入力して実行すると画面はhello!に変わります。 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app"> <p>{{message}}</p> </div...

Vue.jsをはじめて2日目　前回はこちら（ Vue.jsをはじめてみます① ） いよいよ手を動かしていく感じです。 Vue.jsを使うには <script src="https://unpkg.com/vue@2.5.17"></script> 書籍ではバージョンを指定していますが、Vue.jsのドキュメントでは <!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> となっています。どちらもCDNでライブラリ配信みたいですね。 書籍にはバージョン指定しているけど、独自に取得したファイルを用いても差し支えないという記載があるのでVueのドキュメントに記載の通りにしてみます。 こちらをscriptタグで読み込むことにより、グローバル変数のVueが定義されるようです。 <script>     console.assert(typeof Vue !== 'undefined'); </script> console.assert は検証でVueが定義されているかを確認し、定義されていたら何もしないというもののようです。 jsfiddle.netで実行したところ 真っ白で何も起きていない⇨Vueが定義されているようです。

私この度転職をするのですが、転職先がどうやらほぼ私が触ったことのないVue.jsを使っているようで、（他触れたことがないAWSのサービスとか）入社前にちょっと経験しておこうかなと思いさわり始めました。 取り急ぎ書籍を購入 購入した書籍は以下になります。   Vue.js入門 基礎から実践アプリケーション開発まで (amazonへリンク) とりあえず１章を読みましたが、多少WEBに関する知識がある方がよい本だと思いました。 １章はWEBの歴史からVue.jsに触れるまで(お決まりhello world!) 最近は環境作らなくてもお気軽にブラウザで試せるのもいいですね。 そもそもテキスト表示だけならHTMLファイルでブラウザ表示でいいですし。 https://jsfiddle.net/ 簡単にコードを実行できるこちらで進められそうです。 早速 <div id="app"></div> にVueで#appをマウントして hello world! を表示するところまで出来ました。 明日も進めていこうと思います。