プログラミング– category –
-
【Nuxt3】アプリをAWS CDKでデプロイする方法＃１
本記事ではNUXT３で作成したアプリケーションを簡単にAWSにデプロイできるAWS CDKというサービスを利用したので、初心者と自分の知識定着のため発信する。 参考書籍はこちらです。 【CDKって？】 AWS CDK（Cloud Development Kit）は、AWSのインフラをコー... -
【Nuxt3】Vueで再利用できるボタンコンポーネントを作ろう
駆け出しエンジニアのそうすけです！ Webアプリでコンポーネントの再利用が多いのは入力フォームやボタンかと思います。 処理・表示・スタイルをいちいち変えるのは面倒…再利用したいけど、どう実装したらいいの？ そういった方に向けての記事になります。... -
【Nuxt3】IndexedDBを使って簡単にアプリを作成する方法
一般的なWebアプリはCRUDは必須機能です。 だがミドルウェア、バックエンドの知識が必要になってくるの実装が大変。 そこで簡易的にDB機能を作るのがIndexedDBです。 環境構築も不要でブラウザがあれば簡単に使用できます。 【Nuxtでの使用注意点】 必ずon... -
【Nuxt3】computedのget/setで親子間をリアクティブにやり取りする
おはようございます！そうすけです。 VUEはコンポーネントを使いまわしできる部分が特徴です。そして双方向バインディングも特徴。 ですが、親子コンポーネント間で双方向バインディングの組み合わせはどうでしょうか。 例えば入力フォームです。inputタグ... -
【Javascript】「’」と「`」の違いについて
JavaScriptでは、文字列を表現する際にシングルクォート「'」とバッククォート「`」の2つの記号が利用されます。 学習初期の時、これの間違いでかなり詰まりました。 これが他人のコード見る時、めっちゃ見にくい！！ この記事では、「'」（シングルクォー... -
buttonタグを使ったボタンを押すとリロードしてしまう対策
ウェブページにおいて、buttonタグを使用してボタンを作成することは一般的ですが、時折、ボタンを押すとページが自動的にリロードされてしまうという問題が発生します。 この記事では、この問題に対処する方法に焦点を当て、buttonタグを使ったボタンを押... -
【Nuxt3】IndexedDBでの実装例と失敗例
IndexedDBでアプリを作った時のサンプル例と失敗事例をまとめました。 【IndexedDB サンプルアプリコード】 書き込みページ 読み込みページ 読み取りレシピページのコード <template> <TheContainer > <AppH1>レシピアプリ</AppH1&g... -
【NUXT３】verbatimModuleSyntaxでエラーがでる
2023年10月のNuxt3.8へのアップデートより、型のimportの定義がより厳密になりました。 Vue requires that type imports be explicit (so that the Vue compiler can correctly optimise and resolve type imports for props and so on). See core Vu... -
【Nuxt3】typesディレクトリに型定義したtsファイルを置く
プロジェクト内で何度も同じオブジェクトを定義するのは面倒です。 /types └ entities.ts → / レシピオブジェクトを多用するときはここで定義。 export interface RecipeEntity { //料理名 name:string; //材料名 items:{ name:string; amount:""... -
【Nuxt3】useRoute()でおしゃれなパンくずリストを作ろう
おはようございます。そうすけです。 ポートフォリオサイトでパンくずリストを作成してみました。 参考書籍：https://news.nextpublishing.jp/news/detail/1282/かなり良かったので皆さん読んでみて。 いままで作ったことがなかったので、面白いやり方を参...
