2022-06-18

Vue.js Quasar

先日、触れる機会があったのでQuasarについてまとめたいと思います。QuasarはVue.jsを基にしたフレームワークで、豊富なUIパーツやレスポンシブ対応画面の用意な実装。開発環境の手軽な立ち上げといった部分を特徴としています。

実際にQuarsarフレームワークでプロジェクトを作成する際には、バージョンやスクリプトのタイプを選択し各々の必要なカスタイマイズを済ませた状態のプロジェクトが出来上がるような仕様になっています。

// 以前のプロジェクト作成コマンド
 quasar create hoge

// 現在のプロジェクト作成コマンド(コマンド使用前にyarn,npmをquasarで使用可能にしておく必要あり)
 yarn create quasar
 npm init quasar

プロジェクトの作成が終われば、quasar devのコマンドを実行すればローカル環境が立ち上がりhttp://localhost:8080でQuasarの初期画面を表示する事が可能です。

2022-02-14

PHP Tinker

今日はPHPのLaravelフレームワークで開発をする際に便利なTinkerという機能についてまとめたいと思います。

Tinkerは対話型コンソールと呼ばれる、入力したコードをすぐに出力できる便利な機能になります。自分がよく使うのはTinkerを用いたデータベース操作なので、そちらについてまとめて行きたいと思います。

Tinkerを使うために何をインストールしなければいけない訳ではないので、Laravelでプロジェクトを作成すれば下記のコードから使うことができます。

php artisan tinker

DBの接続に関してはLaravelのプロジェクトで.envファイルから行い、接続を確立さえできればデータの挿入や削除、参照などはTinkerから行うことが可能です。クラスの作成が終わっていれば、そこからインスタンスを生成しプロパティに値を設定するといったこともできます。

TinkerからDBの操作を行う際には下記のコマンドから実行します。

//下記の二つに関しては取得のためのコマンドであるget()が含まれているので必要ない

// 全てのレコードの取得
APP\Models\クラス名::all();
//特定のレコードの取得
APP\Models\クラス名::find(id);

また、レコードを変更や削除したい場合は一度変数にレコードを格納してから変更もしくは削除を行えばOKです。基本的なオプションやコマンドなどはSQLと共通する部分も多いので、そのまま流用できて便利なものもあるような印象でした。

今日は以上です。

2022-02-06

Vue.js 単一ファイルコンポーネント

今日はVue.jsの単一ファイルコンポーネントについてまとめたいと思います。

単一ファイルコンポーネントとは今までhtml、css、javascriptを三つのファイルに分けて記述していた物を一つのファイルにまとめて記述する方法になります。Vue.jsの場合はファイル名.vueといった拡張子の形で作成されます。

構成としてはhtml部分を記載するtemplate部分、javascript部分を作成するscript部分、css部分を作成するstyle部分によって成り立ちます。

<template>
  htmlの記述
</template>

<script>
  // 必要ファイルのインポート
  import ~
  
  // 外部から参照するための記載(データ、メソッドなどもこの中に記載する)
  export default {  
　　
  }

</script>
<style>
  cssの記述
</style>

元々分離されていたファイルをまとめた形になるので、記法が大きく変わったり特殊な決まりがあるわけではなくエラーが発生した際などに問題がある箇所の特定に役立つ記法といった印象を受けました。特に今まで名前の重複を気にしてスタイルを当てる必要があったCSSの一意要素名を考える必要がなくなったのは、個人的に負担が減る部分でした。

本日は以上です。

2022-01-01

Figma

今日はFigmaについてまとめて行きたいと思います。Figmaとはブラウザ上で簡単に使用出来るデザインツールで、開発の際の画面イメージなどをオンラインでデザイナーと開発者が共有することを可能にする物になります。少ないプロジェクト数なら無料で使えるので、実際に利用しながら使い方などをまとめて行きたいと思います。

基本的な使い方としては、プロジェクトとファイルを作成した後に開発に用いるデバイスの種類(iphoneやmacbook~インチ)などを選択し、キャンバスと呼ばれる擬似的なデバイスの画面に要素を配置していくといった使い方になります。 f:id:zenkikkkk:20220101121320p:plain f:id:zenkikkkk:20220101121333p:plain

ページ全体の色やボタンを模した図形の挿入、複数要素のグループ化なども可能になっており実際に用件を画面のイメージとして作成した際にどうなるのかといったプロトタイプを作成する事が可能になっています。

また、画面遷移を伴うシステムの場合プロトタイプ機能を用いることによって、実際にボタンが押下された際にどのように画面遷移が行われるのかといったイメージまで作成する事が可能です。下記の場合だと「次の画面に遷移」ボタンと画面2が関連付られており、ボタンをタップすることで画面1から画面2に遷移する挙動まで確認する事が可能です。

基本的な機能を触った感想としては、以前個人の開発で使っていたAndroidstudioに近いものがあるのかなといった形でした。Figmaは開発を伴うツールではないので、コードをこのツールに書き込んだりバックエンドの処理を保持することはないのですが、よりデザインを詳細に行えたり実機の動きに近いイメージを作成するための機能が複数存在している印象を受けました。

今日は以上です。

2021-09-29

SPA Vue.js

最近フロントサイドの勉強がてらポートフォリオサイトを作成している際に、Vue.jsでSPAを作成する事がありました。その時に使ったVue.Routeという機能が便利だったので忘備録がてらまとめて行きたいと思います。

VueRouterとはVue.jsを用いてシングルページアプリケーションを作成する際に用いる拡張ライブラリの一つになります。vueのコンポーネントとURLを紐付け、同一ページ内で画面遷移を行います。使うためにはターミナルなどからプロジェクトにインストールしておく必要があります。

// インストールコマンド
vue add router

必要な記述はindex.jsへのルート定義、main.jsへのrouter読み込み、App.vueへの読み込み位置記述くらいで簡単にSPAを作成することが可能です。

// index.js

//インスタンスの生成
const aaa = new VueRouter({
// パスとコンポーネントを紐付ける
  routes: [
   {path: "/", component: コンポーネント名}
  ]
})

// main.js

new Vue({
  el: "aaa",
  router,
  render: h=> h(App)
})

上記程度の記述で同一ページないでの画面遷移が可能になるので、また利用する機会があれば使って行きたいと思います。

今日は以上です。

2021-09-23

AWS VPC~RDS設定

今日はAWSでRDSを作成する際の手順と自分が少し詰まった部分をまとめたいと思います。

データベースをAWSで作成する際にAWSのRDSから作っていくのですが、その際にVPCとサブネットを選択する必要があります。このVPCは作成した後に変更することは不可能なため、サービスをデプロイする際にはしっかりをその用途に向いたVPCを作成してからRDSを作る必要があります。

f:id:zenkikkkk:20210923233217p:plain

また、RDSを作成する際に選択するVPCにサブネットを二つ以上作成しておく必要があります。その中の一つのサブネットにRDSを配置するイメージになります。このサブネットは作成する際にVPC範囲内のIPv4アドレスを重複しないように設定しておく必要があります。

ここからが自分が詰まった部分になるのですが、サブネットを二つ作成した後にRDSを作成しようとしてもエラーメッセージが表示されます。これはVPC内のサブネット二つのAZを違うものに設定する必要があるのですが、その指定に引っかかった事が原因になります。サブネット作成の際にデフォルトの選択肢のままだと同じAZになってしまうので注意が必要です。

今日は以上です。

2021-09-11

AWS RDS設定

今日は、実際にデータベースを持っているWebサービスをAWSにてデプロイする際にRDSを作成する手順についてまとめたいと思います。

まず最初にAWSメニューから、RDSを作成します。AWSには下記のDBに対応しているため、自身が作成したRDSを選択してRDSを選択します。ちなみに性能としてはAuroraがAWSに最適化されているため一番高くなっています。

f:id:zenkikkkk:20210911224537p:plain

この画面でストレージのタイプやマルチAZなどの可用性も設定を行います。

上記の手順でRDSの作成は終了しますが、実際にEC2インスタンスに接続するためにはセキュリティグループとサブネットを適切に設定する必要があります。

セキュリティグループはEC2インスタンスからRDS用の物を設定し、サブネットはRDSの画面から作成し設定します。

上記の設定が終わればAWSで作成する段階は終了です。あとはSSHなどでEC2インスタンスにて接続し、OSにRDSをインストールします。インストールにはsudoコマンドを用います。

RDSのインストールしたあとは、RDSをエンドポイントを入力してログインが完了したらOKです。

今日は以上です。