VS Code ネタ詰め合わせ - Qiita
👻 ぷぇ 🍾🍾🍾 メリークリスマス！！！ 🎉🎉🎉 今年も残り僅かですが、皆様の今年の進捗はどうだったでしょうか？ 進捗ダメでしたか？ 私はと言うと今年も幸い GitHub で evergreen を達成できそうです。( 業務でこの GitHub アカウントは使用していないので、個人での Contributions のみです。 ) Visual Studio Code Advent Calendar 2019 の最後の記事ともなりますし、普段、特に Qiita ではあんまり記事を書かないのもあるので、 VS Code に関するいろいろなネタの詰め合わせをお送りします。 自分的に VS Code の二大拡張 ※ステマ注意 VS Code Tips 来年(2020年)の VS Code 余談: アイコン騒動、再び！！ 自分的に VS Code の二大拡張 ※ステマ注意 「もしも V
Excelファイルを比較するツールを作ってみた - Qiita
はじめに Excelファイルの比較にはWinMergeにxdocdiffのプラグインを入れて使っていたのですが、 列が揃ってなかったり、ヘッダを固定できなかったりと少し不便に感じていました。 そんなわけでExcelファイルを比較するツールを自作してみたので、紹介と使い方を書いていこうと思います。 注意 このツールは筆者の仕事環境において必要最低限の要件で作成しています インストール ここ から最新の.msiをダウンロードする ダウンロードしてインストーラーを実行する ※電子署名をしていないので、以下のウィンドウが表示されると思います。「詳細」→「実行」で実行できます。 Nextを選択 インストールするディレクトリと、ユーザーを選択 (特に指定がなければそのままNext) Nextを選択 起動方法 ショートカットアイコン インストールが完了すると、デスクトップにショートカットアイコンが作成さ
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
Reactアプリを作り始める前にやるべきこと4つ - Qiita
公式Docsを一読しておく 早い段階で一通り読んでおいたおかげで、「こういうことがやりたいんだけど、どうすれば良いんだろう」となるたびに「そういえばあそこに何か書いてあったな」と読み返すことが出来ました。いずれにしても開発中に何度も読み直すことになると思うので、一度読んでおけば脳内indexが貼られるので効率的ですし、当然ですがReact全体への理解を深めた上でシステム設計を行うのが理想です。全体のボリュームはありますが、エッセンスが簡潔にまとまっているので、読みやすいです。 Create React Appを下敷きにする Reactでアプリを開発するのが初めてであれば、まずはこのプロジェクトをbootstrapにして作り始めることを強くおすすめします。webpackやbabelのconfigに最初からエネルギーを注ぐのは得策ではないです。 また、user-guideはノウハウの宝庫なので
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
【企業サイト構築用】WordPress設計ガイドライン - Qiita
備忘録を兼ねて、企業サイト構築時に決めている設計方針・インストールしているプラグイン・セキュリティ対策をそれぞれまとめました。セキュリティ対策の項目を除き、構築時の細かい設定やプログラム実装についての説明は省略しています。 （※）2018.01.13: セキュリティ対策について加筆・修正を行いました 概要 実装する際の方針として、WordPressと紐付ける必要のないファイルは、できるだけWordPressのファイル・フォルダと分けて構築する手法を採択しています。これはサイト全体をWordPress依存にさせたくない、ということが大きな理由です。 また、関係ないファイルをWordPress内で管理させることによって、お客様やHTMLに詳しくない編集者が不用意にファイルを更新してしまうことを防ぐ意味もあります。8年以上WordPressと付き合ってきましたが、以下の設計方針が最も最適だと考え
jQueryでスマホのスクロールイベントを無効化する - Qiita
// スクロール禁止 $(window).on('touchmove.noScroll', e => { e.preventDefault(); }); // スクロール禁止 解除 $(window).off('.noScroll'); const $window = $(window); const $menu = $('.menu'); const $menuBtn = $('.menu-btn'); let openFlag = false; $menuBtn.on('click', () => { if (!openFlag) { // スクロール禁止 $window.on('touchmove.noScroll', e => { e.preventDefault(); }); // メニューを表示 $menu.fadeIn(() => { openFlag = true; });
CSS3を使ったちょっと便利なテクニックシリーズ - Qiita
CSS3プロパティを使った、便利な実装テクニックを随時追加していきます。 1. 並んでいる要素の最後だけスタイルを適用しない ★対応ブラウザ → 確認 リストなどでマージンを調整する際、通常は:last-childで最後の要素のスタイルを上書きすると思いますが、:not()を使うことでもっとスマートに記述できます。
$(function(){}) と $(window).on('load',function(){}) の違い - Qiita
ページ読み込み時に処理を実行したい場合、いろいろな書き方があると思います。 このあたりの違いをまとめました。 種類 jQueryのready と jsで昔から愛用されているonload がある。 ready $(function(){ alert('Hello'); }); //または $(document).ready(function() { alert('Hello'); }); //または jQuery(function() { alert('Hello'); }); //または jQuery(document).ready(function(){ alert('Hello'); }); //JavaScript document.addEventListener('DOMContentLoaded', function(){ alert('Hello'); }, false);
jQuery.on()は追加式なのでイベントの重複登録に注意しよう - Qiita
はじめに jQuery.on()は動的に追加したDOMに対しても簡単にイベントを追加できる便利なメソッドです。一方でaddEventListenerとは異なり、全く同じイベントでも重複登録できてしまうため、注意が必要となるケースがあります。 基本的な知識かもしれませんが、見落としてしまったので備忘録として残しておきたいと思います。これ以上被害者が増えませんように...... jQuery.click()とかでも同じです 目次 はじめに どういった時に何が起きるか 重複を回避するには addEventListenerを使う on()と同時にoff()を使う おまけ 終わりに どういった時に何が起きるか ページ読み込み時に一回イベントを設定するだけであれば、問題は起こりません。 しかし、以下のようなイベント登録が複数回処理されうる場合は注意が必要です。 var fnc = function()
【jQuery】stopメソッドを理解する - Qiita
私はstopメソッドを$(hoge).stop().animate({のような、 引数を指定しない方法でしか使っていませんでした。 しかし、true/falseの引数の使い分けで四種類の動作が使い分けることができるようだったので、 ビボっておこうと思います。 引数によって変わる処理の仕方 /* １．現在のアニメーションが最後まで完了していなくても、その状態から次のアニメーションに移行する*/ stop(false, false).animate stop().animate /*２．現在のアニメーションが完了しないまま、次のアニメーションは破棄されて実行されないので、 最初のアニメーションの途中状態で止まる*/ stop(true, false).animate /*３．現在のアニメーションは最終的なゴールにジャンプし、そこから次のアニメーションが開始される*/ stop(false, t
jQueryの.removeClass()で「特定の文字列で始まるclass」をすべて削除する - Qiita
jQuery の .removeClass() メソッドでは、「引数に関数を指定する」ことで柔軟なclass削除が実現できます。 「特定の文字列で始まるclass」を一括削除 「ユーザー操作に応じて画面表示を変更する」際など、要素の状態をあらわす "is-active"、"is-visible"、"is-fixed"、"is-closed" といった「特定の文字列で始まるclass」を複数利用する場合があると思います。 例えばこれらの "is-***" というclassのみを一括で削除したい場合、正規表現を利用した以下の方法で実現できます。 <div id="sample" class="block element is-active is-visible is-fixed">＊＊＊</div> <script> // 'is-' で始まるclassをすべて削除 $('#sample').
エヴァンゲリオンでわかってしまうJavaScript - Qiita
はじめに 全国１億２０００万人のエヴァンゲリオンはわかるけど,JavaScriptはちょっと、、、な皆さんこんにちは。 JavaScriptのプログラミングは、エヴァンゲリオンよりは簡単なのですが、なぜかプログラマにしか浸透しません。 エヴァンゲリオンの諸概念を理解している方であれば、すでにJavaScriptプログラミングは理解していると言っても過言ではありません。 そのあたりをそういうことにして、本編にとりあえず行きましょう。 あわせて読みたい 半年で40kg痩せた！ダイエットでわかるリーンなプロジェクトマネジメント手法 1.地球とミックスイン まずは、エヴァンゲリオンの世界における地球をJavaScriptで表現してみたいと思います。 ここで登場するのはもちろんエヴァンゲリオン世界のトリックスター、ナディアと我らをつなぐものこと「第一始祖民族」ですよね。 彼らは隕石に「白き月」と「黒
jquery プラグイン/作成 - Qiita
注意 この文章は、ここの文章をそのままコピペしたものです。 プラグイン作成に非常に有効なのでメモしました。 最新版はオリジナルの文章を読むことをお勧めします。 元文書: Plugins/Authoring - jQuery Wiki(t) jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です！プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3.
classが存在するか否かを判定する - Qiita
上記のように、そのタグにhogeというclassがついているかどうかを判定する。 例えば、こんなときに使える。 <div class="hoge">テスト1</div> <div>テスト2</div> <div class="hoge">テスト3</div> <div>テスト4</div> <div>テスト5</div> $('div').click(function(){ if($(this).hasClass('hoge')){ $(this).css('color','red'); } }); クリックしたとき、hogeというclassがついていたら、文字色を赤くする。 など。 しかし、これではclassが存在するかどうか、を判定する場合には使えない。 そこで使えるのが、length。 length=長さ、個数を表すメソッドである。 これで、hogeというclassが存在しているかど
CSSアニメーションの終了に合わせて処理を行いたい - Qiita
やりたかったこと 画像をアニメーションで動かし、アニメーション終了後にボタンを出現させる 最初に思いついたやり方 jsのsetTimeoutを使ってアニメーションの終了に合わせてクラスを切り替えればいっか .anm_spin{ -webkit-animation: spin 4s; } @-webkit-keyframes spin{ 0% { -webkit-transform :rotateY(0deg);opacity:0; } 50% { -webkit-transform :rotateY(0deg);opacity:1; } 100% { -webkit-transform :rotateY(1080deg); } } .hidden{ display: none; }
AngularJS で動的にDOM上に追加したディレクティブをパースさせる方法 - Qiita
<div ng-controller="asyncDirectiveCtrl as ctrl"> <button ng-click="ctrl.get1()">失敗</button> <button ng-click="ctrl.get2()">成功</button> <div class="asyncDirectiveResult"></div> </div> angular.module('demo', []). controller('asyncDirectiveCtrl', function($compile, $scope){ this.get1 = function(){ return angular.element('.asyncDirectiveResult').html('<hello>Taro</hello>') } this.get2 = function(){ va
Angular JS 1.4系 基本的な使い方 - Qiita
はじめに AngularJS(1.4系)を使い始めて、すごいなーと思ったので(小並感) 簡単なところを共有して感動できたらいいなーと思います。 この記事はAngularJS触ったことない人・一応聞いたことあるよ みたいな人向けの記事です。 公式ドキュメントがしっかりしてるので、それ読むのがいいと思うんですが 実際に感動してもらえたら、それが一番いいと思ってるので それを目当てに書きます。 下準備 マイナーverが違うとここら辺が違うので注意が必要。 今回は1.4系を想定してます。 <html ng-app="MyApp"><!--このタグの中でangularJS使うよっていう感じ --> <head> <meta charset="utf-8"><!--いつも通りの文字コード --> <script src="js/lib/angular.min.js"></script><!--Angu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Android4.x.x系で画像や背景がぼやける現象の簡単な解決方法 - Qiita
