Vim初心者に捧ぐ実践的入門 - Qiita
vimライトユーザの俺が説明する実践vim入門編 対象者 : これからvimを使い始めようという人、開発者やwebデザイナ 期待される成果 : vimが少しでも好きになる vimとは何か 私の貧弱な語彙ではとても表しきれないので一言で言うと、高機能なテキストエディタだ。 使うまでに幾分かの修行を必要とすると言われているほど多機能、特殊な動作をする。 そんなツンツンのvimを使っているとそのうちデレてきて、私たちはvimからひと時も離れたくなくなるだろう。 何はともあれインストール なるべく簡単に用意できる方法を選んでいます。 自前でソースコードからビルドするよっていう方はmercurialを使って世代管理するといいかと思います。 コマンド内の> と $は入力不要です Windows 香り屋 KaoriYaからダウンロードして使うのが吉。 Windows+rを押してファイル名を指定して実行か
パッケージ管理システム Homebrew - Qiita
MacPorts と比べて Homebrew は依存関係でインストールされるソフトが少ないためか、パッケージ管理システムとしての人気が高まってきています。 MacPorts は、Mac に最初から入っているソフトウェアを無視してパッケージが依存するソフトを新規でインストールするという性質を持っていますが、Homebrew は極力 Mac に入っているものを使うように作られています。ゆえに、パッケージ導入時のシステムへの負担や、インストールにかかる時間が比較的少なくて済むようです。 また、Homebrew はスーパーユーザでコマンドを実行する必要が無く、一般ユーザー権限で使うことが出来ます。 ※【2015/07/07 追記】最近では Homebrew が大きく台頭してきて、MacPorts の名前を見ることは減ってきました Homebrew について Homebrew は「ユーザが自らパッケ
2016年反響が大きかったフロントエンド技術記事まとめ - Qiita
こんにちは、株式会社ICSインタラクションデザイナー／Schoo講師の鹿野といいます。 本記事では、この1年で執筆したフロントエンド関連の技術記事の中で、PV数・SNSのシェア数の観点からとく反響が大きかったものをご紹介します。 CSS3 - Flexbox Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA floatプロパティよりも簡潔なコードでボックスの豊富なレイアウトが可能になる「Flexbox」が注目を集めています。この記事ではWebページの作成を通してFlexboxの特徴と使い方について解説しています。 889はてなブックマーク。 Flexboxとfloatのパフォーマンス比較 - ICS MEDIA Flexboxとfloatプロパティをパフォーマンスの面から比較した記事。Windows、macOSの各種ブラウザについて比較検討しました。 114は
【React.js】Fluxの概念を勉強するときにとっても役に立った記事まとめ - Qiita
【2016/12/17 追記】 React（flux）を使ったブログエンジンを開発しました！ 何か参考になれば嬉しいです！ Notee https://github.com/funaota/notee 最近React.jsを始めた新米javascripterです！ こんな感じで作ってきました。 【rails/非同期】js初心者がいいね機能をReact.jsで実装してみた。その① http://qiita.com/funao/items/60aa3d7e36cf93e0d832 【rails/非同期】js初心者がコメント機能をReact.jsで実装してみた。その① http://qiita.com/funao/items/55a91ff1732b9c825630 ただ、Fluxがまだいまいちピンときてなかったので、今回しっかり勉強してみました。そのときに役に立った記事をまとめました。 役に立
node で ES6 の let を使ったファイルを実行すると SyntaxError になるのを回避する - Qiita
(node v4.1.2) let 使うと SyntaxError になる現象 ES6 の記述を使って node コマンドでファイルを指定して実行できます。 例えばアロー関数を使って実行
Protractor でブラウザのウインドウの制御をする - Qiita
目的 Protractor を使って UI のテスト時に、ブラウザのウインドウの制御をしたい。 ケース例 あるリンクボタンを押したら、別ウインドウを開く。その時、その開かれたタブ画面の URL とコンテンツの確認をする。確認が終わったらウインドウを閉じる。 書き方 describe('テスト', function() { it('リンクボタンをクリックしたら別タブを開くよ', function() { // given browser.get('http://localhost:5000/#/hoge'); browser.waitForAngular(); // when element(by.id('sample-link')).click(); // then browser.getAllWindowHandles().then(function (handles) { var ne
ES2015 (ES6)についてのまとめ - Qiita
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構文 関数の引数のデフォルトパラメータ（Def
webpack最低限（JavaScript編） - Qiita
webpackについて自分用のメモになります。 最低限という背景 普段はBtoB向けのコーポレートサイトの制作が多く、ビルドツールはGulpでもGruntでもなんでもよいのが現状であり、ビルドツールを使用しなくてもなんとかなる感じです。 ただ、流行や今後の動向は理解しておきたいということで、自分の中で最低限webpackでやりたいことを実装してみました。 最低限やりたいこと javascriptのモジュール管理、Minify、es6/2015のトランスパイル Sassのコンパイル、ベンダープレフィックスの付与 ブラウザのオートリロード 上記の内容を数回に分けてまとめたいと思います。本記事では1のJS関連を扱います。 対象読者 流行はつかんでおきたいけどあまり難しいことはしたくない、とにかくwebpackを使ってみたいという方向けかと思います。 インストール まずはwebpackをインストー
ImageMagickをmacにインストール - Qiita
Homebrewからインストールしようとしたらエラーが出たので、インストーラで入れてみることにしました こちらからインストール http://cactuslab.com/imagemagick/ 以下を選択 ImageMagick 6.9.1-0 for Mac OS X 10.5 – 10.10 Requires XQuartz. (7.8 MB) $ display page.png > dyld: Library not loaded: /opt/X11/lib/libfontconfig.1.dylib > Referenced from: /opt/ImageMagick/bin/display > Reason: Incompatible library version: display requires version 10.0.0 or later, but libfont
React.jsのComponent Lifecycle - Qiita
今回はComponentのlifecycleについて書きたいと思います。 React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが出来ます。 よく使うのはcomponentDidMountやcomponentWillUnmount辺りです。 イベントの登録をcomponentDidMountでやってcomponentWillUnmountで解除するというのがよく使うパターンだと思います。 componentWillMount() ComponentがDOMツリーに追加される前に一度だけ呼ばれます。 なので初期化処理を行うのに適しています。 この中でsetStateするとrender時にまとめて行われます。 server-side rendering時にも呼ばれるのでどちらでも動くコードである必要があります。 c
【個人メモ】React Tutorialをちょこっとやってみた - Qiita
Reactが最近騒がれてるので、 よくわからないからReactjs tutorialを少しこなしてみた。 Reactとは ぐぐるとmizchiさんのブログエントリが出てくる。 Facebook製リアクティブプログラミングライブラリ React を試してみた + 感想 VirtualDOMという技術を使っているようだ。 [JavaScript] 仮想DOMを提供する『React』について少し調べてみた VirutalDOMだけ切り出した成果物も存在する。 https://github.com/Matt-Esch/virtual-dom Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 react-toolsのインストール React、type=“text/jsx” なコンテンツについてXHRで取りに行くようだ。 Chromeで開発することが多い、という
出来る限り短く説明するReactJS入門 - Qiita
VTeacher 所属の Masaki Suzuki です。 ※各項目をできるだけ3行以内にまとめています デザイナーさんやフロントのエンジニアさん向けのReact.js（リアクトジェーエス）入門です。 「最近、『リアクト』と聞くけど、つまり何？」ってひとが対象です。 React.jsとは React.jsはUIのパーツ（構成部品）を作るためのライブラリです。 FacebookがOSSとして公開しています。 初回投稿日：2015年06月21日 この投稿はReactが話題になり始めた頃（6年前のv0.1の頃）、整理した記事です。 最新情報はこちら React Server Components 2021年からReactを始めるなら React Server Components 一択ではないか？ https://zenn.dev/rgbkids/articles/e58ef9b947b199
Angular CLIによるAngular2入門 / Angular2アプリを爆速開発 - Qiita
ついにリリースされましたね、Angular2! Angular2にはCLI(command line interface)の開発環境が整えられており、雛形の自動生成、更新ファイルを自動ロードするなど、爆速な開発が可能になっていることをご存知でしょうか。 このAngular CLIを導入するだけで、様々な開発環境が一気に整います。そのため、gulpだgruntだ、TypeScriptだと様々な環境を整える必要があった今までの開発スタイルが一気に変わる可能性があります。 以下では、Angular CLIを使って共通ロジック[MessageService]からテキストを取得して、そのテキスト表示する画面部品、[HelloComponent]を持ったアプリを作りたいと思います。サービスやコンポーネントを使うのでAngularでの開発のおよその骨格を感じ取っていただけると思います。 では、Angul
ES2015で始めるJavaScript入門 - Qiita
はじめに JavaScript勉強会の資料です。 内容は、簡単なコマンドラインツールを作りながら、JavaScript(ES2015を含む)の書き方を学ぶものとなってます。 内容的には初心者向けなので、JavaScriptを勉強したい、JavaScriptは触ったことあるけどES2015を知らないので勉強したい、といった方が対象です。 JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES5(2011年策定)から4年ぶりに策定されたECMAScript 非常に多くの機能が追加された 新しいブラウ
React.jsの知っておいて損はないTips - Qiita
React.jsでの開発を始めてから微妙にハマったポイント、また「これを早めに知っておけばもっとコードを簡潔に書けたのに・・！」という点がいくつかあったので、それらのTipsを共有します。 renderで返すComponentは単一の親でなければならない まずは入門編。Reactを始めた人は一度はエラーになったことがあるかも。 renderメソッドで返すのは単一の親のComponentであり、複数の親のComponentを返すことは出来ません。 必ず一つの親になるようにWrapしてあげましょう。 // エラーになる render(){ return( <div>aaa</div> <div>bbb</div> ); } // 正常 render(){ return( <div> <div>aaa</div> <div>bbb</div> </div> ); } renderで空を返す 子コ
ReactとAngular2の選択で迷ったときに考えたいこと - Qiita
まえがき 最近社内でLT大会がありまして、Angular2について発表したのですが（正式リリース直前でしたが）、結構内容的には、React vs Angular2みたいな内容になってたので、『（私が）ReactとAngular2の選択で迷ったときに考えたいこと』としてちょっと記事にしてみました。 ※1 この記事はあくまで両者を触ってみた『個人的な感想』になりますのであしからず。 ※2 そして、この記事は2016-09-18の時点での内容になります。 Reactはライブラリ、Angularはフレームワーク Reactが出始めた頃にはよく比較されることの多かったAngularですが、それは両者が似たような時期に盛り上がってきており、それでいてDOM周りの問題解決で謳っている機能がそれぞれちょっとずつちがっていたからかなと思っています。（それぞれDOMの構築とデータバインディングについての機能を
究極のIT系最新技術情報収集用Slackチーム公開 - モヒカンSlack -
tl;dr コンピュータ系の情報収集用のSlack公開グループ（モヒカンSlack）を作ってみたよ。 皆さんで協力して育てていく共同RSSリーダーみたいなものだよ。 このSlackグループの情報を追っていればオッケーなので、情報取集が格段に楽になったよ。 誰でも無料で参加オッケーよ。下のどっちかからメールアドレスを入力して参加できるよ。 Invite people to mohikan Slackin Google Forms 参加者数 1,694名 (2016/10/7 時点) 4,077名 (2017/1/25 時点) 7,000名 (2017/8/25 時点) 11,747名 (2018/12/1 時点) チャネルのリストは「Gist」にあるよ。148チャネル(2017/1/25時点） 分野ごとにチャネルが別れていて、追いたい分野のものに参加すると良いよ プログラミング言語系(毎朝G
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
d3js & react.js を同時に使ってみた - Qiita
yarnがnpmと何が違うのか試してみた - Qiita
gulpとprotractorでAngularJSを自動テストする - Qiita
