サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
uehaj.hatenablog.com
Reactベース静的サイトジェネレータGatsbyの真の力をお見せしますという記事をQiitaに書きました。 「「爆速サイト」が必要ない場合でも得られるGatsbyの利点」などを書いています。 GraphQLは良いものだ。 導入 記事を書いた理由 「静的サイトジェネレータ」って何? 一般的な利点 Gatsbyとは わたしの疑問 Gatsbyの特徴と動作 Create React App(CRA)の動作 一般的なSSR(Next.jsなど)の動作 Gatsbyの動作 Gatsby動作をもう少し詳しく ビルド時GraphQL こんなこともできる 「ビルド時GraphQL」の結果をブラウザ内のReactコンポーネントにも渡す Gatsby Plugins コード例 Gatsbyビルドのようす まとめ 「爆速サイト」が必要ない場合でも得られるGatsbyの利点 JAMSatckアーキテクチャ1実装
これはG*Advent callender 2017の24日の記事です。 昨日23日の記事は mshimomuさん、明日25日の記事は未定です。 完全に一年ぶりの記事です。みなさん、いかがお過しでしたでしょうか。今年Qiitaとかに書いた記事を別にまとめましたが、わたしはReactを良く書いてた一年でした。 本記事のテーマは以下の2つです。 GrailsのWeb APIサーバのCRUDビューをいかに簡単に作るか RESTfulサーバ/任意のサーバに対する強力なダッシュボード・管理コンソール開発用ReactコンポーネントライブラリであるAdmin-On-Restの紹介、使い方 もくじ もくじ 去年までのあらすじと今年の方針 Admin-On-Restとは何か Admin-On-Restのデモ動画 Admin-On-Restの特記すべき点 REST Clientによるデータソースの抽象化 Ad
これはG*Advent callender 2016の記事です。 前日は@Ziphilさんの記事でした。明日は@ hikariruさんの記事です。 去年のG*Advent Calendarでは、本ブログではReact Meets Grails 〜ReactはエンタープライズSPAの夢を見るか?〜 - uehaj's blogと題して、バックエンドを「GrailsのRestサーバ」+「React SPAによるフロントエンド」という組合せをボイラープレート(雛形)として実装してみました。 今年もこの路線を拡充してみます。 背景 解決策 作ったもの 実行方法 去年からの進展 特徴 つまりどういうこと? JSONSchemaとは 今後やりたいこと まとめ 背景 GrailsにはScaffold機能、すなわちCRUD操作を行なうためのWeb画面の自動生成機能があり、確かに便利なものではあるのですが、
これはG*Advent callender 2016の記事です。 前日はわたし@uehajの記事でした。明日は@mshimomuさんの記事です。 はじめに Parrotブランチのコンパイル 警告 do-whileループ Java8構文 ラムダ式の記法 細かい話1 細かい話2 メソッド参照の記法 コンストラクタ参照 default method Java7対応 try-with-resources 新しい演算子たち 等値演算子(===, !==) エルビス代入演算子(i.e. ?=) !in, !instanceof 参考資料 まとめ はじめに Groovyの構文解析処理には初期からANTLRというパーサジェネレータのバージョン2(antlr2)が長らく使われてきたのですが、最近Daniel SunさんによってANTLRのバージョン4(antl4)への書き直しがなされました。この新パーサーは
これはG*Advent callender 2016の記事です。 前日は@Ziphilさんの記事でした。明日はまた私@uehajの記事です。 出オチでタイトルオンリーです。 すごいHaksell楽しく学ぼう(以降H本)にも書かれているように、リストはモナドとみなすと「非決定計算」をあらわすものとみることができます。 つまりたとえばリスト[1,2,3]を「1か2か3のどれか」、リスト[2,3]を「2か3のどれか」をそれぞれあらわすもの、と見るってことです。その上で、[1,2,3] * [2,3] という操作を何等かの方法で表現すれば、「1か2か3のどれか」に「2か3のいずれか」を掛けたものという意味になり、結果として「1*2,2*2,3*2,1*3, 2*3,3*3]すなわち「1か4か6か3か6か9のどれか」を得ることができます。 さて、Groovyのリスト(厳密にはIterable)には、
先日のJGGUG WSでのLT資料を公開します。「JWT」は、ついジェーダブリュティーと読んでしまいましたが、正しい発音は「jot(ジョット)」だそうです。 Use JWT access-token on Grails REST API from ちなみに、上記デモで使用する認証スキームBearerというのがあるんですが、この由来は「持参人払い小切手(Bearer Check)」から来てるそうです*1。「持参人払い小切手」とは、自筆の署名(サイン)がしてある小切手を銀行窓口に持ってきたならば、その持ってきた人が誰であるかにかかわらず、現金を支払う、というものだとのことです。たしかにBearer認証スキームと同様ですね。 Web API: The Good Partsposted with amazlet at 16.05.19水野 貴明 オライリージャパン 売り上げランキング: 38,55
TL;DR JDK(tools.jar)中、com.sunパッケージ配下に、javacが内部的に使っている「com.sun.tools.javac.util.List 」が含まれており、これは不変データ構造としてのリストのように(Cons セルベースのリストのように)利用できる。 はじめに ScalaのコードをGroovyやJavaなどに移植する際に、いつも悲しい思いをするのが不変データ構造に基づいたリスト処理ライブラリが見あたらない、ということでした。JDKの標準コレクションライブラリには、Scalaのscala.collection.immutable.Listのような、不変データ構造を用いて実装されているリストがありません。 ここで言う不変データ構造に基づいたリストとは、JDKのjava.util.Collections.unmodifiableList()等で取得できるような変更禁
本記事は、G*Advent Calendar 2015の24日目の記事です。 昨日は it__sseiさんの記事で、明日はtouchez_du_boisさんの記事です。 (2016/1/22追記) id:bati11_ さんが、本記事で作成しているボイラープレートコードのReact部分について、ステップバイステップの詳細かつ丁寧な以下の解説記事を執筆されております。是非併せてご参照ください。 bati11blog.hatenablog.com bati11blog.hatenablog.com bati11blog.hatenablog.com 目次 目次 はじめに 背景 作成するサンプルアプリケーション 方針 フォルダ構成 JS関係の用語について 準備 Grails側 Grailsアプリ context rootの変更 JSコンパイルの呼び出し web.xmlの設定 文字化け対策 Rea
警告 以下でのモジュールの説明はトランスパイラであるBabel 5,6で動作を確認した振舞いについての記述です。2015年11月現時点で、ECMAScriptのモジュール仕様策定範囲は、本来の全体範囲のまだ一部であるとのことです。その状況でのBabelの実装は、良く言えば先行的、悪く言えば将来そのままである保証はなく、現時点でも他のES2015をサポートする処理系との間での相互運用の保証はありません。また、現時点でBabelのモジュール機能を使うこと自体にリスクがあるという意見もあります。CommonJS側からBabelが生成したモジュールをCommon JSモジュールとして読み込もうとしたときの互換の問題として、Babel5で可能だったことがBabel6では利用不可になる、といったことも起きているようです。 そこらへんを含めて解説されているこちらの資料が参考になります。 (2015/11
Reactとは 設計をとりもどす Reactでやってみる Elm-HtmlとReactの対応 ReactはFRPか? ReactはFPか? FPとOOPの真の関係 まとめ 追記 Reactとは Reactは、Facebookが開発した、JSのUIフームワークもしくはライブラリです。Reactが提供する中核機能は以下です。 イミュータブルなUIビルダー Virtual DOMによる効率的更新 上記に付随するイベントハンドラ群を編成していくための方法論 React単体ではコールバックの組合せで、Fluxの一部として使用するとオブザーバーパターンで実現 効用は、再利用性と保守性・可読性向上です。特に、Reactで作成した画面部品のコンポーザビリティが高く、細粒度のUI部品利用の発展充実が期待されます。作りは通常のJSクラスライブラリであり、覚えたりすることは多くありません。 設計をとりもどす R
この両者は、似ているようでいて、基本的には別モノです。表にしてみます。 Groovyのクロージャ java8のlambda式 導入時期 2003年 2014年03月 ローカル変数へのアクセス 読み書き可能 実質的にfinal(変数そのものに対しては読み込みのみ) 実装方法 Closure型のインスタンス MethodHandle, invokeDynamic.. 型推論の根拠 Closure<T>のTで返り値、@ClosureParamsで引数 FunctionalInterface(SAM型) 記法 { 引数 -> 本体 } { 本体 } {-> 本体 } (引数) -> { 本体 } (引数) -> 式 () -> { 本体 } 暗黙の動的なthis delegateにより実現 - 性能 ローカル変数をenclosingするため間接参照にするためのオーバーヘッドあり 性能上のオーバーヘ
昨日、渋谷JVM d-cube.connpass.com にて発表させていただきました。 アテンドいただきましたコミュニティのみなさん、ビズリーチさま、聞いてくださったみなさん、ありがとうございました。また懇親会ごちそうさまでした(たこ焼たいへんおいしくいただきました!)。 他の言語の発表も聞くのも、またLTもたいへん楽しく参加させていただきました。名だたる皆さんと並んでの発表ということで、気おくれもし、準備とかパネルとか大丈夫かとか不安でしたが、サポートいただきなんとか乗り越えることができました。それとすばらしい会場ですねあそこはまた。起伏あり浜辺もあるし。 以下発表資料であります。 Shibuya JVM Groovy 20150418 from Junji Uehara 発表時に、会場のみなさんに「Groovy使っている人どのぐらいいますかー」と聞いたところ、非常に多くの割合*1で使
身と蓋がナッシング まず身も蓋もないことをいうと、結局はCPUの命令セットとして動く言語ですからして、大差はないんですよね。 でもこういうことを言うのは、「どうせ宇宙なんて原子の集合だろ!」という小学生なみです。 なので言わない。でもその認識を捨ててもならない。魔法はないです。地続きではあるのです。 「命令型」か「関数型*1」か さてその上で、問うべき問いが、「命令型」か「関数型」であるならば、関数型に明確な優位性があらわれます。イミュータブルデータ。いい響きですね。map,filter,...いいですね。for禁止、シビれます。いいか、おまえら! forは禁止だ! 了解しました軍曹殿! この利点はあきらかで、かつ入手することが比較的容易です。scalaでもJava8でもreactでも、それなりに努力すればそれなりのものが手に入りそうです。 このレベルではOOPとの対立項はないんじゃないか
「リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべブログ ♨」という記事があり、興味深いのでElmのリアクティブプログラミングで似たようなことをやってみました。 全画面表示はこちらから。 コードは以下で、プロジェクト全体はこちらにあります。 import Text import Window import Time import Mouse import List import Signal import Graphics.Element(..) import Graphics.Collage(..) import Color(..) import Signal(Signal,(<~),(~)) import AnimationFrame -- マウスの座標をCollageの座標に変換するいつもの関数 mousePos : Int -> Int -> Int
Grails/Groovyのサイトは、静的サイトジェネレータで作成されています。Groovyサイトは去年ぐらいからそうだったのですが、最近Grailsもそうなりました*1。 しかしこの静的サイトジェネレータの名前がわかりません。ソースコード上は、単に「generator/SiteGenerator.groovy」で、独立したgithub projectもありません。groovy-websiteやgrails-static-websiteというプロジェクトの一部としてそれぞれでカスタム化されて機能しているというだけです。 SiteGenerator.groovyは139行ぐらいでやってることもシンプルで自明なので、独立にするまでもない、ということでしょうか。処理の実行はgradleタスクでguild.graldeに書いてあります。 gradle genrateSite こんな感じでsite/
Elmにおけるインポートの方法を説明する。本説明が対応するElmのバージョンはElm 0.14かそれ以降、ただしインポートの仕様は今後大きく変更される可能性がある(今後についての関連情報)。 他モジュールで定義され、エクスポートされた識別子(型コンストラクタ、値コンストラクタ、型エイリアス、定数・関数など)は、インポートすることで始めて使用可能となる。Elmのimportは、この点でJavaのimportと異なっている。Javaではimport宣言をしてもしなくてもFQCNを指定すればクラスパスにあるすべての識別子を参照可能であるが、Elmでは、インポートの明示的な宣言をしない限り、他モジュールの識別子を利用できない(ただし、いくつかのモジュール・識別子はデフォルトでインポートされている。後述)。 インポートの宣言をする方法は大きく分けて2つある。 Qualified Import Ope
このブログ記載のElmの記事で、動作するElmの実行プログラムをiframeで貼っていたのですが、いくつも動かなくなっていたので、動くようにしました。 ちなみに動かなくなっていた原因は2つありました。 Elmのコード共有サイトshare-elmの仕様がかわった。対処としてはリンクをはりなおしました。 elm-runtimeへのリンクが、src="http://elm-lang.org/elm-runtime.jsで参照していたのが、404エラーになるようになったため。そうなった正確な理由は不明ですが、バージョンに依存するはずなので、いずれにせよこの絶対リンクが上手くうごかなくなるのはあきらかでした。対処としてはgithub-page上の固有のものにリンクをはるようにした。 たいへん失礼しました。以下のとおりです。今はすべて動くはずです。 「プログラムでシダを描画する」をelmで描画する -
Grailsのドメインクラスにおいて、いくつかの候補の数値のいずれか、というフィールドを作成し、scaffoldで生成した画面からCRUD操作したいとします。 簡単なのは、こうですね。 class Domain { Integer something static constraints = { something inList:[1,2,3] } } しかし数値フィールドに量としてではなく個々の値にそれぞれの意味がある場合、たとえば、腹の状態を表すフィールドの値として、 1: はらぺこ 2:まんぷく 3:こばらがへった を表現するようなものだったとします。このとき、すくなくとも、Scaffoldの画面上では数値ではなく意味のわかる文字列で表示したり選択入力させたいわけです。しかしデータそのものを文字列にするのもDB上の表現をそうしたくないのでいやだとします*1。 ということでenumの出
これは2014年のG*アドベントカレンダーの第23日目の記事のつもりでしたが、12時すぎてしまいましたorz。 HaskellやScalaやRustには型クラスという言語機能があり、個人的感想として、理解が難しかったものの一つです。いわく、インターフェースのようなもの。いわく、オープンクラスのようなもの、など。 わからなければ作ってみるのが一番です。なのでGroovyで型クラスを実装してみました。 ソースはこちら。 ただし実用的なものではなく、学習用です。また実装したのは概念のコア部分のみで、言語によって詳細は異なることに注意ください。 型クラスとは何か 型クラスとは、多相型・ジェネリクス型の型引数(仮型引数)に対して、「ある型に対して可能な操作の集合」を、制約として与え、またそれらの操作が可能であるという保証を、「クラスの継承関係」とは無縁の方法で与えるものです。 別の言い方で言うと、「
この記事は「Elm Advent Calendar 2014」の23日目として書きました。 今回は、作成したElmのライブラリをElmコミュニティライブラリに公開してみます。公開するブツは以前こっそりと作成してすでに登録していた「IntRange」というもので、たいしたものじゃございません*1。今回Elm 0.14に対応させた上で、elm-packageコマンドの登録手順を整理してみます。 プロジェクトを作る 何はともあれ、公開したいプロジェクトを作ります。 ディレクトリを作ってそこにcdしてelm-packageを実行。 $ mkdir IntRange $ cd IntRange $ elm-package install Some new packages are needed. Here is the upgrade plan. Install: elm-lang/core 1.0
Grailsでコントローラの試験を、モックを使わず実際の通信を使って試験したいケースがある。たとえば、Rest APIを開発する場合、Rest APIはブラウザを使用しなくても簡単に呼び出せるものなので、ユニットテストがしたいです。もちろんGrailsにはコントローラをモックで試験する機能があるが、rest APIを呼び出せば済むものを、偽物ですます必然性があまりないと個人的には思う(もちろん試験実施時のtomcat立ち上げ下げのための実行時間を短縮したい、などの関心はありうるが)。 このためにはファンクショナルテストを実行する必要がある(unit/integrationではtomcatはたちあがらない設定になっている)。しかし、Grailsでは、ファンクショナルテストは単にtest/functional配下にテストコードを置くだけでは実行できず、一つなんでもいいからファンクショナルテスト
Grails開発でdockerを使用するためのDockerfileを、備忘録兼ねて晒します。開発中に使うものです。運用用は、別のものになるでしょうかね。 onesysadmin/docker-grailsを元にして、Proxy設定を行い、いくつかの工夫をしております(プロキシ設定については、Dockerコンテナに透過的プロキシ設定とかをすれば不要なのかも)。 利点 Grails開発でDockerを使う利点は以下の通り。 準備が簡単。Grailsのインストールはもとより、gvmやJDKのインストールすらいらない。grails wrapperなどもいらないわけだ。 環境を汚さない。JDKのインストールをしなくてすむ、Postgresなどをコンテナに封入して連携する、などによる。 設定含めた開発時実行環境を開発メンバー間でシェアできる Dockerはlinuxなので、開発環境windows、実行
GrailsアプリケーションではGSPのビューは以下の方法で表示できます(他にもあるかも)。 コントローラーアクションの結果として表示 renderで指定したビュー コントローラ名とアクション名から定まるデフォルトのビュー ビューを直接表示する URLMappingでURLパターンからビューを指定する しかし、「ビューだけ」の、GSPの集合だけで機能するサイトは作れません。JSPで言うと、JSPだけのServlet無しのWebサイト、あるいはPHPの埋め込みページだけで構成するようなサイトが作れないのです。 そうなのはおそらく意図的であり、それがWeb開発の黎明期にアンチパターンとしてみなされてきたので排除されているのでしょう。上記のような制約「GSPはコントローラからの画面遷移を経て表示される」があることのメリットは、GSP内で使用できるデータの由来を明確化できること、そして、画面遷移の
「ヒアドキュメント」をなんで「ヒアドキュメント」っていうかを調べてみた。以下が参考ページ。 http://programmers.stackexchange.com/questions/143918/why-is-it-called-a-here-document http://ja.wikipedia.org/wiki/%E3%83%86%E3%83%AC%E3%82%BF%E3%82%A4%E3%83%97%E7%AB%AF%E6%9C%AB#.22Here_is.22_.E3.82.AD.E3.83.BC わかったこと 上記の内容が正しいとして、読み取ったことは以下のとおり。 「ヒアドキュメント」は「"Here is" document」から来ている。 "Here is"は何からきているかというと、昔テレタイプ端末にあった「Here is」というキー。 「Here is」キーは何かと
(関連記事:http://uehaj.hatenablog.com/entry/2015/10/18/155107 ) JCUnitというすばらしいJUnitの拡張があります。 JCUnit ブログ JCUnit JCUnitではペアワイズ法もしくはオールペア法という手法でテストデータを生成します。ペアワイズ法というのは、試験対象コードに対するパラメタのバリエーションテストをする際に、より少ないテストデータの件数で、効率良くバグを発見できるというテストデータの選択技法だそうです。(オールペア法の記事) 折角の自動テストならば、テストデータも自動生成してしまおうと。しかし単純に総当たりだと、指数的にケース数が増えて手に負えなくなるので、統計学に基づいて、優れているとされている方法でデータを選択し実用的には十分なようにしよう、ということです。 JCUnitはJUnit4のRunner(@Run
Elmでやってみるシリーズ10:ボールの衝突回数で円周率を計算する id:wamanさんからひっそりと提案もらいましたので、やってみました。 今回は記事自身もElmで書きましたので、github-pages上の全画面(github上のソース)からどうぞ。 以下にも一応hatena blog記事中にiframeで表示しましたが、スクロールや文字の配置が読みにくい・もしくはJSの実行速度が遅いです。hatena blogではiframeにseamless属性つけられば良いのだが。iPhoneのSafariでもiframe中だとうまくいきませんが、全画面なら動くようです。 ソースはこちら。 PiByBall.elm module PiByBall where import Window import Debug (log) import Graphics.Input (input, Input,
Elmでやってみるシリーズ9: JavaScript連携(JSのevalを呼ぶ) Elmではportというものを使用することで、ElmからJSの機能を呼ぶことができます(→Ports: Communicate with JS)。 portは名前がJS側に公開されるSignalです。 portには入力portと出力portがあります。 入力port: JS→Elm Elm側では予約語portを指定して、型宣言のみをする。 port evalIn : Signal String JS側から以下のいずれかの方法で値を送り込む。 初期値を Elm.embed()などでマップで与える。 <Elm.embed()などが返すelmモジュール>ports.ポート名.send()で送る。 出力port: Elm→JS Elm側では予約語portを指定して、Signalを定義する。 port evalOut
https://jira.codehaus.org/browse/GROOVY-6623 で対処されました。 % groovysh Groovy Shell (2.4.0-beta-1, JVM: 1.8.0_11) Type ':help' or ':h' for help. ------------------------------------------------------------------------------------------------------------------------------- groovy:000> def x = 3 ===> 3 groovy:000> x ===> 3 groovy:000> :set Preferences: interpreterMode=true groovy:000> x.class ===> class
Elmでやってみるシリーズ8: 赤いドットが回っているかのように見えるけど実は直進運動な錯視 少し前に、「このくるくる回る白いドット、実は真っ直ぐ往復してるだけなんだぜ」という記事がありましたが、これをElmで再現してみようというのが今回のネタ。 (追記 id:waman さんが数学解析をされています→回転しているようにみえる白いドットは単振動している - 倭算数理研究所 。このネタ自体もwamanさんのTwitterで知ったんですけどね。) 以下は画面キャプチャ(静止画)。 コードは以下のとおり。 fps_=96 -- 画面更新頻度 pi2 = 2*pi -- 2π deg30 = pi2 / 360 * 30 -- 30°をラジアン単位に変換 -- 1秒間にfps_回、1増加するシグナル値。 ticks : Signal number ticks = foldp (\it acc->a
次のページ
このページを最初にブックマークしてみませんか?
『uehaj's blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く