webpack 4 入門 - Qiita
お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか
お役立ちブックマークレット集 - Qiita
javascript:(function(){open('http://translate.google.com/translate?hl=ja&u='+escape(document.location.href),'_blank')})(); javascript:(function(){var%20t=''+(window.getSelection%20?%20window.getSelection():%20document.getSelection%20?%20document.getSelection():%20document.selection.createRange().text);if(!t){L=document.location.href;if(L.match(/(yahoo%5C.).+?.*p=([^&]+)/)||L.match(/(amazon%5C.).+?
テスト管理ツール「Qase」でスプレッドシートによるテスト管理を脱却した件 - Qiita
概要 試験工程をスプレッドシートで管理していたがそろそろ脱却したいと思ったので色々探してみました。 すると、同じことを考えている先駆者さんがいらっしゃったので参考にさせていただきました！ 導入に至った経緯 QA体制が未成熟 3名までなら無料で利用できる テスト計画・テスト結果をエクスポートできる 入力項目が整理されているので試験表の質を一定にできる 自動化したテストケースを管理できる 手動テストと自動テストの結果を併せて一覧できる APIにより自動テストの実行結果を自動的に反映することができる etc これは、中々良いツールなんじゃないか！？ ということで導入してみました 実際の導入方法を説明していきます 事前準備 以下からサインアップしてください サインアップ完了後、ダッシュボードに遷移した状態からスタートとします それぞれの設定方法は以下を参照してください 新しいプロジェクトを作成 プ
パスワードの1文字目に「~(チルダ)」を使って痛い目にあった - Qiita
何を言っているんだと思われるかもしれないですが、気軽にパスワードの1文字目に「~」を使わないほうがいいというお話です。 起こった問題 踏み台サーバー経由でサーバーAに接続して作業をしていた時の話です。 いわゆる多段 ssh 接続というもので、リモートワークになってからは結構使われる方も多いかと思います。 サーバーA上で root 権限になろうと sudo su - してパスワードを入力したら Connection to xxx.xxx.yyy.zzz closed. の文字とともにサーバーAから追い出されてしまいました。 なにかの間違いだろうと何度か挑戦していたのですが、結果はサーバーAから切断され踏み台サーバーに戻る羽目に。。。 そのときに入力していたパスワードが ~.xxxxxxxxxx のような ~ から始まるものでした。 調査 ~ って何か意味があったよなーと思ってどう調べようかと
【TypeScript】Utility Typesをまとめて理解する - Qiita
Utility Typesとは Utility Typesとはコード内で型変換を容易にする為にTypeScriptが提供する(便利な関数のような)型達です。 Partial<T> Partial<T>はTの全てのプロパティをOptional(任意)のプロパティにしてくれます。 下記のコードPersonでは１つも任意のプロパティが設定されていませんが、Partial<T>を使用する事で、変数taroではfirstNameのみを持つ事ができています。 interface Person { firstName: string lastName: string age: number } const taro: Partial<Person> = { firstName: 'Taro', } console.log(taro); //=> { firstName: 'Taro' } Require
エンジニアのための十徳ナイフ「DevToys」が便利すぎる - Qiita
DevToysとは デベロッパーのためのスイスアーミーナイフの紹介文の通り。 開発時によく使うツールを十徳ナイフのようにまとめたアプリになっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機能のショートカットを探したりせずとも、これ一つですぐにできます！ インストール Microsoft Storeからインストールできます。 公式サイトからストアへのリンクを踏むか、ストア検索して見つけてください。 WinGetやChocolateyでもインストール可能です。 Microsoft StoreアプリなのでWindowsでしか使えませんが、Macユーザーの方は気を落とさずにこちらの記事をどうぞ！ また、作者曰くMacにはDevBoxやDevUtilsなどの類似ツールが既にあるため非対応だそう
Node.jsでのCLIの作り方と便利なライブラリまとめ - Qiita
はじめに Node.jsでCLI(Command Line Interface)を作りたくなることがあると思います。 そして、GitHubに公開されているCLIを見ると、色々なライブラリを組み組み合わせて便利なCLIを作っているようです。 この記事では、Node.jsでCLIをどう作るのか？そして、CLI開発を支える便利なライブラリを紹介します。 身の回りのCLI CLIの作り方を見る前に、普段の開発で触れているCLIを見てみましょう。 ESLint CLIには基本的に--helpオプションが用意されていますね。 npm ユーザーの入力を受け取る対話的なCLIも多いですね。 expo プレースホルダーがあることで入力する内容のイメージを伝えることができます。 stencil 様々な選択方法をユーザーに提供したり、分かりやすく色付けすることも可能です。 それでは、Node.jsでCLIを作っ
【TypeScript】as const（const アサーション） を理解する - Qiita
as const（const アサーション） とは 全ての値をreadonly（読み取り専用、変更不可）にするアサーション。 ネストしたオブジェクトに対してもreadonly（読み取り専用、変更不可）にしてくれる widening も抑止してくれる ● アサーションの参考資料 https://e-words.jp/w/%E3%82%A2%E3%82%B5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.html https://typescript-jp.gitbook.io/deep-dive/type-system/type-assertion as const を使ってみる オブジェクトで 値を変更しようとすると、 Cannot assign to 'first' because it is a read-only property. 「firstは読み取り専
less にパイプしても色が消えないようにする方法 - Qiita
はじめに Linux のコンソールで動くいまどきのユーティリティは、出力に色が付いていて見やすくなっているものが多いです。例えば ls コマンドや git diff など、色があるだけで視認性が大幅に向上するツールは色付きで使いたいですよね。ところが、こういった色付きの出力を行うツールはたいてい less と相性が悪い。 のように出力をパイプに流した途端に色が付かなくなってしまいます。建前としては、出力がコンソールのときには最終的に出力を人間が見るので色を付けても構わないが、出力がパイプの時には下流のツールが正しくエスケープシーケンスを処理できるとは限らないので、色付けを無くしてエスケープシーケンスを出力することに起因する問題を未然に防ごう、ということです。 でも、less の場合には -R オプション付ければ色付けのエスケープシーケンスは正しく扱えるんですよね。だから、パイプの向こう側が
不安が多いエンジニアに聞いてほしい成果と成長の話 - Qiita
Ateam Brides Inc. Advent Calendar 2021の15日目は 株式会社エイチーム エンジニアのみやたけが担当します！ はじめに タイトルの通りですが、今回はエンジニア経験の浅い人や、若手のエンジニア等で、不安が多い人に聞いてほしい成果と成長の話です。 くれぐれも、不安無くバリバリやってる人は対象外になりますのでお気をつけ下さい。共感得られない事請け合いです（笑） いきなりですが、不安ありません？ エンジニアで入ってきた時に、僕みたいな凡人だと不安って結構あったりするんですがみなさんは如何でしょうか。 中途の場合 僕は今の会社に中途入社ですが、入った時はとっても不安でした。 今までWindows系でしか開発したことなかったので（jscript＋ASP6）あまりCUIに慣れてませんでした。（エディタも今はなきPeggyを使ってました） ところが入社してみると、OSは
「1枚のシート」でエンジニアとデザイナーのストレスが激減した話 - Qiita
「考慮もれ」「手戻り」をなくしたい モチベーションクラウドシリーズのデザイナーです。 フロントエンドエンジニアのみなさんは、画面デザインを見て「どう実装するんだ？」とストレスを感じたことはないですか？ 例えば... 👨💻 フロントエンド「Emptyのときはどうするんだろう？最初から考慮してほしいな...（ストレス）」 👩🎨 デザイナー「この状態も考えないといけないのか。確認するだけで1日終わるな...（ストレス）」 →お互いにとって、よくない！！！！！ こうした状態を受けて、お互いにとってストレスなく開発するために、デザイナーとフロントエンドで制作プロセスを改善しました。 今回は、プロセス改善のステップや導入してみて効果的だったツール（シート）についてお伝えします。 【まず初めに】 「UI Stack（状態デザイン）」の必要性の周知 UI Stackとは、UIの考慮すべき5つの
「もったいない」マインドが逆に効率を悪くする。フロー効率とリソース効率から考えるチームで仕事をする理由 - Qiita
「もったいない」マインドが逆に効率を悪くする。フロー効率とリソース効率から考えるチームで仕事をする理由チーム開発プロジェクト管理マネジメント はじめに 前回、なぜ、ソフトウェアプロジェクトは人数を増やしても上手くいかないのかの記事において、プロジェクト型の人員規模を柔軟に変化させる開発スタイルに関して、理論的なスケジュール削減の限界について考察しました。その際に、チーム型開発や組織とソフトウェアの紐付けについても示唆しました。 今回は、チームでソフトウェアを開発することに関して、「フロー効率」と「リソース効率」という観点から考察し、なぜ私たちはチームで開発するのか、あるいはなぜプロジェクト型を採用するのかについての考え方を深めていきたいと思います。 そして、組織における効率性の価値観が異なると、新しい効率性に関して理解をする前に「もったいない」と感じてしまい、新しい文化を取り入れづらくして
単一責任原則で無責任な多目的クラスを爆殺する - Qiita
この記事は クラウドワークスアドベントカレンダー2020 8日目の記事です。 概要 こんにちは、クソコードを爆殺リファクタリングするのが大好きなミノ駆動です。 今回は単一責任原則の話です。 単一責任原則はSOLID原則のひとつとして有名で、2020年のオブジェクト指向カンファレンスのアンケートでも、SOLID原則の中で最も人気がありました。 皆さんは単一責任原則を遵守した設計をしていますか。 どんな構造が単一責任設計で、一方どんな構造が単一責任でない設計か、明確に意識していますか。説明できますでしょうか。 ところで「単一責任原則とはなんぞや」について、少なくとも私の観測範囲では、概念的な話にとどまっているものが多く、コードレベルで具体的に説明しているものは少ないように感じます。 そうした状況からか、単一責任原則の解釈が人によって違っていたりしているように感じます。 本記事は、今一度単一責任
リファクタリング自爆奥義集 - Qiita
こんにちは、リファクタリングが大好きなミノ駆動です。 この記事は READYFORアドベントカレンダー2021 、13日目の記事です。 これはなに？ コードが複雑化し、技術的負債が蓄積していくと、コードの変更が難しくなり、開発生産性が低下していきます。技術的負債の解消にはリファクタリングが必要です。 しかし、リファクタリングの実施には数々の罠やハードルがあります。 下手すると逆に負債を作り込んでしまうといった、自爆技をやりかねません。 この記事は、リファクタリングのアンチパターンと、その対策をまとめたものです。 この記事のゴール リファクタリングには様々なアンチパターンがあることを知る。 アンチパターンにハマらないためのアプローチを知る。 リファクタリングの効果を高めるにあたり、何のために実施するのか意義を理解する。 前提知識 なぜ自爆技となるのか、自爆だと理解するのに必要な前提知識を挙げ
LaTeX で物理学徒が最低限知っておくべきこと・私が気を付けていること - Qiita
はじめに ごきげんよう．いぇとです． この記事は東京大学理学部物理学科 B3 有志による Physics Lab. 2022 Advent Calendar 2021 19日目の記事です． Physics Lab. とは物理学科有志による五月祭企画です．私は生物物理班に所属しています．生物物理班については，たがやし班長が書いてくれた記事『生物物理班だよ』を見てください．絶対． 当初の予定では，19日目は統計力学のくりこみ群の話を書こうと思っていたのですが，多忙につき色々と試行錯誤をする暇がなく辞めることにしました．書いてもいいんですけどね． 代わりに LaTeX のお役立ち（？）情報を書こうと思います．この記事では LaTeX の基本事項を前提とします．今回は私が普段使っているパッケージの紹介や気をつけていることなどについてまとめます．（「普段気を付けていること」とかいうの，普段気を付けて
iOSのPWA対応時に気をつけるべきこと - Qiita
iOS（Safari）は、Androidに比べるとHTML標準仕様への対応が遅れがちです。 PWA仕様への対応も例に漏れず、最新のiOS15.2においても不完全な状態です。 それでもiOS13辺りからはそれなりに使える状態になってきたので、個人的に開発しているWebアプリではiOS13.4以降をPWAに対応させました。 今回はその経験から、iOSのPWA対応時に気をつけるべき事やちょっとしたテクニックを紹介します。 PWA対応の目的 なぜWebアプリをPWA対応させるのか？ 自分としては以下2点がPWA対応の主なモチベーションだと考えています。 ネイティブアプリのようにスマートフォンのホーム画面に導線を置ける アドレスバーなど不要なUI無しのフルスクリーンでWebアプリを起動できる 実はこの2点に関しては、Webアプリモードという機能を使うことでiOS4の頃には既に実現可能でした。 ただW
全部言えたらDOMマスター！ HTML+DOMでノードを挿入する方法大全 - Qiita
DOMはHTMLの木構造(あとXMLも）やイベント等をプログラムから操作するためのAPIです。DOMの実装者として有力なのがウェブブラウザであり、ブラウザが提供するDOMのAPIを用いてJavaScriptプログラムからウェブページを制御するというのがDOMの極めてメジャーな使い道です。 近年知名度を増してきたReactやVueなどのライブラリも、もちろんこのDOMを用いて実装されています（Reactだとreact-domというあからさまな名前のパッケージがDOMを扱う部分を担当しています）。 この記事では、DOMで提供されるAPIを用いて木構造にノードを挿入する方法全38種類を列挙します。 ノードの挿入とは DOMにおいて基本的な操作のひとつがノードの挿入です。ノードというのは木構造の最小構成単位であり、要素ノードやテキストノードなどの種類があります。例えば<u>は</u>というのはu要
エンジニアも見ておきたいGoogle Search Consoleの機能 5選 - Qiita
はじめに 「株式会社じげん Advent Calendar 2021」17日目を担当します、きあ（Chia）です。 エンジニアとしてプロダクトの開発・運用保守をしつつ、SEO・CROといったマーケティング施策の立案・分析も担当しております。 今回は、エンジニアとマーケティングの両方を担当している私から、「Google Search Console」（以下サーチコンソール）で、エンジニアが見ておくとサイトの改善効率が上がる機能を5つご紹介します。 このような方に向けた記事です 自社でWebサービスを開発・運用しているエンジニアの方 サーチコンソールにどのような機能があるか知らない方 基本的な機能の紹介、見ていく上での簡単なポイントの紹介となります。 普段からサーチコンソールを見る習慣がある方、またWebサービスの運用に関わっていない方にはあまり役立てないかもしれません。 用語について 記事中
TypeScriptでpower-assertを使う時の注意点 - Qiita
TypeScriptでpower-assertを使ってテスト時に詳細情報を出そうとしたら, テスト実行そのものは問題ないのだが詳細情報が出なくて解決するまで小一時間かかってしまいました. せっかくなので注意点として共有しておきます. 2016/02/17 追記 DefinitelyTypedのpower-assert.d.ts側で対応されたため、本記事で書いていた注意点について気にする必要がなくなりました！ 最新のDefinitelyTypedのpower-assert.d.tsを使って、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript3.4 の const assertion - Qiita
