Madogiwa Blog

主に技術系の学習メモに使っていきます。

javascript

JavaScript: Promiseについて分からなすぎたので手を動かしながら学んだことをMemo

JavaScriptのPromiseがあまりにも分からなかったので、手を動かしながらいろいろと動きを勉強したので、メモしておきます✍ Promiseの基本 Promiseとは、MDNを見てみると下記のような説明がされています。 非同期処理の実行の完了や失敗を検知することが出来…

はてなブログの記事を取得してカード表示するVueComponentを作った📦✨

はてなブログの記事を取得してカード表示するVueComponentを作ったので、そのへんの話をメモしておきますm( )m コードだけ見たい人はこちら はてなブログの記事をカードで表示するVueコンポーネント · GitHub イメージ このような形で表示されます 使い方 Bl…

Vue.jsでpropsを使ってimgタグのsrc属性を設定する方法

Vue.jsを使っていて親要素から子要素へpropsを使ってimgタグのsrc属性を設定する方法で、ハチャメチャにハマってましたが、一応出来たのでやり方をメモしておきます✍ 今回やりたかったこと 解決策 今回やりたかったこと 下記のような親子関係のコンポーネン…

javascript: Cloud Firestoreのはじめ方とCRUD系クエリMEMO🔥

ちょっとCloud Firestoreを触ってみたので、はじめ方とCRUD系のクエリのサンプルとか次触る時に忘れそうなのでメモしておきます✍ ※サンプルコードはjavascriptです‍♂️ Cloud Firestoreとは? Cloud Firestoreをとりあえず使ってみる CRUD系のクエリMEMO デー…

railsとVueを使って無限スクロール機能を実装するMEMO🌀

自分が作っているSPAっぽいrailsのサービスでrailsとVueで無限スクロール∞を作ったので、そのやり方をメモしておきますm( )m つくるもの 使うもの 実際のコード View Controller Model おわりに 参考 つくるもの 下記のようにスクロール時にAPIでデータを取…

javascript: ファイルダウンロード処理を実装するMEMO

最近MarkdownEditorのサービスを作っていて、作成したMarkdownファイルをjavascriptでダウンロード処理を実装したので、 やり方をMEMOしておきますφ(・・ やったこと 実際のコード 参考 やったこと 私のサービスではMarkdownファイルをダウンロードする機能を…

railsのViewからVueの単一ファイルコンポーネントへモデルのインスタンスを受け渡すMEMO

railsのviewからVueの単一ファイルコンポーネントへモデルのインスタンスをいい感じに渡す方法を模索して、結構ハマってたのですが、自分なりに落ち着いたのでやり方をメモしておきます✍ 今回やりたかったこと どうやったか 参考 今回やりたかったこと やり…

Vue.js + marked.js + highlight.jsを使ってシンタックスハイライト機能付きマークダウンエディタを作ってみたのでMEMO

最近、Vue.jsとmarked.jsとhighlight.jsを使ってマークダウンエディタを作ったので、使い方等をBlogにまとめておこうと思います はじめに まずはテンプレートを用意する。 marked.jsを使ってマークダウンテキスト→HTML変換を行う highlight.jsを使ってシンタ…

Vue.js: 異なるVueインスタンスのdataの値を取得する方法

下記のような2つのVueインスタンスあり、別のVueインスタンスのdataの値を参照したいときに少しハマったので、ちょっとバッドプラクティス感ありますが対応方法をメモメモφ(・・ 結論としては、下記のようにすればできた 参照したいVueインスタンスを変数に入…

【Rails】Webpackerを使ってRailsにフロントエンド開発環境を作ってみた

みなさん、こんにちは。まどぎわです(・∀・) 今日は、RailsアプリにWebpackerを使って、フロントエンド環境を整えて少し開発してみたので、そのあたりをブログに整理しておこうと思います WebPackerとは? 今回やったこと Webpackerの導入手順 フロントエン…

JavaScript:Anglar勉強整理メモ - サンプルアプリの実行と概要について -

最近、Angularの勉強を下記本で勉強しているので、頭の整理がてらメモを投稿してみる。 Angularアプリケーションプログラミング作者: 山田祥寛出版社/メーカー: 技術評論社発売日: 2017/08/04メディア: 大型本この商品を含むブログを見る 今回は、Angularの…

HTML+CSS+JavaScriptでネイティブアプリが作れる - ionic入門 -

最近、ionicを使ってみているので日本語のドキュメント少ないし、頭の整理も兼ねて入門記事を書いてみるφ(..) ionicとは ionicとは、HTML+CSS+JavascriptといったWebの技術を使ってネイティブアプリが開発出来るオープンソースのフレームワークです。 Know h…

Ruby on Rails:インスタンス変数等をjavascriptに受け渡す方法

はじめに Railsで取得したデータを使ってChart.jsでグラフ描画する等、Railsで扱っている変数をjsに受け渡す方法をメモφ(..) ↓イメージはこんな感じ 手順 概要 取得データをJSONに変換し、HTML要素のdata属性に設定(viewに埋め込む) jsで設定した要素のdata…

javascript:子画面から親画面のメソッドの呼び出し※配列を渡したかったけど渡せなかった話

javascriptで下記のようなことが、がやりたくてハマったので、φ(..)メモメモ 親画面から小画面の呼び出し 子画面から親画面のメソッドに値(配列)を渡す。 親画面の呼び出し 親画面の呼び出しは、window.openを使用する。 window.open('childWindow.html' , '…

javascript:form上でエンターキーを無効にする方法

webページ上でエンターキーを押したときにSubmitされるのを無効にしたくて、色々調べたのでメモ 方法:javascript内でエンターキーを検出し、falseを返す。 // エンターキー押下時のsubmitを無効化 $('input').on('keydown', function(e){ if ((e.wich && e.…

javascript:beforeunloadにメッセージを設定できなかった話

javascriptで、ページ遷移時にalertを表示したくて下記ページ等を色々と調べた。 ezolab-blog.net www.koikikukan.com // ページ遷移時にalertを表示 $(window).on('beforeunload', function(e) { return 'タスクが消えてしまいますが、ページから離れてもよ…

javascript:HTML上のtableをCSV出力する。

自作アプリ(TaskBorderTaskBorder)で、HTML上のtableをCSV出力したかったので、色々調べたことをメモ やりたかったこと tableタグの内容をCSV出力したかった。 実際にやったこと jQuery pluginの「table2csv」を使ってみた。 www.jqueryscript.net 下記な感…

javascript:<input type="date">の初期値に現在日付を設定する方法

自分で作っている時に少しハマったので、φ(..)メモメモ <input type="date">の日付の設定について <input type="date" id="limit"> HTML5で新しく追加された日付を入力するためのフォーム部品は、 時刻の形式を"yyyy-mm-dd"で設定しなければいけません。 なにも考えずに設定してしまうと・・・ しかし、下記の…

javascript:Twitter投稿画面に任意の文字列を初期設定させる方法

外部サービスからTwitterへ投稿する必要があり、 TwitterAPI等は使いたくなかったのでいろいろ調査した結果をメモ。Twitterの投稿画面に任意の文字列を初期設定させるためには、 投稿画面のurlの"text="以降にURLエンコードした文字列を設定して上げれば良い…