はてなブックマーク

この記事は GraphQL Advent Calendar 2020 14 日目の記事です。 前回の記事は @joe-re さんの 「ライブラリの実装からCursor-based paginationにおけるcursorのフォーマットのベストプラクティスを探る」 でした。 前置き GraphQLは2010年代後半に出てきた技術の中でも個人的に特に強力なアプリケーション実装パターンの一つだと思っているのですが、シンプルな実装なのに利用用途が豊富にあることと利用する立場が違うと全く印象を抱く事から全体像を掴みづらく、本来持つべきポテンシャルに対してまだ認知が広がっておらず利用されていないように感じます。 今回はサーバーサイドからの視点を中心にGraphQLを構築する要素を分解して解説するのとともに、それを利用した際にWebアプリケーション開発やそれに関わるエンジニアに起きうる変化について書いて

今まで、自宅・職場では外部ディスプレイを使って作業をしてましたが最近はRoostを使い始めて、家でも外でもRoostと外部キーボード、マウスで仕事するようになりました。これで肩の痛みが激減したので下を向いて作業する時間が多いと首の筋肉に引っ張られて肩が凝るみたいですね。 ここできになるのはディスプレイ1枚だと画面切り替え大変じゃないのってところなのですが、以前 @reoring さんに教えてもらって自分にすごいフィットしたので共有しておきます。あまりmacのデスクトップについての記事がないような。 [追記2020/11/16] macOS 11.0 Big Sur(Intel) で動作確認できました。Total Spaces2をBig Surより前から使っている場合は最新版(v2.9.6~)を再インストールする必要があります。 TL;DR デスクトップを10画面作成する ショートカットキー

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TL;DR GraphQLはクライアント側とサーバー側の双方の複雑化を解決するために利用されてる フロントエンドにとってGraphQLはHTTP上で動く信頼できる唯一のリソースとして振る舞う フロントエンドの状態管理のベストプラクティスとしてのApollo Client クライアントファーストなAPI, GraphQLはWeb APIのベストプラクティスになり得る クラシックアプリケーションを改修することなくGraphQLとモダンフロントエンドで今どきのアプリを作れる はじめに GraphQLは非常に良く出来たソフトウェア(の仕様)です

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Azure Advent Calendar 2019 9日目の記事です。 担当は@saboyutakaです。 Azureには様々なサービスがありますが、今回はWebアプリケーションを作る時に利用するマネージドサービスを使って作るWebアプリケーションスタックを3つの構成パターンで紹介していこうと思います。 Azure App Service で単一アプリケーションを構築する Azure Front Doorを使って複数のアップストリームを構築する Azure API Managementを使ってMicroservices化する Azur

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Rails使って仕事してて、最近はRubyを使って初学者の方たちにプログラミング教えてます、@saboyutakaです。 未経験からエンジニアになりたいという人達に普段教えていて、ガイドラインがあるといいなと思って作りました。 まずなんで1000時間か これからWebアプリケーションを作るエンジニアになりたい人がこれを読んでくれていると思って書きます。そもそもなぜエンジニアとして働けるかというと、作りたいものがある人や企業が居て、それを作ることができる技能に対して給与や報酬が発生します。そして技術職として仕事で対価を得られる最低限のスタ

What・Why? Laravel Mixとは？ https://laravel-mix.com https://github.com/JeffreyWay/laravel-mix webpackのWrapper API LaravelのAssets Compileの機能 Node.js のライブラリ、PHPを必要としない RailsでもSinatraでもHanamiでもDjangoでもEchoでもWordpressでも、もちろんLaravelでも使える なぜ Laravel Mixなのか? RailsのSprockets、AssetsPipelineを使いたくない Too fu*kin' outdated CoffeeScript....? Turbolinksハマる webpacker使いたくない RubyのRuntimeで動いてるのがダサい 設定がなぞ ディレクトリがなぞ .js.e

というのをふと思いついたのでメモ程度に残しておく。あとからサンプルコードとともにちゃんと公開する それぞれの課題 フロントエンドエンジニア/デザイナーの課題 APIサーバーを叩く必要があって必要なJSONがほしい サーバーサイドの実装が待ちになると生産性が低い APIの仕様が変わる場合早く知らせてほしい Swagger ドキュメントの課題 実装とドキュメントの乖離が起きがち Swaggerには書かれてるけどまだ実装が終わっていない 実装は終わってるがSwaggerが更新漏れしていた サーバーサイドエンジニアの課題 APIの仕様が変わると実装のvalidationなどの変更が面倒 サーバーサイド実装作ってみて、フロントエンドに渡したあとで仕様変更が発覚した 課題 ドキュメントと実装の乖離は少なくしたい フロントエンドとサーバーサイド分けて実装したい gRPC + grpc-gateway h

この記事は Laravel Advent Calender 2017 8日目の記事です🎁 Webアプリケーションをデザイナーさん/コーダーさんと共同開発することってあると思うんですけどその時にわりとエンジニアは、こういうものだからテンプレートの書き方これなんで覚えてください、開発環境作ったのでこれの上でやってください、という事を言いがち。それでもデザイナーさん達はキャッチアップして開発に参加してくれるので本当に頭が上がらない存在。だけどその悩みを少しでも解決出来たらいいなと思っててLaravelで前回の案件をやっていて共同でやっていた方と閃いた構成が良かったので共有してみます。 デザイナーさんと共同で作業する時の共通な悩み フレームワークごとの書き方に振り回される問題 Railsだったらslimやhamlのシンタックス、そしてRailsのヘルパー群の使い方を学ぶ必要がある。Laravel

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? INSANELY FAST Qiitaを読んでる人なら https://dev.to をほとんどの人が見たはず。見てない人は見てきてください、速すぎて驚くはず。またmizchiさんがdev.toに書いた なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか - dev.to を見た人も多いと思う。個人的にHeroku, Railsを採用してここまで爆速なサイトを構築出来ていることは今までの常識を覆す衝撃な出来事だった。こんな新しい発見をもたらしてくれたdev.toには本当に感謝してる。自分もこんなサイト作ってみたいな

昨日の記事(macOSでディスプレイ1枚で作業する技術)が思いの外バズってびっくりしてるさぼです。せっかくなのでもう一つ連投しようかなと。 普段、macOSのデフォルトのショートカットキーでctrl-n, ctrl-p, ctrl-f, ctrl-bを使っている人向けのtipsです。 デフォルトの移動系emacsキーバインド ctrlとn, p, f, bで↓↑→←に移動できるのは使っている人ならわかると思います。これはターミナル上やemacsではうまく動きます。しかしそれ以外のアプリではショートカットキーの設定はバラバラで全然効かないものがあったり挙動が期待するものじゃなかったりします。どうにかならないかなーと思ってて解決策思いつきました。実験的にやってみて良さそうなので共有します。 ⌘英かな、またはKarabiner-elementsのどちらかで設定します。 追記(2020/11/16

これが自分が使っている設定です。メインブラウザのSafariは1, エディタ系は2, ターミナルは3, 開発ツールは4, Chromeは5, 6~8は自由に使うスペース、9はSlack, iTunesは10, FinderやSkitchなど他のアプリと合わせて使うものはAll。2つのアプリケーションを並べて使いたい時は空いているスペースにアプリケーションを持って行くようにしています。これは割り当ててる対応表覚えるというよりは、1つのデスクトップに複数のアプリケーションがたくさんある状態を防ぐのと、どんなときでもctrl+1を押せばSafariが開くという安心感を得るだけでも効果があります。 まとめ 再掲: ショートカットキーでアプリをバシバシ変えれます 以上の設定を行うことでディスプレイ1枚でもアプリケーションの切り替えコストが低くなって作業しやすくなります。普段⌘+tabで遷移もよくやっ

Windows10 + PowerShell + OpenSSH + Vagrant + Virtualbox + Visual Studio Code + Git で作るWebアプリケーション環境構築VagrantPowerShellWindows10VisualStudioCode はじめに これはVisual Studio Code Advent Calendar 2016の21日目の記事です。 この構成を作ると、ブラウザ上で動くIDEのCloud9やNitrous.ioのようなUIで開発出来きます。必要なアプリケーションがVisual Studio Code(以下VSC)とブラウザ(Edge, Chromeなど)だけになるのでプログラミング初心者の方にもおすすめです。 これまでのWindowsのWeb開発ではコマンドプロンプト + Teratermなんかを使って開発してきました。し

2016年10月現在、KarabinerはmacOS Sierraでは動かない、のでSierraに移行していない人が結構多いぽい。 macOS SierraでKarabinerが動かなくて困っている人に贈る代替ソフトウェアという記事が上がっていたのでそれを参考に⌘英かなとdefaultsでKarabinerで使っていた機能を設定してみたので共有。 ⌘英かなの設定 ⌘英かな2.1.0からキーリマップ機能が追加されて、複数キーのリマップが可能になりました。 Commandキー単発打ちで英数/かなの切り替え 複合キーのスワップ Karabiner-Elementsは現在、単発キーの置き換えだけど、⌘英かなは複合キーのスワップができる。 defaults でkey repeat を設定する Macのdefaultsでkey repeatを環境設定から選べる速度以上の速度を設定できます。 termi

Rails5と同時にリリースされたTurbolinks5についてまとめてみます。 前に書いたturbolinks-classicの記事はこちら (Turbolinksをオフしないためにやった事)。 READMEの翻訳は（未完成）Turbolinks 5 のREADME.mdを日本語訳してみるを参照してください。 Features ページ間の遷移をXHR化し、bodyだけを変えることでレンダリングコストを下げる。js, cssの読み込みを最小限にする。 1度訪れたことのあるページに再度訪れるときにキャッシュから前回の表示を一度表示し、その間にリクエストを送り、レスポンスが返ると最新の状態を表示する(プレビュー) 戻るボタンなどで1度訪れたことのあるページに遷移するときにキャッシュがあればリクエストなしに遷移する。 Railsに依存しなくなったので、他の言語でも使用可能に。 ついでにjQuer

Macでdotfilesやアプリケーションの設定のバックアップをどうやって管理してますか dotfilesとは .zprofile, .gitconfig, .bashrc など先頭に.がつく設定ファイル。 今までほかの人はどうやって管理してたか qiitaでdotfiles タグを検索すると幾つか出てきます。 dotfilesをgithubに置く dotfilesを管理しよう ミニマルに始めるDotfiles自動化計画 その多くは githubで管理する gitのrepositoryの中にdotfilesを配置する シンボリックリンクを貼るscriptを作成する という流れです。 このやり方でももちろん出来ますが、 dotfileが増えるたびに自分でコミットする必要がある 初心者に教えるにはある程度説明が必要になる などの問題があります。 Mackupで管理する Mackupでは Dro

Rspec/Capybara で poltergeist や capybara-webkit を使ってJavascriptを含めたテストを行っている場合にランダムにテストが失敗することがある。(Random fail) ###主な原因の一つは テストの実行中にAjaxを発生させてAjaxが完了する前にテストが終了し次のテストが同じDBを参照しようとした時に起こる。 この問題の一つの解決策は Ajaxが終了していることをテストの最後に確認すること。 THOUGHTBOT, INC. の記事に一つの解決策を紹介している。 ソースコードはこちら # spec/support/wait_for_ajax.rb module WaitForAjax def wait_for_ajax Timeout.timeout(Capybara.default_wait_time) do loop until

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Turbolinks 3こそがRailsの未来 かもしれない。 追記 2016/2/22 と書いてたけど実現しない感じになってきました。 現状のTurbolinksは Turbolinks classic とリポジトリ名が変更され、新たにTurbolinks5の開発が進められることになったようです。 背景にはiOSやAndroidとのCompatibilityを高めるためみたい。 Turbolinks3で目玉として導入される予定だったPartial ReplacementxはViewの遷移の責務がTurbolinksが持つことになり複雑

Deprecated Turbolinks 2.5.2 から Turbolinks本体にプログレスバーの機能が追加されたのでそちらを使用するのが一般的になりそうです。3.0.0からはデフォルトで使用される予定。 詳しくはTurbolinksのREADMEで。 nprogress-rails 自社サービスのBOOTH.pmで@geta6が実装して良かったので共有します RailsのViewに簡単にプログレスバーを追加出来るgem Youtube likeなプログレスバー Turbolinksとの相性がよい Youtubeのプログレスバー Turbolinksを使っててよく起こる問題 Turbolinksを使っているとTurbolinksで遷移したのか、ページが切り替わったのかわかりずらい ので、Javascriptでeventを書く際にreadyなのかpage:loadなのかを意識するのが大

fetchReplacement失敗時は再度レンダリングされ, landingの状態になる。 よく出てくるおまじない $(document).on 'ready page:load', -> これはjqueryが提供する'ready'とTurbolinksが提供する'page:load'の両方で定義すること。 非Turbolinks遷移時は'ready'で発火。 Turbolinks遷移時は'page:load'で発火の両方をカバーするという意味。 Turbolinksをサポートしていないブラウザでも'ready'が発火するので安心。 jquery-turbolinks gem 'ready'triggerにpage:loadを追加してくれる機能を提供。 Trigger tips 通常、page:changeでaddEventListenerしてはいけない。 fetchHistoryの際に

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?