aLiz

Vue.js/Nuxt. jsのあれこれ発信中！ ★WPへ移行しました → http:…

aLiz

Vue.js/Nuxt. jsのあれこれ発信中！ ★WPへ移行しました → http://nuxt.alizlab.com/　 ★twitter → https://twitter.com/aLizlab　 ご感想やご意見をいただけると嬉しいです。
  • 固定された記事

ポートフォリオ一覧

aLiz と aLiz のメンバーがこれまでに作ってきたポートフォリオの一覧です。 随時更新していきます！お楽しみに！！！ LP大和アセットマネジメント株式会社様の脱炭素テクノロジー株式ファンドの紹介 [https://www.daiwa-am.co.jp/special/carbonzero/] 株式会社Aww様のimma NFT Project [https://www.imma.ai/] 株式会社olio様のiPadmate Kidsの募集 [http://kid

aLiz

    • 【TS導入編】超初心者向けNuxt TypeScript 〜Options API〜

      前置き今回はNuxt TypeScriptについてです。 導入方法と簡単な書き方をご紹介🌟 本格的に使う前に こういう記事を見ると良いかもです💡 Nuxt(vue) + TypeScriptをはじめるときに知っておきたかった10のこと フレームワークなしの場合はこちら 共通の書き方も少しずつ出しているので 気になったら見てみてください✨👀 ⬇️TypeScriptとは 　TypeScriptの良さ 【Nuxt.js】超初心者向けTypeScript〜環境構築編〜 ⬇️

      aLiz

      • 更新をnoteからQiitaに変更します！

        先日のtwitterでのアンケートにより WordPressとQiitaの2つをメインに 更新していこうと思います🌟 ご覧いただいた方も多く、 どこでもOK⭕️という方が大半でしたが、 投票を尊重しての結果です🍀 zennはまだ公開したことがないので、 イメージが湧かない方もいたのかな… という印象でした🤔💭 ⬇️今後はこちらをご覧ください💕 今までと同じく WordPressで最初に公開、 その後は手動でQiitaにコピペするので 公開時間に差がありますことを ご了

        aLiz

        • 【TS導入編】超初心者向けTypeScript〜自動コンパイル〜

          🎈 WPでも公開中です https://wp.me/pc9NHC-1qd #vue #nuxt #プログラミング #エンジニア 前置き前回の続きです❣️ 型指定, 型宣言をすることで 実行前のコンパイル時に エラーを発見できるTS💕 こんな感じで教えてくれます。 数字で定義したのに 文字列が入っているよ❗️ という内容ですね。 // terminalapp.ts:8:21 - error TS2322: Type 'number' is not assignabl

          aLiz
        • 固定された記事

        ポートフォリオ一覧

        aLiz

        • 【TS導入編】超初心者向けNuxt TypeScript 〜Options API〜

          aLiz

        • 更新をnoteからQiitaに変更します！

          aLiz

        • 【TS導入編】超初心者向けTypeScript〜自動コンパイル〜

          aLiz

          【Nuxt.js】超初心者向けTypeScript〜環境構築編〜

          🎈 WPでも公開中です https://wp.me/pc9NHC-1pB #vue #nuxt #プログラミング #エンジニア 前置き型チェックに便利なTS💫 何が良いのか❓ まずはこれを見てください👀 <template> <div class="page"> <button @click="click">click</button> </div></template><script>export default { methods: { click()

          aLiz

          【Nuxt.js】超初心者向けTypeScript〜環境構築編〜

          aLiz

          【Nuxt.js】開発ブログ：カレンダーを作成してみる②

          🎈 WPでも公開中です https://wp.me/pc9NHC-1o5 前置き 前回の続きです。 カレンダーの作成をしたい📆 前回は必要な情報が何か、 探すのでいっぱいでした😵💦 ということで、 情報の整理からしていきます❗️🧹 続きをやる前に 今一度やり方を見直し、 実装できそうなものから 手をつける方向にしています🌟 前回同様、 思い立ってやってみる系の 日記みたいなものです✍️ dayjsの使い方とよく使うTips とりあえずdayjsを使う際には ここを見な

          aLiz

          【Nuxt.js】開発ブログ：カレンダーを作成してみる②

          aLiz

          【Nuxt.js】開発ブログ：カレンダーを作成してみる①

          🎈 WPでも公開中です https://wp.me/pc9NHC-1hN 前置き思い立ってやった系の記事です🐣💭 とりあえずチャレンジしてみよう！ シリーズ…😂笑 いつもの丁寧な解説ではなく、 こんなこと調べて こういう手順で試してみた という内容です💡 自分のメモ的なものですが、 初心者の方でも 開発する時のイメージとして 参考になるかもと思ったので残しておきます✍️ 中級、上級者の方も 必要な部分だけピックアップして 参考にしていただければと思います🍀 ##全体

          aLiz

          【Nuxt.js】開発ブログ：カレンダーを作成してみる①

          aLiz

          【Nuxt.js】非同期通信awaitのネストやチェーンについて

          🎈 WPでも公開中です https://wp.me/pc9NHC-1nm #vue #nuxt #プログラミング #エンジニア 前置き今回はasync/awaitで Promiseの役割をする awaitについてです💫 2つのパターンについて書いていきます。 ・awaitでawaitをネスト ・awaitで.thenのメソッドチェーン そもそも今までの記事では const res = axios.get みたいな取得した値を定数にして その後で取得した値が返ってき

          aLiz

          【Nuxt.js】非同期通信awaitのネストやチェーンについて

          aLiz

          【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える②

          🎈 WPでも公開中です https://wp.me/pc9NHC-1mn #vue #nuxt #プログラミング #エンジニア 前置き こちらの続きです。 ルール変更して安全な状態を作りたい❗️ ログインユーザーかつ 送信したデータ内のuidと authで取得しているuidが 一致する場合のみ 読み書きしたい❗️ ということでやっていきます。 ルールの確認とコード修正##ルールの前提 条件を書かなければfalseです。 この場合はcitiesコレクション内の

          aLiz

          【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える②

          aLiz

          【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える

          🎈 WPでも公開中です https://wp.me/pc9NHC-1m9 #vue #nuxt #プログラミング #エンジニア 前置きUdemyのコースで 自分自身も見直して勉強になったので Firebase関連の 送信・取得をまとめていきます💫 以前も何度かやっていますが、 ulとliでコンポーネントを分けて… というのがなかったので、 その辺も含めて💡 作ったのはfirebaseと連携した チャット機能(Realtime Database)と タスク管理機能(C

          aLiz

          【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える

          aLiz

          【Nuxt.js】Vuexのcontextと第二引数について

          🎈 WPでも公開中です https://wp.me/pc9NHC-1k9 #vue #nuxt #プログラミング #エンジニア 前置きみなさんはVuexのactionsで context部分を どのように書いていますか❓ mutationsや他のactionsを 呼び出さない場合の話です☝️💡 呼び出さない場合というのは Firebaseなどに送信さえできればよい、 それだけで完結するものですね💡 また、第二引数以降に 複数の値を渡したい場合は どうしていますか

          aLiz

          【Nuxt.js】Vuexのcontextと第二引数について

          aLiz

          【Nuxt.js】input type="checkbox"をコンポーネント化する時のパターン

          🎈 WPでも公開中です https://wp.me/pc9NHC-1l0 #vue #nuxt #プログラミング #エンジニア 前置きinput type="checkbox" チェックボタン部分のみを コンポーネントにする時のコードを 書いています✍ シュガーシンタックス v️-modelのおさらいから 実際のコンポーネントの サンプルコードなどを 載せていきます🍀 参考: Checkbox の Vue コンポーネントを作成する Tips 【Vue.js 再入門

          aLiz

          【Nuxt.js】input type="checkbox"をコンポーネント化する時のパターン

          aLiz

          【Nuxt.js】アクセシビリティとコンポーネント化を考えたcheckbox

          🎈 WPでも公開中です https://wp.me/pc9NHC-1kc #vue #nuxt #プログラミング #エンジニア 前置きinput type="checkbox" といえばこのデザイン これをカスタムすると 色や形も自由に変更できます✨ ただCSSでデザインできる💫 とわかっていても 毎回ググっては読み解くのに 時間がかかったため シンプルに理解できるよう 記事にしました🔍📚 また、ほとんどのサイトでは inputをlabelで囲まず、 label

          aLiz

          【Nuxt.js】アクセシビリティとコンポーネント化を考えたcheckbox

          aLiz

          【Nuxt.js】ESLintまとめ

          🎈 WPでも公開中です https://wp.me/pc9NHC-1fx #vue #nuxt #プログラミング #エンジニア 前置き公式 ESLintはコードの問題を見つけて 修正できるものです🌟 ルールのカスタムもできます💡 ⬇️Prettierはインデント整形です。 ESLintの使い方や、 直面した色々なエラー💥 そして解決策✨をまとめました❗️ エラーに関しては Prettierの分も一緒に記載しています。 慣れていないと 最初はエラーの見方も よく

          aLiz

          【Nuxt.js】ESLintまとめ

          aLiz

          【Nuxt.js】$slotsを使ってみよう

          #vue #nuxt #プログラミング #エンジニア 🎈 WPでも公開中です https://wp.me/pc9NHC-1iY 前置きあまり見かけない$slotsのご紹介🌟 $slotsはVue公式の render関数で使用されています。 vm.$slots のアクセスは、描画関数 によるコンポーネントを書くときに最も便利です。 vm.$slots ただrender関数はNuxtでやるのは 結構むずかしいです💥 なのでrender関数を使用しない 実用的な$sl

          aLiz

          【Nuxt.js】$slotsを使ってみよう

          aLiz

          【Nuxt.js】コンポーネントを自動インポートしよう

          #vue #nuxt #プログラミング #エンジニア 🎈 この記事はWP専用です https://wp.me/pc9NHC-1iI 前置きコンポーネントを呼び出す際は この2つが必要ですよね？💡 ・import文 ・componentsフィールドの定義 <template><div class="page"> <ButtonDefault /></div></template><script>import ButtonDefault from '~/componen

          aLiz

          【Nuxt.js】コンポーネントを自動インポートしよう

          aLiz