Vue

最近Vuexを使う必要が出てきたので公式ドキュメントなどを読んでいたのだが、習うより慣れろということでVuexを利用した簡単なアプリケーションをいくつか作ってみた。 今回は、二次関数の実数解を計算する機能solveEquation、カウントダウンタイマーtimer、天気予報を取得する機能weatherForecastの3つのサンプルを作成したので、Vuexの具体的な適用方法などを含めてまとめておく。 なお、このサンプルではComposition APIを利用している。 前編でsolveEquationとtimer、後編でweatherForecastを紹介する。 以降の説明は基本的にVuexに…

世の中どこにでもあるバーコード、実はvue-barcodeを使うと簡単に表示することができます。 バーコード表示が必要なアプリケーションを作る機会があったので、備忘録として残します。 対応しているバーコード CODE128 EAN EAN-13EAN-8EAN-5EAN-2UPC (A)CODE39ITF-14MSIPharmacodeCodabar インストール npm npm install vue@3 jsbarcode@3 @chenfengyuan/vue-barcode@2 Yarn yarn add vue@3 jsbarcode@3 @chenfengyuan/vue-barc…

LeafletのVue3での使用例（座標範囲の取得を含む）を照会するリポジトリを作成しました。 以下が動作例です。 https://static.ldas.jp/vue3-leaflet/ ソースコードは以下です。 https://github.com/ldasjp8/vue3-leaflet Vue3初学者のため、誤りなどがあるかもしれませんが、参考になりましたら幸いです。

Vue3でOpenSeadragonを使用するサンプルリポジトリを作成しました。 以下が動作例です。 https://static.ldas.jp/vue3-osd/ ソースコードは以下です。 https://github.com/ldasjp8/vue3-osd Vue3初学者のため、誤りなどがあるかもしれませんが、参考になりましたら幸いです。

ご挨拶 お久しぶりです。 リサーチデベロップメントのたかはしとし（ @doushiman_jp ） です。 最近はradikoアプリで、芸人さんのラジオを聴くことにハマっています。 オールナイトニッポンとか大昔によく聴いてたなあ…… 本題 ふと思い立って、「あぁ……Vue-CLIを使ってWebページが作りてえなぁ……」と思いまして。 それなら、最近勉強中のAzureのStatic Web Apps がいいなあ、となりました。 じゃあいつも通り、開発はVisual Studio Code でというところで、おや？と。 ご存知のようにVue-CLI をローカルで開発する場合、 npm run se…

Vue3 を使ってわからなかった事のメモシリーズ ルートコンポーネントにプロパティを渡すことをリンクを参考にしてやってみた。しかし、値を渡すことはできたが age プロパティの値が文字列だった。 const router = new VueRouter({ routes: [{ path: '/User/:name/:age', name: 'User', component: User, props: true }] }) // User コンポーネント props: { name: String, age: Number, }, age プロパティの値を Number で渡すには rout…

Vue3 を使ってわからなかった事のメモシリーズ コンポーネントを自作しときに初期化時の処理を記述するのはどうすればいい？ 解 setup を使う export default { setup() { // mounted onMounted(() => { console.log('Component is mounted!') }) } } コンポーネントで発生する他のイベントは ライフサイクル のキーワードで調べればヒットする

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,960 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （17,794件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥1,84…

先月のZCCA-IA認定に引き続き、クラウドベースのセキュリティソリューションとして導入が増えているZscaler社のサービスZPA(Zscaler Private Access)のeラーニングおよび認定試験が先日完了し、Zscaler Certified Cloud Administrator - Private Accessに認定された。 Zscalerとは アメリカに本社を持つZscaler社が提供するクラウドベースのセキュリティソリューションで、アメリカや日本のみならず世界中の多くの企業や団体で導入が進められている。 PCやスマートフォン等のデバイスやインターネット回線やクラウド上のサ…

今生まれて初めてVue.jsを触ってるんですけど。 Vue.jsってVue-CLIってのとCDNタイプのがあるんかい！とか、Vue2.xとかVue3.Xとかで書き方が違うんかい！とか色々試行錯誤しております。 まぁこれで気づいたことは全て終わったあとにZennかQiitaで上げようと思います。 で、今回はVue.jsの切り替えアニメーションの「transition」の速度についての気づき。 結論：フォーム切り替えはenterは0.1s、leaveは0.01sが丁度いい ということです・・・ サンプルコードとかで試行錯誤していると「5s」とかで設定してるところが多いんですけど、多分これって普通の…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,960 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （17,785件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥1,84…

こんにちは、ブロックチェーンチームの id:d-kimsuon です Vue2 では TypeScript がサポートされており、公式の TypeScript のサポートのドキュメント に従うことで TypeScript で書いていくことができます しかし、素直に書いていくと any 型になってしまったり、実際とは異なる型付けになってしまうポイントがあります この記事では TypeScript で Vue2 (Option API) を書くときに型を厳格にしやすい書き方等を紹介します 省略可能な props には明示的に PropType<型 | undefined> する 型安全な例 型安全…

はじめに 1月末〜システム開発のプラクティスに入り、先日自分が作った全てのPRがマージされたので、振返りを書きました。 途中、自作サービスのエレベーターピッチ&ペーパープロトタイプ作成や技術検証に取り組んだり、1月中旬〜3月中旬の2ヶ月間のみ、働いているパートのシフトを週4から週5に増やしたり、FBC内でゴールデンウィークに開催されたEverydayRailsという書籍の短期集中輪読会に参加したり、とこのプラクティス以外にも色んなことに取り組んでいたのもあり、想定していたよりも時間がかかってしまいました。 システム開発に取り組む中で、たくさんの学びや気づきがあったので、「最近月ごとの振返りも書…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,960 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （17,774件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥1,84…

～あらすじ～ パワハラがひどすぎるあまり、本社移転の際に昔の本社を営業所にし、とりあえずそこに放置されたA氏。しかし彼はそのパワハラ力を活かし、営業所の他人員をすべてやめさせて、何も仕事ができないのでと本社転勤を成功させたのであった… っていうやべぇやつがリーダーのプロジェクトがあるんだけど、パワハラだけじゃなくてそいつの書くコードが本当にキモい、スパゲッティとはこのことかと思う。修正する人間のこと一切考えてない 多分あいつがパワハラしまくっちゃうの Aがクソコードを書く 部下がそのコードの修正依頼をこなす ハードコーディング＆読みづらすぎなのでミスが出やすい A視点だと部下がミスばっかするの…

Web開発のエンジニアとして働き始めて1カ月が経過しました。 初心忘るべからず、ということで個人的な備忘録も兼ねて、未経験でエンジニアに転職して感じたギャップを書き出してみます。 転職するためにスクールに通ってる方もたくさん居ると思いますので、まあこんなやつも居るんだなーという一例として読んでいただければ。 入社時の私のスキル感 ギャップ①プログラミングスクールと実務の違い 速度への意識 誰でもエンジニアになれるという言葉の裏に何があるか ギャップ②教えてくれない前提 ギャップ③人の書いたコード読む力めっちゃ必要 総括、先は長いのでひたすら頑張る 入社時の私のスキル感 まず簡単に私が入社した当…

display:flex だいぶ分かってきた！ pic.twitter.com/Rhw0dDSiv1 — しすねこ (@sisneco_cat) 2022年6月25日 最近研修が忙しくてろくにプログラミングできてなかったのですが、 やっとこさ落ち着いたので前回言っていたdisplay:flexを使ったレスポンシブデザインを 実装しました。 ポイントは、 1.メディアクエリを使ってhtmlタグにfont-sizeを設定する 2.resizeメソッドを作成して、一定の幅でクラスをバインディングする です！ 1に関しては、"rem"を正しく使うためですね。 remとはなんぞや。という方は "rem …

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,960 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （17,769件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥1,84…