タグ

ブックマーク / qiita.com (159)

  • Angular + Storybook でコンポーネントガイドを作ろう - Qiita

    Storybook v3.3.0でAngular対応がリリースされたので、さっそく試してみました1。 Angular CLIプロジェクトへの導入方法 Angular CLIで作成したプロジェクトに導入するのであれば、コマンド一発です。 ng new my-ng-storybook-prj cd my-ng-storybook-prj yarn add @storybook/cli --dev yarn run getstorybook

    Angular + Storybook でコンポーネントガイドを作ろう - Qiita
  • 待望のNuxt v2.6リリース! 〜 nuxt-tsからの移行編〜 - Qiita

    日(2019年4月5日)ようやくv2.6がリリースされました Release v2.6.0 · nuxt/nuxt.js v2.5からnuxt-ts不要でTypeScriptサポートが不要になりましたが、その辺りを紹介します。 (2019/8/22追記) v2.9のリリースにより、TS周りに変更があったので移行手順を以下の記事に書きました。 Nuxt.js 2.9でのTypeScript対応 - Qiita tl;dr 以前書いたTypeScript版Nuxtであるnuxt-tsに移行してJSファイルを駆逐したからの差分 v2.5はGAE上で動作しなかったが、v2.6では動作するようになった nuxt-tsからの移行手順 冒頭に書いた通り、v2.5からnuxt-tsは不要になり、nuxtがあればよくなりました。 nuxt-tsを使っていた人用に移行手順を書いておきます。

    待望のNuxt v2.6リリース! 〜 nuxt-tsからの移行編〜 - Qiita
  • OAuth アクセストークンの実装に関する考察 - Qiita

    はじめに この記事では、OAuth 2.0 のアクセストークンの実装に関する考察を行います。記事の執筆者人による動画解説も『OAuth & OIDC 勉強会 【アクセストークン編】』で公開しておりますので、併せてご参照ください。 English version of this article is here → "OAuth Access Token Implementation". 1. アクセストークン実装方法の分類 OAuth のアクセストークン※1の実装方法は認可サーバーの実装依存です。 実装依存ではありますが、RFC 6749 の『1.4. Access Token』にある次の記述が示唆するように、 The token may denote an identifier used to retrieve the authorization information or may

    OAuth アクセストークンの実装に関する考察 - Qiita
  • GoでVueっぽくWebアプリが作れるVugu事始め - Qiita

    ツイートが100RT超えたので、Qiitaにも書いてみます。 Go 1.11がJavaScript APIをすべてサポートしたライブラリを開発し、WebAssemblyに新しい未来が見えました。それまでのWebAssemblyはDOMやネットワーク操作ができないとされてきたので、ループ処理の高速化や数値計算、またはCanvasをゴリゴリ使うゲームくらいしか使い道がないよね…といった評価でした。しかしJavaScript APIが実装されたことで、DOM操作やネットワーク処理が可能になり、WebアプリケーションをそのままGoに置き換えられるんじゃないかという可能性が出てきました。 GoではじめるWebAssebmly その1「Hello World」 | hifive開発者ブログ とは言え、直接書くとコードがなかなか複雑というか、残念な感じになっていました。例えばネットワークのオンライン、オ

    GoでVueっぽくWebアプリが作れるVugu事始め - Qiita
  • 【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita

    JavaScript の console がすごいことになっているらしい。 日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:

    【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
  • hubを2-factor authentication(2要素認証)有効でも使いたい - Qiita

    追記(2015/05/13) hubさんが2FAに標準対応したようです(たぶん1年以上前?). GitHubをコマンドラインから操作するための便利ツールhub. これをGitHubで2要素認証を有効化している状態でも使えるようにする. (hubの使い方についてはREADME.mdもしくは「GitHubユーザーのためのhubコマンド - Qiita [キータ]」がわかりやすいです) 手順 アクセストークン生成 「New Personal Access Token」にアクセスし,新しいアクセストークンを生成する. Token descriptionには自分がわかるような説明を書いておく. Create Tokenをクリックしたらアクセストークンが生成され,下画像のような感じで表示されるのでコピーしておく. hubの設定 ~/.config/にhubというファイルを作成し,以下のようにyaml

    hubを2-factor authentication(2要素認証)有効でも使いたい - Qiita
  • 開発が捗るかもしれない(面白い)ダミー画像,テキストまとめ - Qiita

    開発でいちいちダミーの画像とかテキストを作るのがめんどくさかったりしますよね。 VSCodeとかだとHTML入力時にloremと打つと自動でスニペットがlorem ipsumを挿入してくれたりします。 Lorem ipsum - Wikipedia だけどloremだけじゃつまらない! そんなあなたの為にダミー画像、テキストをまとめました。 他にもあったらぜひ教えてください!(随時追加します, 編集リクエストだと嬉しい) 代替のネタ元は→APIs you didn't know you needed ダミー画像関係 Placeholder.com 好きなサイズのダミー画像をかえしてくれる。(これは有名かも?) ちなみにテキストも入れられるらしい。便利! 以下サンプル https://via.placeholder.com/200x100 https://via.placeholder.co

    開発が捗るかもしれない(面白い)ダミー画像,テキストまとめ - Qiita
  • 今日から使えるライブラリ製作者のための Rollup 実践教室 - Qiita

    Rollup について Rollup は Webpack などと同じモジュールバンドラーと呼ばれるものの一種で、複数のファイルやモジュールからなる JavaScript ライブラリを1ファイルにまとめて特定のモジュール形式にあわせて出力するツールだ。 React の開発者が Webpack for apps, and Rollup for libraries と述べているように1、ライブラリ開発に格段に向いており、使用例が増えている。 エントリでは単なる入門ではなく、実際に使える設定を具体例とともに示していく。NPM でパッケージを公開している人はぜひ導入を検討してみてほしい。とくにビルドのためだけに gulp を使っている人はその簡潔さに驚くだろう。 インストール 例によって npm でインストールする。なお、下の "i" は "install"、"D" は "--save-dev"

    今日から使えるライブラリ製作者のための Rollup 実践教室 - Qiita
  • JavaScriptの‍ES2019で追加された新機能まとめ - Qiita

    (2021/06/24追記) ES2021の記事を公開しました。 正式仕様リリース! JavaScriptの最新仕様ES2021で追加された新機能まとめ - Zenn (2020/02/03追記) ES2020の記事を公開しました。 JavaScriptの次の仕様ES2020で追加されることが決定した新機能まとめ - ICS MEDIA 記事ではES2019の新機能を解説しています。記事末尾では、個人的に追加を期待していたけれどまだステージ3の機能についても紹介しています。 ES2019仕様書:「ECMAScript® 2019 Language Specification」

    JavaScriptの‍ES2019で追加された新機能まとめ - Qiita
    Carimatics
    Carimatics 2019/02/20
    はー、toString()すごい…。JavaScriptよくわからんけどコメントでコードの挙動が変わるのJavaScriptっぽいな、って思った(善悪はよくわからん)
  • Dockerfileを書くときに気をつけていること10選 - Qiita

    この文章では、私が個人開発で使用しているDockerサーバの管理や、業務でプロジェクトメンバーに開発環境を配布する際に、Dockerfileを書く上で気をつけていることを整理します。 1. Dockerファイルのフォルダには不要なファイルを置かない docker buildは開始時にコンテクスト(現在のフォルダの状態)をDockerデーモンに転送します。具体的には、Dockerfileのあるディレクトリの内容をtarで圧縮し送ります。そのため、Dockerfileのディレクトリに不要なファイルがあるとビルドに余計な時間がかかりよくありません。 とはいえ、プロジェクトフォルダでビルドした成果物をイメージ化するためにDockerfileを含める運用はよくあると思いますので、その場合は.dockerignoreファイルを記述して余計なファイルが転送対象にならないようにします。 .dockerig

    Dockerfileを書くときに気をつけていること10選 - Qiita
    Carimatics
    Carimatics 2018/12/04
    docker buildのsquashオプション知らなかった
  • オブジェクト指向が0.05%も理解できない記事

    尽く書を信ずれば即ち書無きに如かず 《孟子『尽心下』より》 イントロダクション 「最も理想的なオブジェクト指向を実現しているプログラミング言語は何か?」と問われたとき、君は何と答えるだろうか? C++Java、C#。君がそうだと思っているのは表面だけで、たぶん何もわかっていないのだろう。無知であることを知っているのであれば、無知のまま過ごした方が幸せなときもある。 Simula、Smalltalk、Ruby。君は質をいくらか知っているようだから、引き返すなら今のうちだろう。深淵を覗けば、君もまた怪物にならざるを得ない。 JavaScriptPythonGo。君が真剣にそう答えるなら、私とは異なる真理に辿り着けたのだろう。君と私のどちらかが正しいのではない、どちらも常に正しく、どちらも常に間違っている。 Erlang、Elixir。君は既に答えを知っているようだから、この記事は全く以

    オブジェクト指向が0.05%も理解できない記事
  • Goで直感的に簡単にdockerを操作できるCUIツールを作りました

    こんにちわ 最近dockerを使っていて、 ターミナル上で直感的にdockerを簡単に操作できるツールあったら便利だなと思い、 Goの勉強も兼ねてCUIツールを作りました。 ツール名はdocui(ドックユーアイ)で、docker cuiをの略です。 特に良い名前思いつかず、適当に決めましたが、今となっては気に入っています。 まだdockerコマンドほど機能は充実していないのですが、よく使うコマンドは実装したので公開しました。 興味ある方は使って見て頂ければと思います。 今後は少しずつ改善・機能を増やしていくので、 使ってみた感想などを頂けると助かります。 2018/09/26 追記 docuiの実装について記事を書きました。 アジェンダ コンセプト 導入方法 各パネルの概要 各パネルの操作 image list container list volume list detail docui

    Goで直感的に簡単にdockerを操作できるCUIツールを作りました
    Carimatics
    Carimatics 2018/10/02
    へー、良さそう
  • オブジェクト指向が5000%理解できる記事

    前書き 結論から。 オブジェクト指向とは、現実世界を正しく捉えることです。 オブジェクト指向、全然むずかしくないんですけど、悩んでる人多いですね。この記事を読めば絶対に分かるようになるので、ゆっくり読んでみてください。 想定読者は今まさにオブジェクト指向に苦戦している人たちです。 オブジェクト指向ができた背景とかオブジェクト指向のメリットとかそういうのはググればいくらでも出てくるので、この記事ではオブジェクト指向の質的なコンセプトにのみ焦点を当てています。 あたまでっかちな説明ばかりで分かりにくかったオブジェクト指向が、5分でサクッと理解できる内容になっています。お楽しみに! 目次 理論編 オブジェクト クラス プロパティ メソッド メッセージング 実践編 まとめ おまけ 継承 ポリモフィズム コンストラクタ カプセル化 理論編 むずかしく考えないでくださいね。オブジェクトとは、物です。

    オブジェクト指向が5000%理解できる記事
    Carimatics
    Carimatics 2018/09/26
    最近メイヤーのオブジェクト指向入門を読んでるので参考になるかと思って開いてみたら内容がアレだったしコメントが盛り上がってた
  • ちょっと良さげな負荷ツール vegeta をつかって分散負荷試験を実現してみる - Qiita

    motivation Scalaのgatlingを使っていたけど、test_caseとして実装する必要があり、ローカル以外から仕組み的に実行するのがちょっと手間だった。(testをjarにするというのが難しい) シンプルにインストールせずに実行できる負荷ツールはないものか 負荷をかける側の限界でパフォーマンスを正しく測定できないこともあるので、クラスタ的に投げれたらなお良い そんなフワーッとした雰囲気で調べてみたら面白そうなものがあった。 その名も Vegeta 。 名前がやばい。そう、みんな知ってるアレ。 github にもこんな画像がデカデカと というわけで早速試してみましょう。 最初に結果を書くと、結構いい感触。おすすめしたい。 インストール方法 インストール方法は複数あります。 公式のドキュメントにあるのは2種類で、 Homebrewでインストールする(mac

    ちょっと良さげな負荷ツール vegeta をつかって分散負荷試験を実現してみる - Qiita
  • ソフトウェア開発に役立つ 心理学的現象、行動経済学の概念など 15題 - Qiita

    ソフトウェア開発の様々な局面で役に立つ、心理学的現象や行動経済学についての知識です。 経験則で把握済の事柄もあるかもしれませんが、 言語化して名前を与えることで何かのときにスッと出せたり、周囲の方々と議論しやすくなったりすると思います。 以下の3つの分類で記載いたします。 打ち合わせやチームワークに役立つ知識 設計やプログラミングに役立つ知識 メンタルヘルスケアに役立つ知識 打ち合わせやチームワークに役立つ知識 自己効力感 自己効力感とは、自分には何かを達成する能力がある、と信じる感覚です。 自己効力感が形成されていると、仕事の意欲が増したり、効率が上がったりします。 「この仕事は絶対ムリ~(>_<)!」と感じている仕事についてやる気がわかなかったり進捗が出なかったりするのは、自己効力感の欠如が原因であることがあります。一旦やる気を出すと案外簡単に進められたとか、真剣に取り組むと思ったより

    ソフトウェア開発に役立つ 心理学的現象、行動経済学の概念など 15題 - Qiita
  • TypeScriptを使う理由

    この記事はすでに古い情報ですのでご注意ください。 2018年02月01日 に誤字を修正したリクエストを受け入れてから閲覧する方が多くなっていますが この記事の投稿日は 2014年05月06日 です。 随時更新します。 CoffeeScriptを使う理由 TypeScriptを使う理由 AltJSを使わない理由 Dartを使う理由 仕事TypeScriptを使う場合の説得材料まとめです。 なぜJavaScriptではいけないのか クラス定義がないからです みんな大好きオブジェクト指向をするために必須なのにJavaScriptではクラスは書けません。 いや、正確には書けます。

    TypeScriptを使う理由
  • お疲れさまXMLHttpRequest、こんにちはfetch - Qiita

    Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し

    お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
    Carimatics
    Carimatics 2018/07/01
    XHRが死んだらしい
  • 2018 年 6 月の React Native 事情とポエム - Qiita

    事実と思われる情報を時系列で並べる。足りないものがあるかもしれない。 6/2 に噂を Ben Sandofsky が tweet 。 There’s a rumor React Native was abandoned in the main Facebook app. Anyone heard similar/different? — Ben Sandofsky (@sandofsky) 2018年6月1日 このひとは Halide という iOS で提供されているカメラアプリの開発者。これは純粋に噂が真実かどうか確かめたいという発言のように見える。 https://itunes.apple.com/jp/app/halide-raw%E6%92%AE%E5%BD%B1%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E6%89%8B%E5%8B%95%E3%82

    2018 年 6 月の React Native 事情とポエム - Qiita
  • ReactとVueのどちらを選ぶか - Qiita

    主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu

    ReactとVueのどちらを選ぶか - Qiita
    Carimatics
    Carimatics 2018/06/17
    Vueを少し書けるくらいなので記事とコメントとブコメみても「へぇーそうなんだ」くらいの感想しか持てなかった(雑魚並感)
  • 弱LisperがMITでSICP(シクピー)を受講した結果 - Qiita

    SICPとは何か Structure and Interpretation of Computer Programsという古めかしい表紙のをご存知でしょうか? これはもともと、マサチューセッツ工科大学(Massachusetts Institute of Technologies; MIT)の電気工学および計算機科学(Electrical Engineering & Computer Science; EECS)系の学部の授業の一目として提供されていた同名の授業から発生した教科書です。教科書は無料公開されています。 HTML版 http://mitpress.mit.edu/sicp/full-text/book/book.html Kindle版 https://github.com/jonathanpatt/sicp-kindle PDF版 https://github.com/s

    弱LisperがMITでSICP(シクピー)を受講した結果 - Qiita
    Carimatics
    Carimatics 2018/05/06
    SICPってシクピーって読むのか