Vuejsのちょっと便利なコンポーネント機能 - Qiita
はじめに vuejsはとっつきやすく完成度の高いJSフレームワークだと思っていますし、日本語のドキュメントも充実しています、実際に下記の機能も全て公式ドキュメントに記載されている内容です。 しかしながら、実際にやりたいことと機能名の間に乖離があったりして、いざ使用する時に意外に実装方法などを見つけにくい場合も当然ながら存在するため、自分用に Vuejs のちょっと便利なコンポーネントの機能をメモっておきます。 お品書き 共通した親要素を使いまわしたい（スロット配信） パラメーターによって使用するコンポーネントを変えたい（動的コンポーネント） 複数のコンポーネントで、同じ処理を使いまわしたい（ミックスイン） 出力するタグを動的に指定したい 共通した親要素を使いまわしたい いわゆるラッパーコンポーネント、例えば10個のコンポーネントを作る必要があるとして、その全てが共通したヘッダやフッタを持っ
JavaScript ショートコードテクニック集（ES6含む） - Qiita
何の役に立つかはわからない、ショートコードのテクニック集です。 ここで紹介しているテクニックの幾つかは非推奨の記述法です。 用法、用量を守って正しくお使いください。 基本 改行と半角スペースをなくす。
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
CSSプロフェッショナルのためのTIPS - Qiita
CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日本語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。
JavaScriptを短く書くためのショートコード集
Posted: 2014.12.25 / Category: javascript 知っておくとちょっとだけコードが簡潔に書けるかもしれないショートコード集です。 小数点以下切り捨て 「Math.floor」で切り捨てですが、 Math.floor(12.6598); //12 数値の前に「~~」付けるだけでもできます。 ~~12.6598; //12 桁数の制御 「～e」に続く数字で桁数を制御できます。 1e1 //10 1e2 //100 1e3 //1000 1e4 //10000 1e5 //100000 2の累乗はシフト演算子 2の累乗は左シフト演算子（<<）でできます。 200 << 1; //400 200 << 2; //800 200 << 3; //1600 逆は右シフト演算子（>>）です。 200 >> 1; //100 200 >> 2; //50 200 >> 3
[CSS]テキストが長いとレイアウトが崩れる！予期せぬコンテンツに対応するためのスタイルシートのテクニック
テキストとアイコンを横並びさせたボタン、カテゴリのテキストを配置したラベル、ラベルが長いフォームなど、これらのテキストが長いとレイアウトが崩れてしまうことがあります。 レイアウトが崩れてしまう予期せぬコンテンツに対応するためのスタイルシートのテクニックを紹介します。 Handling Long and Unexpected Content in CSS イラスト: Girls Design Materials 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 左右どちらかにアイコンが配置されたボタン 02. ラベルに重なってしまうフォームのボタン 03. テキストが長くてスペースに収まらない場合 04. リンクが長くてはみ出してしまう場合 05. タグのテキストが長くてはみ出してしまう場合 06. 両端揃えのテキストが長い
![[CSS]テキストが長いとレイアウトが崩れる！予期せぬコンテンツに対応するためのスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2e33134d6d625cb142994a08293c23978551124/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017062312.png)
Photoshopを使ってシネマグラフを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
動画を準備する シネマグラフの完成度は動画のできにかかっています。主な条件は以下の3つです。 ネマグラフがうまくできる条件 1. カメラが固定されていること シャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚＆リモートシャッターなんかがあるといいと思います。 2. ループの繋ぎ目が気になりにくい動きであること 髪の毛のふわふわとか水がチョロチョロ流れる動きなど、動きが単純で短い時間でも成立するものが向いています。しかしこういった動きはすでによく使われていて、マンネリなのも事実ですね……。アイデアをひねり出すのが一番大変な作業かもしれません。 3. 動いてる部分の背景に動きがないこと 後で詳しく説明しますが、動画の上に静止画を置いて、動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。 以上の点を踏ま
誰もが知っておくべきjQueryのTips - Qiita
煽りタイトルを付けようと思ったら元からそんなタイトルだった。 ということで以下はjQuery Tips Everyone Should Knowの日本語訳です。 イタリックは元記事にはない訳者(私だ)による補足です。 jQuery Tips Everyone Should Know これは、とても役に立つjQueryのTips集だぞ。 Checking If jQuery Loaded jQueryで何かするには、最初にjQueryがロードされてるか確認する必要があるぞ。 if (typeof jQuery == 'undefined') { console.log('jQueryがない！'); } else { console.log('jQueryがある'); } 残念ながら君はのけものだ。 Use .on() Binding Instead of .click() .on()は複数の
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
React 初心者が躓いたところまとめ - Qiita
今年初めて実務案件で React を使用したのですが、その際に躓いたポイントをまとめていきます。 ちなみに、実務で使った開発環境は 言語: JavaScript(ES2015) ビルド: Webpack, Babel(es2015, react, stage-0) というかんじです。 全般 React Developer Tools Facebook 公式による Chrome 拡張です。 現状の state の確認/書き換えとかが出来て捗ります。 key 箇条書きリストの生成などで、 array.map して要素を出力したいときがあると思います。 その際に key を設定してないと、 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of
2016年 独りで新規WEBサービスを開発・運用した際の知見 - Qiita
私が新規WEBサービス立ち上げ時に取り組んだ内容についてWEBエンジニア向けにまとめた記事です。 例えばNginxの設定でHTTPヘッダーが正しく設定されているかを確認できるGoogleDevelopers PageSpeed Insights を知っていると大変有利です。もちろんPageSpeed Insightsを知らなくてもWEBサービスを公開・運用可能ですがユーザに意図せず不利益を与えていたり、知らず知らずのうちにモバイルフレンドリーでないとGoogleから検索ペナルティを加えられている可能性があります。この記事は独りで新規WEBサービスを立ち上げた際のノウハウと取り組んだ内容について記述しています。 1. 概要（5行くらいで） スマホ対応は必須。トラフィックの50%はスマホから発生する。 速度は武器！速いサイトはそれだけで価値がある。 SEOの内部対策は内部リンク整備とPageS
突然だがEmacs を始めよう - Qiita
2016/06/06 : 誤字脱字など細かいところを修正 目次 突然だがEmacs を始めよう 1章：Emacs の基本概念 2章：Emacs の基本操作 3章：window / buffer操作 4章:パッケージ管理 Tips 感想 参考資料 この文章の目的 「一生楽しく使えるエディタは何がいいかな？」と模索している人（私）が、「そういえばemacs ってどうなんだろう？苦手意識があったけどちょっと触ってみようかな」と思いたち、Emacs の練習と自分用チートシート作成を兼ねて作ったものです。参考にしたURL等は、最後に記載するので、そちらを参考にしてください。 これを書いている人のバックボーン Windows でvisual Stduio でC++を長年（中学から高校にかけて）書いていた。 Mac に乗り換え、Xcodeでアプリを書いたり、webのためにSublime Text でra
「もっと書きたい、もっと早く…！」を求めてブログを書くために実践しているたったひとつの方法 | DevelopersIO
はじめに おばんです、初コミケ参戦に意気込んで実弾（小銭）の用意も完了した田中です！！！明日は戦じゃ！ 今回は自分が登壇するイベントレポートと登壇報告のレポートをイベント終了時には同時にアップし終えている私が普段実践している、とにかくブログを早く書く方法をご紹介します。 もくじ ブログを早く書くことの必要性 テンプレートを作る テンプレート紹介： イベントレポート テンプレート紹介： 実績系（出演・執筆・登壇報告など） テンプレート紹介： 技術TIPS テンプレート紹介： 大きな粒度の技術まとめ まとめ 参考・関連 ブログを早く書くことの必要性 ネタの鮮度問題? まず問題点として以下の二つがもっとも大きな問題として挙げられます。 人が持つ特定の技術やイベントに対する熱はいつまでも保てない 自分が保持しておけるネタの鮮度はいつまでも保てない 前者は技術トピックであれば熱が保たれる期間はまだ長
ブログのアクセスアップ方法はキュレーションメディアに学べ【SEO編】 - プログラミングとデザイン、スタートアップの話
あなたのブログのアクセスを伸ばす方法は、キュレーションメディアから多くのことを学ぶことが出来る。 キュレーションメディアとは、F1層前半をターゲットとしてるMeryや、ママ層特化型のママリなどのことを指す。これらのキュレーションメディアはメディア運営のプロフェッショナル達が確立した集客方法でアクセスを急増に伸ばしている。 ブログもキュレーションメディアもアクセスアップ方法として共通項はいくつもある。果たして彼らはどのような方法で集客しているのか？今回は、SEO関連の集客方法の中から、基本的だが必ず実践したいTips3つを紹介する。 Tips1. ブログを書く前に1週間リサーチの時間を取れ ◎キーワードサジェストツールに忠実になる STEP1. ブログのコンセプトに沿うキーワード第一群をリスト化 STEP2. キーワード第一群にスモールワードを掛け合わせる STEP3. さらにスモールワード
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
ตรวจหวยแบบตัวเลข ตรวจ ผล รางวัล สลากกินแบ่ง รัฐบาล2021
ตรวจหวยแบบตัวเลข ตรวจหวยกรอกตัวเลข รวดเร็วทันใจ ตรวจลอตเตอรี่ใส่ตัวเลขรองรับปุ่ม ตรวจหวยแบบตัวเลข เลขเด็ดหวย งวดนี้ หวยดัง หวยเด็ด ตรวจหวยแบบตัวเลข ผลสลาก ตรวจลอตเตอรี่ ตรวจหวยไทยรัฐ ตรวจหวยแบบกรอกตัวเลข ตรวจหวยรางวัลที่ 1 รางวัลเลขท้าย 2 ตัว ตรวจหวยออนไลน์ ร่วมตรวจผลสลากกินแบ่งรัฐบาลกับเรา “ตรวจหวย” ซึ่งได้รวบรวมข้อมูลผลรางวัล ผลสลากกินแบ่งรัฐบาล ตรวจหวยงวดนี้ หุ้นไทยช่อง9 ในงวดปัจจุบันและย้อนหลั
[Web] UI/UXデザインがわかるサイト8つのまとめ
ここ数ヶ月、gleesyという新しいサービスをつくっているのですが、 どうにもデザインが難しい！ デザインが主観的な仮説の積み重ねになってしまっていて、いかがなものかと思ったので、 ユーザビリティの理論を調べてみました。 と、言ってもただの自分のためのまとめメモですが。 あと、gleesyが気になった方はhttp://gleesy.com/より事前登録をお願いします。 【0.目次】 ―基本 ・ユーザビリティ5原則 ・デザインガイドライン ―ガイドライン ・３つのチェック項目と5つの法則 ・インターフェースデザインで気をつけるべき10のこと ・カラーデザインの原則 ―評価方法 ・ユーザビリティテスト ・ヒューリスティック ・チェックリスト ・認知的ウォークスルー ・シナリオウォークスルー 【Ⅰ.基本】 まずは、ユーザビリティの基本となる考え方です。 ユーザビリティを考慮したサイト設計は以下の
![[Web] UI/UXデザインがわかるサイト8つのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/3eb672b73358f759376101aa51cca30d48f0e13e/height=288;version=1;width=512/http%3A%2F%2F4.bp.blogspot.com%2F-ULtIWFct5AM%2FTjFRdl166eI%2FAAAAAAAAAoY%2FFM3B0bh872U%2Fw1200-h630-p-k-no-nu%2Fuxresearch_01_03.gif)
正規表現サンプル集
今日の正規表現Tips (2008/10/05) \d 0〜9の数字を表す正規表現です。 \D 数字以外を表す正規表現です。 正規表現では小文字が大文字になると反対の意味を持ちます。 ツール 正規表現チェッカー 正規表現Tips集 Tips その１ Tips その２ テキスト編集で役立つ『正規表現のサンプル集』を詳しい説明つきで紹介。 正規表現を使ってテキスト検索＆置換して仕事の効率アップを図ろう。 ≪ メニュー ≫ １．正規表現とはなにか？ ２．正規表現を使う準備 ３．正規表現サンプル集【検索編】 ４．正規表現サンプル集【置換編】 ５．正規表現のお勉強と本の紹介 ６．エディタの強調表示でテキストに色づけ ７．プログラムで正規表現を使う ８．正規表現サンプルリクエスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://2ndidea.com/frontend/frontrend-in-fukuoka/
Web Frontend Performance Tuning TIPS *n
