背景 material-uiを使おうと思ったら、 ジェネレータで作ったベースが古すぎて使えなかった際に、 一気にnpmをアップデートする方法があったのでメモします。 結構人気なnpmのようなので、今更感があるかもしれませんが! 環境 node.js v8.12 npm v6.3.0 準備する 古いバージョンのnpmを入れておく とりあえず何でもいいのでいれます。
![Node.jsで古いパッケージを一気に更新する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d4a2f232c3196465fa664bbc42e55726c87e95d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Tm9kZS5qcyVFMyU4MSVBNyVFNSU4RiVBNCVFMyU4MSU4NCVFMyU4MyU5MSVFMyU4MyU4MyVFMyU4MiVCMSVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MiU5MiVFNCVCOCU4MCVFNiVCMCU5NyVFMyU4MSVBQiVFNiU5QiVCNCVFNiU5NiVCMCVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZWMxMWUyNTcyYzAyZTkzNDBhMGQ5MTE0ZDE1ZDRhYzY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0LW1vdG9raSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWQ0NGY2Y2E2OTc1MTBhMWI0MTg4YjQ3MThmYmMyZjg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De39b7aa64775a7447a58c9f7cf8ece06)
個人的に今まで JavaScript を書いてて陥った失敗例などを振り返ってみました。 この記事にあるいくつかの失敗例については恐らく殆どの方が経験してるのではないかなと思います。 これから JavaScript 勉強するぞ!!という方や、現在進行形でこのような失敗に陥っている方の助けになれば幸いです。 コードの解説に関しては簡潔に行なっているので、気になった方はググってください。 DOM の取得及び操作 要素を取得して is-close なスタイルを付与したい。 しかし、エラーになってスタイルを付与できない // 失敗例 const hoge = document.getElementsByClassName('hoge'); hoge.classList.add('is-close'); // 正しい例 const hoge = document.getElementsByClassN
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん!』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ(S○f○ri、E○ge)でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。(最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。) その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
キーチェンの仕組み ここでは一生懸命作成した図と一緒に説明します。 ・キーチェーンの保存のされ方 アプリで保存されたキーチェンの値はアプリのプロビジョニングファイルとひも付き、さらに保存した時のキーと一緒に暗号化されて保存されます。暗号化は秘密鍵、公開鍵方式(違う鍵使用)と共通鍵方式(同じ鍵使用)を合わせて(ハイブリッド暗号)行っているみたいです(データ全体的には共通鍵をかけてその鍵を受信者側の鍵で暗号化的なものらしい感じかと。 参考:本(出るとこだけ! 基本情報技術者)) <= 以前見た箇所を探せなかったのですが他のappleのサイトでは公開鍵とかいう言葉は使っていませんが、速度的に同じような感じかと思っています! ・キーチェーンの値を共有するには 参考→How to share Keychain between iOS apps 参考→[iOS] 複数のキーチェーンアクセスグループを持
はじめに 聖地の写真を共有するサービス「Holy Place Photo」にService Workerによるキャッシュを実装しました。 そのためネットワークがオフラインでも下記のようにサクサク動きます!!!! Service Worker Demo pic.twitter.com/t04xSRl7B2 — tiwu (@tiwu_official) 2019年2月25日 また、LighthouseのPWAのスコアは100を取れました。 この記事ではService Workerを利用したキャッシュの設計、Laravel + Vue.jsのWebアプリケーションでの実装を解説していきたいと思います。 注意書き 僕の考えた最強のService Workerのキャッシュの設計のため唯一の正解ではありません キャッシュの設計はサービスによって違うと思うのでこの記事は一つの参考にしてください まずS
JavaScriptに限った話ではありませんが、関数というのは名前を持っていたり持っていなかったりします。関数名は普通はプログラムの読みやすさくらいにしか影響しませんが、JavaScriptでは必ずしもそうではありません。 例えばReactで関数コンポーネントを使う場合は関数名がコンポーネント名となり、React用開発者ツールなどで見ることができデバッグに役立ちます。また、Gulp v4もエクスポートした関数名がタスク名となります。 関数名は、関数オブジェクトのnameプロパティで取得できます。 function foo() { console.log('foo!'); } console.log(foo.name); // "foo"
参照元ページ: https://developers.google.com/web/tools/workbox/modules/workbox-routing Workboxルーティングとは? サービスワーカーはページに対するネットワークリクエストをインターセプト、つまり横取りできます。それによってブラウザへ返されるコンテンツは、キャッシュ経由、ネットワーク経由もしくはサービスワーカーが生成したものなど多岐に渡ります。 workbox-routingを使うことで、リクエストに対する様々なレスポンスを返すためのルーティングの設定を簡単に行うことができます。 ルーティングがどのように行われるか ネットワークへのリクエストがサービスワーカーのfetchイベントを発火させる時、workbox-routingは与えらたルートとハンドラーを使ってリクエストに対するレスポンスを返します。 上記の図で大切
公式サイト A Tour of Go Web上で実行しながら学ぶことができる公式のチュートリアルです。 チュートリアル 公式のチュートリアルです。初学者向けからジェネリクスのチュートリアルなども用意されています。 A Tour of Goが終わった後に取り組むと良いでしょう。 Go Wiki Go Code Review Commentsなどが掲載されているGitHub上のWikiです。 パッケージドキュメント 標準パッケージやサードパーティ製のパッケージのドキュメントが見れるサイトです。検索もできます。 入門 プログラミング言語Go完全入門 筆者が作っている巨大なGoの入門資料です。なぜGoが作られたのか、から最新のジェネリクスの情報、静的解析まで扱っています。 Gopher道場 Goを体系的に学べる場です。10時間くらいある動画教材(自習室から入手可)もあります。 Go の最初の手順
※この記事はKeval Patel氏の「Why should you learn Go?」を翻訳したものです。Twitterより翻訳の許可を頂きました。ありがとうございます。(Thank you!) “Goは将来的にサーバーの言語になる” — Tobias Lütke, Shopify ここ数年間で、新しいプログラミング言語であるGo(GoLang)が知られるようになりました。新しい言語ほど開発者を夢中にさせるものはないですよね?。そこで私は4,5ヶ月前からGoを学び始めました。今回はなぜこの新しい言語を学ぶべきかをお伝えしようと思います。 この記事は「Hello World !!」の書き方を教えるものではありません。そのための記事は他にたくさんあります。私は現在のコンピュータハードウェアとソフトウェアについて説明しようとしているのですが、なぜGoのような新しい言語が必要なのでしょうか?。
結論 「Android Singleton」で検索すると、Singletonを使うなという記事がたくさん出てきます。 しかし、公式のAndroid Developersには以下の通り「ほとんどのケースでは、Applicationのサブクラスを作るよりも、static Singletonの方がいい」と書いてあるので、使って大丈夫です。 Android Developers: Application Note: There is normally no need to subclass Application. In most situations, static singletons can provide the same functionality in a more modular way. If your singleton needs a global context (for e
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsアーキテクチャVue.jsElmReactAngular2 はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有
差分 起動時のスプラッシュページがない 起動時の画面でActionBarが表示されている(QRとだけ表示されているヘッダー) Webページがフェードインじゃなくスライドインで表示される Webページ表示中のステータスバーが白くて浮いている GitHubのcommitログと共に変更箇所を説明します。 ActionBarを消す アプリのテーマをDarkActionBarからNoActionBarに変更することで、ActivityのActionBarを消しています。 TWAのステータスバーにテーマカラーを反映 元はTWAサポートライブラリで提供されているLauncherActivityをそのまま使用していましたが、LauncherActivityを継承した自前のActivityを使用するよう変更し、ChromeCustomTabのIntentを生成しているメソッドをオーバーライドします。 htt
この記事は WebAudio Web MIDI API Advent Calendar 2016 の9日目です。 目的はズバリこれです。 「ノブとかスライダをチャチャっと実装しちゃう」 操作子であるノブ、スライダ、スイッチ、鍵盤は特にWeb Audio/MIDIを使ったアプリの視覚的出来を左右します。でも1から実装するのはけっこう大変なんです。画像を用意して、ロジックを作ってみたいなところ。画像なんかは回転を表現するのに「影」が重要なんですけど、これも結構骨が折れるんです。 そこで、チャチャッと実装ができるWebAudio-Controlsをご紹介します。 Web的に使う技術やライブラリ Polymer(Web Components) デモアプリ WebAudio-Controls Live Demo ノブ、スライダ、スイッチが可動になっています。試してみてください🙂 実装してみよう 「
はじめに 2, 3ヶ月ほど前、勧告候補である「CSS Scroll Snap Module Level 1」のプロパティ群が、Google Chromeで使用できるようになりました いったいどんなことが出来るのか、気になります。そこで、さっそく使ってみました。この記事は、その際のメモです。 用意したものは、最新版のGoogle Chrome(バージョン: 70.0.3538.77)です。 CSS Scroll Snap とは CSS Scroll Snap は、スクロール可能な領域内のスクロール位置を調整できる機能を提供してくれるようです。 私たちは、Webページから目的の内容を探し出すとき、スクロールをしながら、セクション内の文章を読みます。 そして、目的の内容が見つかると、スクロールを止めます。 その時に「あっ、スクロールしすぎちゃった。最初から読むためにスクロール位置を調整しなきゃ.
普段はIoTな製品開発をメインにしているため、JSも王道の斜め横くらいの使い方で楽しんでいる今日このごろ。そんななかで、なかなか触る機会がないであろうWeb Bluetoothをゴリゴリいじくり倒して実戦投入すると意外と使えたので、そのときにわかったことのメモをまとめておきます。Android Chromeがサポート環境だったため、そっち寄りのまとめになります。 なかなかチュートリアル以上のネタがネット上になかったので、他に同じ心境の方が出てきたときの助けになれば... Web Bluetoothの仕様とか参考にしたところ W3C Document GitHub: WebBluetoothCG / web-bluetooth GitHub: WebBluetoothCG / Demos ドキュメントは意外と更新頻度高いので、実装時期によっては意外とできなかったことができてたりします。 対応
2019年2月版 JavaScript/Node.jsでBluetoothを触れるライブラリやAPIをまとめてみた #html5j #iotlt #linethingsJavaScriptNode.jsnobleWebBluetoothLINEThings この資料について 2019/2/19: 増席】JSで制御するBluetoothと基板の勉強会(html5jロボット部 第11回 勉強会)でのLT内容です。 発表後にタイトルをそれっぽいのに変更しました。 2019/2/22: 大阪版IoT縛りの勉強会 IoTLT Osaka Vol.10でもアップデートして話しようかと思っています。 書いてたら量が膨らんできてて5分では厳しい気がするので色々端折って発表します。 自己紹介 名前: n0bisuke 所属: dotstudio コミュニティなど: IoTLT / Microsoft MVP
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか? 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。(絶対に違う) 仮想スクロールの仕組み イカれたメンバーを紹介するぜ! 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ! ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数(あるいは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く