Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
アジャイル開発に取り組むチーム向けのコーチングや、技術顧問、認定スクラムマスター研修などの各種トレーニングを提供しています。ぜひお気軽にご相談ください(初回相談無料) こんにちは。ryuzeeです。 先日、スキルマップ作成のすすめという記事を書きましたが、それに関してオンライン上で色々議論になりました。 せっかくですので、その内容を共有します。 まず、おさらいですが、スキルマップとは以下のようなものです。横軸にプロジェクトで必要となる技術、縦軸に名前を入れます。 それぞれの記号は、★:エース、◎:得意、○:一人でできる、△:助けがあればできる、空欄:できない、・:今後習得したい、というのを指していますがこれはチーム次第です。 このスキルマップを作ることで、「スキルの見える化」「リスクの見える化」「学習速度の向上」が期待できます。 さて、議論になったのは、以下の話です。 チームに足りないスキ
はじめに Javascript開発でよく使ってるデバッグ方法についての個人的なまとめです。 当たり前の事ばかりですが、これからJavascript開発をやる方や興味がある方に少しでもお役に立てればと思います。 デバッグの鉄板 console.log Javascriptの開発でconsole.logを使わない人を探すほうが難しいくらいだと思います。
データベースと言ったら、何を連想しますか?SQL?Oracle?いろいろと出てくると思いますが、きっと10位以内に入ってるキーワードとして、必ず「ER図」はあると思います。ER図は書くのが面倒なので、もし手元にある実際のデータベースからER図を自動的に書いてくれたら、こんなに楽なことはないですよね?はい、作ってみました。 この機能を作るために、いくつか図を描画するためのライブラリを検討しました。しかし、しっくり来るものは残念ながらありませんでした。一つ使えそうだったのがJointJSだったのですが、依存ライブラリとして「jQuery, Backbone, Lodash, Geometry, Vectorizer」というそうそうたるメンバーが必要で、やむなく断念しました。そう、ないものは自分で作るしかありません。ER図のような作図は、オブジェクトを描画すること自体は難しくありません。とにかく
CMS.jsはJavaScript製のCMSです。オープンソースとして公開されています。サーバーサイド・スクリプトの援助なしにクライアントサイドでWebアプリケーションを構築する事が出来る、との事です。jekyllを意識しているみたい。ライセンスはMITです。 CMS.js
Webに足りないのは高度な表現力と言われていますが、HTML5のSVGやCanvasによって大幅に向上しています。しかし、それらを使いこなしたり、プログラミングと組み合わせるのは大変です。 そこでライブラリを使って手軽に表現力を増してみましょう。今回はグラフライブラリのplotly.jsを紹介します。 plotly.jsの使い方 サンプルです。マウスオーバーにも対応しており、ハイレベルな描画ができます。 マウスで囲んでズームできます。 こんなグラフまで。 データの幅から平均値を使ってトレンドを見ることができます。 この淡い感じがすごいですね。 WebGLを使った3Dグラフにも対応しています。 基本的なグラフにももちろん対応しています。 複雑かつ使われる機会も多いグラフ。 地図やローソクチャート。 3Dチャートは使いこなすのが難しそうですが、インパクトがありますね。 plotly.jsはグラ
はじめに 以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。 一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。 今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
GitHub - uagrace/like-dislike: JQuery rating plugin Like/Dislikeの機能をサクッと実装できるjQueryプラグイン「like-dislike」 Youtube等である機能を簡単に実装できます。設定はローカルストレージに保存しつつ、サーバ側にもデータを送るというタイプのようですのでサーバ側の実装が別途必要になります。 関連エントリ 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」 textareaに行番号を付けられるjQueryプラグイン モダンな年・月ピッカーjQueryプラグインを実装するチュートリアル
あるとき突然『チームのキーマンが抜ける』というイベントが発生しました! まあ会社という組織ではよくありますよね(苦笑 チームメンバーが不安がっていたので、以前、楽天の川口さんに教えてもらったドラクエ風スキルマップを使って今の状況を可視化してみました。 これもまさにゲーミフィケーションって感じですねぇ~ スキルマップを作る過程 元々はWebアプリケーションエンジニアのスキルマップだったため、自分達に合うように数人でスキルマップを練り直しました。 これだけでもかなり盛り上がりましたッ!! 以下は川口さんのオリジナルから変更したところです。 要件定義のスペシャリストとして、商人を追加。 旅芸人はマネージメントのイメージに変更 スキルの方向を上方向に変更 盗賊のスキルレベルの見直し CやC++をイメージして文言を見直し 特性に対応するキーワードを追加 スキルマップを記述する チームメンバーに実際に
はじめに 普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。 手順 デザインについて無知でhtml, cssをほとんど書いたことない人(基本的な文法は知っている。)がいきなりおしゃれなサイトが作れるようにはなりません。以下のステップを踏んでいくといいと思います。 おしゃれなサイトを探して研究する。 bootstrapを使ってサイトを作ってみる。 実際に作ってみる。 おしゃれなサイトを探して研究する 個人的にこれをやることがおしゃれなwebサイトを作るための一番の近道だと思います。まずは既存のものを真似して作っていくことが大切だと思うので、なぜそのサイトがおしゃれなのか調べ尽くします。 この作業を繰り返しすることでどんなサイトがおしゃれなのかわかってき
「マージがなんとなく怖い」「リベースするなって怒られて怖い」「エラーが出て怖い」 Git 入門者にありがちな「Git 怖い」を解消するため、Git のお仕事(コミット、ブランチ、マージ、リベース)について解説します。 This document summarizes a microservices meetup hosted by @mosa_siru. Key points include: 1. @mosa_siru is an engineer at DeNA and CTO of Gunosy. 2. The meetup covered Gunosy's architecture with over 45 GitHub repositories, 30 stacks, 10 Go APIs, and 10 Python batch processes using AWS serv
はじめに HTML の script タグ内にインラインで書かれた js をデバッグする方法を共有します 本来であれば外部ファイルとして *.js にすべきですが、ワケあって <script> タグ内に js が書かれている場合に有効です! この方法は script タグに囲まれた js を、 あたかも外部ファイルの js として扱えるようになります やってみよう 例えば、以下のような html があるとします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Qiita</title> </head> <body> <div id="hello">Hello World!</div> <script> document.querySelector('#hello').addEventListene
gulpはstream志向でデザインされていて、streamしか受け入れない・streamじゃないとon the railじゃない、というようなイメージが強いと思う。 ところがどっこい、gulpのタスクが受け入れるのはstreamだけじゃないし、必ずしもgulp-*とかvinylとかを使わなければならない理由も特に無い。それらを使わなくてもタスクは実行できる。 「stream使わなくてもいいじゃん」と割り切ると、gulpの使い途が広がる。 一応挙げておくと、例えば下記のコードは正しいタスク。 gulp.task('synctask', () => { console.log('sync task executed.'); }); 非同期であれば下記のように書ける。 gulp.task('asynctask', done => { setTimeout(() => { console.log
情報やデータを視覚的に表現し、受け手に直感的な気付きを与えるインフォグラフィック。一般的には「図解」のようなものとして認知されているが、ひと工夫を凝らすことで、興味や関心の低い相手を振り向かせる、コミュニケーションの強力な武器になる。 インフォグラフィックでは、図解にピクトグラムを組み合わせるなどの手法で、より感情に訴えかけるビジュアルを制作する。ここで、図解とインフォグラフィックは以下のようなものだ。 最近では、企画書や提案書にもインフォグラフィックが使用されることがある。確かに「相手を魅了する」という特徴は目的に合致するが、デザインの心得のない人間にとってインフォグラフィック制作は少々敷居が高く感じるだろう。 日本におけるインフォグラフィック制作の第一人者は、『NewsPicks』のインフォグラフィックス・エディターで、『たのしいインフォグラフィック入門』(ビー・エヌ・エヌ新社)著者の
実はわたし来年度、長男のサッカーチーム保護者会会長を務めることになっています。1月に入ってから、引き継ぎを含めていろいろ動き始めているのですが… やること多すぎる 資料がばらばら 紙の資料はかさばるし重い 集まる回数が多い 話がすすまない まあいろんな問題が山盛りです。 とりあえず3月に行われる「6年生の追い出し会」いわゆる卒団式と、その直後に開催する大きな大会のための準備が、目の前にある大仕事。 最初の仕事にしたらハードルが高すぎるのですが、文句をいってる暇はない。だけどみんなそれぞれ忙しい。打ち合わせの時間を膨大な資料の読み合わせになんか使っていられない。だからこそ。 仕事が捗る環境を整える。 まずはこれから着手すべきやなと思いました。 役員仕事が捗る環境とは? 連絡手段は1つに統一する 役員の仕事で一番大事なのは、一にも二にも連絡です。連絡がとりあえないとお話にならない。それにある人
今年からAWS(Amazon Web Services)クラウドコンサルタントとして、中小規模のAWSデプロイの相談を受けています。その多くは典型的なWebアプリケーションです。ここで、ぜひ避けたい5つのよくある間違いを紹介します。 インフラストラクチャを手動で管理する。 Auto Scaling グループを使わない。 CloudWatchのメトリクスを分析しない。 Trusted Advisorを無視する。 仮想マシンを活用しない。 典型的なWebアプリケーションにおける間違いを防ぎたい人は、次に進んでください。 典型的なWebアプリケーション 典型的なWebアプリケーションは最低限次の要素で構成されているものを指します。 ロードバランサ スケーラブルなWebバックエンド データベース そしてこのアプリケーションは、次の図のような仕組みを持っています。 注釈:(左から)DNS、CDN、静
連載:池澤あやかとはてな大西の「エンジニアの働きやすい職場って?」 女優でエンジニアとしても活躍されている池澤あやかさんと、株式会社はてな チーフエンジニアの大西康裕が、エンジニアの働く環境や開発の様子、エンジニアのキャリアパスなどについてインタビューする連載です。毎回、さまざまな企業を訪問し、エンジニアの理想の働く環境について考えていきます。 大西 こんにちは、はてな サービス開発本部長 チーフエンジニアの大西です。 池澤 池澤です。コーヒーショップのバリスタのような大西さんですが、なぜマグカップにコーヒーではなくお湯を…… 大西 完全にカフェっぽい場所ですよね。こちらは スマートニュース のオフィスの一角にあるコーヒースタンドなんです。今回案内してくれる方を探しに行きましょう。 大西 あっ! プロダクトマネージャ アプリケーション担当 前田俊太郎さん前田 こんにちは、前田と申します。1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く