ジャンボモナカスマートフォン用の表示で見るジャンボモナカ34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。JS)に置き換えた場合の対応リスト2019-06-26WebpackでMoment.jsを使う時の注意点JavaScript公式マニュアルには書いてあるのだが、何も設定せずに、Webpackを使うと標準のMoment.jsのコード量がとても大きいため、最終的に出力されるファイルも必然的に大きくなってしまう。momentjs.comそこで不要なローカルタイムの設定を削除し、必要なタイムゾーンのみ残すには、Webpackでpluginを使う必要がある。省略これ盲目的に使うとコード量が肥大化してしまうので注意が必要である。16:16WebpackでMoment.jsを使う時の注意点Tweet広告を非表示にするもっと読むコメントを書く2019-06-19IE11でforEachがエラーになってしまう現象についてJavaScriptdocument.querySelectorAllで複数のDOMを取得して、forEachでループさせようとするとIE11でエラーが発生する。document.querySelectorAll('.hoge').forEach(function(currentValue){})そこで素直にfor文を使ってエラーを解消することにした。_hoge[i];}IE11ってモダンブラウザじゃーないのかぁ〜。サポートしておいてくれよと思ってしまった。sassscss、css共にコーディングする時に、ベンダープレフィックスをつけるのが正直めんどくさい。手軽に解決する方法はないのか探していたら、mixinで処理する方法を発見した。css-tricks.com上で紹介されているmixinでもいいのだが、もっとコンパクトに書けるかもしれないと思い、少し修正を加えた。$value;}上で紹介したコードの方が2つの点で利点があると思っている。prefixがmixinのローカル変数として定義されるのでグローバル環境を汚染しないということ。2個目は、呼び出す時に、変数を一つ減らすことによって、cssプロパティーとその値だけを引数に設定すればいいので運用しやすいということ。今後はこちらを使っていく。cssのベンダープレフィックスを追加するmixinTweet広告を非表示にするもっと読むコメントを書く2019-06-10今さら聞けないwebpackを使ってVue.jsを始めるVue今さらwebpackを使ってVue.jsを初めてみた。vueimportを使ってVueをインクルードさせた上で、JavaScriptの実装をする。}});webpack.config.jsの設定を行う。17:54今さら聞けないwebpackを使ってVue.jsを始めるTweet広告を非表示にするもっと読むコメントを書く2019-06-07React.Componentでclassを付与する時の注意点ReactReact.Componentのrenderメソッドを使ってDOMを表示する時がある。document.getElementById('test'));ここで、htmlタグにclass属性を追加したい場合、一つ注意点がある。それは、classとそのままではなく、classNameと書く必要があるということ。15:20React.Componentでclassを付与する時の注意点Tweet広告を非表示にするもっと読むコメントを書く2019-06-06Swiperをnpm経由で使い最後にwebpackJavaScriptSwiperというレスポンシブ対応をしたスライダー(カルーセル)プラグインがある。idangero.usjQueryプラグインとしても使えるし、jQueryに依存せず独立して使うことができるわけだが、今回、npm経由でインストールを行い、最後に、webpackする方法について調査したので、それをまとめる。ターミナルで、npmコマンドをうってインストールをする。swiper次に実行するjsでimportでswiperをインクルードさせる。{});最後に、webpackで一つにまとめる。Capitalizedreactjs.orgを読み返してびっくりしたことがあった。React.Componentを表示する時、頭文字を大文字にしないといけないということだ。document.getElementById('test'));例として簡単なソースコードを記載した。divタグにHelloMessageコンポーネントを表示させる処理なのだが、HelloMessageの頭文字がHと大文字になっているのでこの処理は正常終了する。ところがだ、Hを小文字にした場合は、エラーが発生する。document.getElementById('test'));これはどういうことかというと、React側の処理として、小文字の場合は、ブラウザがサポートしている標準のタグと認識するので、React.Componentが小文字だとそのままタグとして表示しようとしてエラーになってしまう。今まで当たり前のように、React.Component宣言時は、頭文字を大文字にしていたので気にならなかったので、これは盲点だった。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。