Help us understand the problem. What is going on with this article?
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の2つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ~すぐにでも現代っぽく出来るワンポイントまとめ~ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 そしてプロによるマサカリ 対策として一つ重要な注意書きをします。 この記事中で出てくる「CommonJSモジュール」という表現は全て「CommonJSのModules 1.0仕様をベースとして、Node.jsが独自に拡張したCommonJS派生のモジュール仕様及びインターフェース(require/exports
##ECMAScriptとは ECMAScriptはJavaScriptの中核仕様を抜き出して標準化したもの 開発当初のJavascriptは、ブラウザによる独自の拡張が多く、互換性が低かったため、Ecma Internationalが中心となりECMAScriptが開発された ES2015 (ES6)とは 先日策定された、ECMASCriptの6th Editionのことであり、当初はES6と呼ばれているが、正式名称をECMASCript2015(ES2015と呼ばれる)とし、今後は年単位のリリースを予定しているとのこと [公式サイト]http://www.ecma-international.org/ecma-262/6.0/index.html ES2015で可能となる新たなシンタックス let・constキーワードによる変数宣言 class構文 関数の引数のデフォルトパラメータ(D
Metalsmithはやりたいことをプラグインで導入していくスタイルなので、若干のとっつきにくさはあるかもしれません。ただ、だいたいの仕組みとよく使うプラグインを把握してしまえばあとは自由にサイトを作ることができるようになってくるので、Node製でそういったものを求めているのであればMetalsmithが最良の選択になりそう。自分が使っているプラグインの可能性もあるけれども、ビルドは他のジェネレータと比較して、それほど早いといった感じはないなので記事数が膨大の場合には微妙なのかもしれない。 hbsnow/4uing.net 自分のサイトも今のところMetalsmithで作成しています。 インストール まずはMetalsmithをインストール。 CLIを使う場合にはグローバルにインストールするのが普通なんだろうけど、CLIは使わないので普通にインストールしていきます。 これだけではほとんど何
普段はCUIでGitを利用しているけど、プロジェクトでGitを利用するにあたりGUIの方が良いって人向けにSourceTreeを試してる。 これはこれで見やすくて分かりやすい。 は、いいんだけどターミナルってアイコン押したらコマンドプロンプト開いて悲しい気持ちになった。 やっぱり好きなターミナルで開きたい。 ってことで、好きなターミナルで開けるように設定する。(アイコンを押したときの挙動は変えられなそう) ツール - オプション - カスタム操作 を選びカスタム操作を追加する。 メニュー表示名にはopen with terminal(任意の名前)と設定し、別のウィンドウで開くにチェックを入れる。 実行するスクリプトには開きたい好みのターミナルを指定する。自分はcmderを設定した。 パラメータに$REPOを設定することで、リポジトリのディレクトリでターミナルを開くことが出来る。 こんな感じ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まえがき 私はGit好きの人間です。 もっと言えば、Gitを愛している(Git Lover)と言ってもいいくらいです。 そんな私がなぜこんなタイトルの記事をいまさら書こうと思ったかというと、 いまだにGitの便利さを知らず、Subversionを強い理由もなく使い続ける開発者が多いからです。 そんなわけで 「会社にGit/GitHubを導入するための説得する」 という目的でこの記事を書こうと思います。 Gitの良さってなんだろう? 実は私もこれまで強く意識して考えたことはありませんでした。 Gitを使い出したら、 それがあるのが当たり前
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1年間真剣にJavaScriptに取り組んだ話 まえがき JavaScriptアドベントカレンダーの最終日をやらせて頂いて光栄です。 http://qiita.com/advent-calendar/2015/javascript ※元々は2の最終日を担当するつもりでしたが、本家が空いておりましたので失礼させていただいております。 2015年、自分の中で一番何に夢中だったかといいますと、モンハンかJavaScript(Node.js)だったなぁと思います。 そんなで今回は1年間どんな感じにJavaScriptとじゃれてきたのかをモクモク
にすると同時にopacityを1へとアニメーションしたい場合。 それをcssのtransitionを使って実現しようとすると、 css: .hoge{ display: none; opacity: 0; transition: opacity 1s linear 0s; } .hoge.show{ display: block; opacity: 1; }
主にCSS。各記述で発生する現象まとめ。 前に書いていた「本当にあったAndroidの怖い話」をマージ済み。 随時更新。 position: fixed android2系で、下の要素が押せてしまう ポップアップなど一時的に出すもの(その間、裏要素のイベント切るなどの対応が可)で、上に演出など乗せないケースでないと、難しい transform(scale・rotate等)が効かない端末あり 効く場合もブラウザにより挙動がけっこう異なる (仕様的にどれが正しいのかわからん) いくつかのandroid・IE10 → 無視 chrome・firefox → transform時に消えてしまう android chrome → 一緒にtransforomする android2系では、fixedな要素そのものじゃなくて、その上の要素もtransformしないことがある (これはさすがにバグでは) t
日本国内でも随分使われるようになってきたSlack、みなさん随分使いこなしていると思うのですが、Slackも日々目まぐるしく進化してます。リリースを眺めたりするのが好きな筆者が「よく使う機能」や「これは便利だぞ」という機能を厳選して紹介します。 ※) 紹介しているのは、MacのクライアントAppを前提としています。 Slash Commands編 参照:Using slash commands – Slack Help Center みなさん、スラッシュコマンド使ってますか? Slackでは殆どのことがスラッシュコマンドでできるといっても過言ではないくらい沢山のスラッシュコマンドがあります。ちょっと工夫すればオリジナルのスラッシュコマンドも作れるので楽しいですよ。 では、イチオシから紹介します1 リマインダー機能 たぶん、slackにリマインダー機能があることに気づいている人は少ないはず…
現在担当しているプロジェクトでLivingStyleGuideをいれてみたのでメモ。 公式サイトはこちら できることとかできないこととか マークダウンで記述するスタイルガイド Sassを使用しているプロジェクトに限られる? JSを埋め込めるので、動きのあるものもプレビューできる スタイルガイドのデフォルトデザインはCSSを上書きすることでカスタム可能 header、footerもオリジナルのHTMLを挿入できる gulp、gruntのプラグインあり ページ分割はできなさそう 必要なものの準備 Sass Sassファイルを用意する。 ディレクトル構成は下記のようにしてみた。 │──sass │ │── foundation │ │ │── _base.scss │ │ └── _reset.scss │ │── component │ │ │── _button.scss │ │ │── _
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
【News】電子書籍化しました! Gitbook Read Online Download PDF Download EPUB Download MOBI この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。 「クロージャーについてもっと知りたい!」「カリー化なるものがあるのか、知らなかった!」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり(場合によってはしょうがないことですが)基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜひこの機会にJavaScriptを復習してみてください。
#概要 例えば、以下の様にグラフと表が一緒になっているページがあるとします。使用者が同ページで新規にデータを追加した直後に、表に新データが挿入されるとともにグラフも更新されるようなインタラクティブなページを作りたく、React.jsのアプリケーション内部でChart.jsを使用してみました。React.jsの状態データ(this.state)を元にChart.jsにグラフを書かせる手法です。 Rails、CoffeeScriptでJSXを使用せず書きました。 #環境 ruby 2.2.1 Rails 4.2.3 react-rails chart-js-rails bootstrap font-awesome-rails 他 #手順 ##グラフのキャンバスを定義。 ここで定義したキャンバスを後にメインの部品のrenderメソッドで呼び出し、キャンバスのオブジェクトを作ります。 # Reac
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
最も誤解されているプログラム言語として名高いJavaScriptの誤解を解きつつ、中級者(プログラム開発においてある程度戦力として計算できる)になるためには何から抑えればいんだろう、というのを考えた記録とリンク集です。 考えたというか、自分が勉強中です。 ※追記 KENJUさんが完全に上位互換な内容の投稿を公開されていましたので紹介。 中上級者になるためのJavaScript【知識編】 対象 何かしらのプログラム言語は書ける 多少JavaScriptを書いたことはあれど、言語の仕様はよく知らない レベルの基準 中級ってどんな人なのさ? JavaScriptの業務スキルレベル 判別表 (5段階) あなたはJavaScriptを知らない JavaScriptでよく使われるクロージャやプロトタイプの考え方を理解すること 代表的なライブラリ(jQueryとか)が使えること、最近ならNode.jsな
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く