TypeScript/Reactのモダンな環境で開発するフロントエンジニア
TypeScript/Reactのモダンな環境で開発するフロントエンジニア 株式会社カオナビ @kaonavi I want to hear a detailed なにをやっているのか 私たちは、社員の個性・才能を発掘し戦略人事を加速させるタレントマネジメントシステム「カオナビ」を展開しています。 ■「カオナビ」とは？ 今まで紙やExcel、システム、社員の頭の中などに散在していた人材情報を一元管理することで、あらゆる人事課題への対応を可能にするプロダクトです。 現在は、企業規模や業種問わず、2214社（2021年9月時点）の企業に導入いただき、6年連続日本でのタレントマネジメントシステムシェアNo1※を獲得しています。 ※ITR「ITR Market View1：人材管理市場2021」人材管理市場-ベンダー別売上金額シェアで6年連続1位（2015～2020年度予想） 「カオナビ」製品情報
担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる こんにちは、まろCです。 最近、僕が担当した JOYSOUNDのキャンペーンサイトで、いろいろな賞を受賞することができました。 CSSREEL Design Awards Asis CSS WINNER 今回は、このような演出を入れるサイトで僕がいつも使っているJavaScriptライブラリや、webツールを晒したいと思います。 アニメーションの基本的なフロー 基本的に、アニメーションはCSSにtransitionやanimationで記述しています。 javascriptで、ロードやスクロールをトリガーにして、その要素にaddClassやremoveClassしてアニメーションを発動しています。そのほうが軽いからです。 より複雑、かつ連動して動かしたい場合は、ライブラリを使用し
アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11
2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Webデザイナーが一度は読んでおくべきおすすめの本13冊 - LITERALLY
先日、読者の方から「Webデザイン習得するにあたって参考にした本は何か」という問い合わせを頂いたので、回答記事を書こうと思う（遅くなってしまいすみません）。せっかくなので、Webデザインの専門知識に関する本だけでなく、いつもインスピレーションをもらっている本も合わせて紹介しようと思う。参考程度にどうぞ。 以下の3つのジャンルについて分けて紹介。 WEBデザインを学ぶための本 デザインセンスを磨くための本 インスピレーション刺激本 WEBデザインを学ぶための本 1 インターネット技術の絵本 振り返れば、いちばんはじめに読んでおけばよかったなと思うのが、この絵本シリーズ。Webデザイン含め、プログラミングを始めた人は「Webデザインがどうやってインターネットに公開され、どうやって人の目に触れるのか」や「今の作業の全体における立ち位置」がいまいち見えなくてモヤモヤすることが多いと思う。HTMLと
JSのソースコードが変えられない！困ったときにモンキーパッチで逃げ切る方法
他人が作ったJavaScriptのプログラムを部分的に、でも元のコードを修正せずに対応するしかない…。そんなときにモンキーパッチ。やらなきゃいけないときの対処方法を実例で。 たった1つの小さな問題点を除いてきちんと動作する、第三者のコードを使ったことはありませんか？ なぜ作成者はこんなやっかいなコンソールログを削除し忘れてしまったのだろう、そのAPIコールがもう1つちゃんとしていればうまくいったのに、と思うことがあるでしょう。こうした場合、メンテナンス担当者に変更箇所を実装させるのは困難（あるいは不可能）です。自分自身でコードを変更しようにも、ソースコードを持っていなかったり、自分でコードをホストしたくなかったりするときはどう対処すればよいか悩みます。 さあ、JavaScriptのモンキーパッチの世界を一緒に探検しましょう！ この記事ではモンキーパッチとはなにかを説明します。また、第三者が
フロントエンジニアが今話題のFirebaseについて語りたい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最初に 最近、Firebaseについての記事をよく見ます。 稚拙ながらもFirebaseについて注目している一人として語りたい。 知識不足(特に後述の歴史の認識)のため、駄文乱文あると思います。ご指摘いただけると幸いです。 React + Redux + Firebaseの実装記事を書きました。 Firebase Databse導入のために考えた4つのポイント。NoSQLと真剣に向き合った時ぶつかったことを書きました。 Firebaseとは mBaas(Mobile Background as a Service)の一つで、Google
第1回 プログレッシブフレームワーク Vue.js：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社
Vue.jsとは Vue.js（ビュージェイエス）は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日（日本時間）に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。 シンプルなAPIやHTMLベースの平易なテン
ここからはじめるReactの基礎の基礎 - Qiita
はじめに この記事はReactの実装をしたことがない人、JSというとjQueryくらいしかやったことがない人でも理解出来るような内容です。 Reactをはじめるというとチュートリアルからはじめるのが基本かと思いますが、チュートリアルよりミニマムにReactってどんなの？というものを実際に実装して感じようというのが目的です。 ただし、npmはインストール済みが前提なのでnpmの準備は各自お願いします。 この記事ではReactの概念よりも実装を重要視します。なぜReactが良いのか等は他記事に譲らせて頂きます。 Reactを使うとなぜjQueryが要らなくなるのか なぜ仮想DOMという概念が俺達の魂を震えさせるのか 簡単に説明すると、ReactはVirtual DOM (仮想DOM)という概念がキーポイントになり、それによって設計面、速度面に利点があります。特徴としてコンポーネントbaseのU
最新版！あらゆるWebページを作成する時に使える、必要最小限をまとめたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 HTML5 Boilerplate -GitHub イラスト: Girls Design Materials HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
ZabbxAPIとJavaScriptで独自UI作ってみた - mikedaの日記
ZabbixAPIとJavaScriptを使って簡単なグラフ表示UIを作ってみました。 『ホストグループ』→『ホスト』と選択すればいくつかのグラフが表示されます。 なぜこんなことをしてみたかというと、「Zabbixの標準UIはグラフの一覧性が低いと思うから」です。 ドロップダウンメニューで１つずつ進んでいくのではなく、チェックボックスや検索機能を使いたかった。 これに関してはぜんぜんいけそうだなという印象です。 グラフの描画にはGoogleChartAPIを使いました。 作っておいてなんですが、自分でグラフ書くのはやめておいたほうがいいです。 APIではヒストリ（短期間保存の詳細情報）は取れるがトレンド（長期間保存のサマリ情報）が取れないからです。 Zabbix本体のグラフ画像URLを動的に生成したほうがいいです。 このあたり踏まえてまた改良版を作ってみたいと思います。 今回の実装について
はじめてのTypeScript開発環境構築（gulp, bower, webpack, tsd, npm）
はじめてのTypeScript開発環境構築（gulp, bower, webpack, tsd, npm） TypeScriptで開発しようとしたとき、いろんな問題にぶつかった。 もともとSIerではVisual Studioさえあればなんとかなる環境で育ってきたため、Web系のさまざまなツールを導入する上で何度も挫折した。 ということで、初心者（私）が初心者向けに「はじめてTypeScriptの開発環境（gulp + bower + webpack + tsd + npm）を構築するときの手順とポイント」についてまとめていこうと思う。 ツールの使い方間違っているよなどの指摘がありましたら、コメントやTwitterで教えてください。 この記事の目標 TypeScriptで開発したい ライブラリも使いたい（今回はjQueryを例にする） Web界隈のツールにも慣れたい 使用するツール（ツール
サイドバーをスクロールに合わせてついてくるようにできるjQueryプラグイン-Contained Sticky Scroll ｜ memocarilog
サイドバー等のボックスを下にスクロールしても一緒についてスクロールするようにできるjQueryのプラグインです。右上のアイコンをクリックで一緒にスクロールするのをやめる事もできます。 設置も簡単にでき、IE6にも対応しています。 配布先とデモページ 配布先：Contained Sticky Scroll サイトの真ん中くらいにある下の画像の箇所をクリックでダウンロードできます。ダウンロードファイルの中にデモやjQueryのファイル等一式入っています。 デモ：Contained Sticky Scroll Demo 使い方 ヘッダー内に下記を記入してjQuery本体とプラグインを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis