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コマンドが利用できるようにそれぞれの環境に合わせPATHを

前職では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)     },     totalPriceWithTax: function () {       // 算出プロパティに依存した算出プロパティも定義できる       return Math.floor(this.totalPrice * 1.08)     },   } }) itemsをこんな感じで定義して、computedを合計金額と税込金額を算出する関数を定義します。 表示は以下です。 <script src="http

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 | filterA | filterB データに対しての処理を今回は学びました。

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&g

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! を表示するところまで出来ました。 明日も進めていこうと思います。

前回 は、公式コンテナからの構築を諦めてmac OSでsailコマンドを使えるようにしてLaravelで用意されていたdocker コンテナの利用することにして、sailのエイリアスまで作成したところです。 今回は認証を再度チャレンジ ドキュメントの認証 のところをすすめてみるだけです。 マイグレーションを実行します。 sail php artisan migrate スターターキットをインストールします。 sail composer require laravel/breeze --dev php artisan breeze:install sail npm install && sail npm run dev これでログインページなど認証関連のページが表示されるようになりました。 アカウントの登録を行うとDBのusersテーブルへの登録と共にログイン後の画面が表示されることを確認しました。 cssなどのファイルは http://0.0.0.0:5173/resources/css/app.css になっており、公式のdockerイメージphp8/mysql8で自分で構築した時は、localhost:5173になっていたので、フロントのホストの設定か何かをする必要があるのかなと思いました。

前回 までは、dockerのphp8の公式イメージとmysql8の公式イメージでLaravelの認証を実装しようとしていましたが、CSS・JSが参照できていないらしくレイアウト崩れが起き、ちょっとわからなかったので、ローカルにLaravelのSailを利用してdockerを始めてみることにしまた。。 macにはcomposerをインストールしていなかったのでそこから始めました。 composerについては 公式 からインストール手順でインストールしました。 次にLaravelの ドキュメント の通り curl -s "https://laravel.build/example-app" | bash cd example-app ./vendor/bin/sail up これでアクセスの確認までできました。 sailをエイリアスにするために alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail' 開発するときはバックグラウンドで実行したいので sail up -d コンテナの停止は sail stop ここから認証を再開します。

前回 は、データベースのコンテナを作成しましたがLaravel9でmigration時にエラーが出て止まったところでした。 今回はこれを解消したいと思います。 原因は私の場合は、公式のphp8のイメージでLaravelをインストールして利用していたためだと思います。おかげで色々解りました。。 phpのpdo_mysqlが有効になっていないためだったのですが、有効にするのもphp.iniでextensionを追加すればいいのかと思っていたらそうではなく（それでもいいと思うんですがファイルの命名規則とか考えると）、コマンド実行でconf.dディレクトリにiniを追加して有効にしてくれました。 docker-php-ext-install pdo_mysql こちらのコマンドでiniが追加されてpdo_mysqlが有効になるので、 php artisan migrate こちらで作成したデータベースに無事にテーブルが作成されていました。 docker-php-ext-installはphpの拡張モジュールをインストールするコマンドみたいですね。 さてちょっと続きをやっていますが、画面は表示されるんですがどうもCSS/JSが読み込まれず パスワード忘れはこんな画面になっているんですよね。。 css/jsの参照がうまくいっていないのか…。 ちょっとどはまり中です。。 一旦、sailで構築に切り替えて早く触れて学習できることをメイン考えようかな。。