はてなブックマーク

今朝へんな夢を見ました。深夜に石作の古い建物の中で、必死に古いGitリポジトリーのメンテナンスを行っていました。😅 日々の開発でGitは空気のように使っていますが、Gitは長年使っている開発者でも数年に1つ、新しいコマンドに出会えます。 Gitの特徴 バージョン管理システムとしては、Git以前にもSubversion(SVN)やCVS、RCSなどありました（全て使った事があります😅）。一番の特徴は分散管理（分散リポジトリー）だと思います、これについてはWikipediaやネットの情報を参照して下さい。 もう1つの特徴は、たくさんの機能がある事だと思います。SVNやCVSはシンプルで一端コミットしてしまったものは変更できませんが、Gitはコミットログの変更や複数のコミットをまとめたりなど、希にしか使わないですが、プログラマーにとって便利な機能が多数あります。それらが健全なリポジトリーをメ

少し前から Tailwind CSS が話題になっているようです。 しかし数年前にTailwind CSSの記事を読んださいに、MUI（以前はMaterial UIと呼ばれていました）で見栄えの良いボタンは<Button variant="contained" color="primary">ボタン</Button>と書けば済むのに、 Tailwind CSSでは<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">ボタン</button> などと長々と書かなければいけないを知り。これはUIデザインやCSSが得意なWebデザイナー向け

昨年くらいからRemixというReactベースのフレームワークが話題になってきています。日本語の記事もあったので読んでみましたがRemixの素晴らしさが理解できませんでした。ところが最近Remix公式ページのブログData Flow in Remixを読んでビックリました！ このビックリ感は、17年前にRuby on Railsのコードを見たときに似ています。Ruby on Rails同様にコードが圧倒的に少ないのです！ Remix Blog “Data Flow in Remix” より Data Flow in Remixブログのざっくりした解説 Remix公式ページのブログData Flow in Remixを読んでもらうのが良いのですが、ざっくりと内容を知りたい方向けに、ざっくりとした解説を書きます。 1. Action→State→View ReactやVueのようなフロントエン

ReactやVueを使っているフロントエンド開発者と話していて、会社の上司たちはフロントエンドの重要性を理解していないと言っていました。 現在では、フロントエンド開発者（フロントエンド・エンジニア）という言葉が使われていますが、Ruby on Railsが生まれた2004年くらいはフロントエンド開発者という言葉は使われていなかったと思います、対義語のバックエンド開発者も使われていなかったかもしれません。 フロントエンドとは 英語版WikipediaにFrontend and backendという項目があります、ここにあるフロントエンドの関心事（Front-end focused）を意訳すると。 HTML, CSS等のマークアップ言語、JavaScriptやjQueryなど AJAX SPA、 React, Angular, Vue.jsなど Webの性能、画面がスムースに動く レスポンシブ

以前Apollo GraphQLに入門してみた記事を書きましたが、勉強は終わったのでReactアプリ用バックエンドを作りはじめました。 バックエンドにはいくつかの機能があり、nginxのリバースプロキシを前段に入れる事にしました。nginxはリバースプロキシに良く使われているので設定ファイルは簡単に書けると思っていましたが、半日もかかってしまいました。😅 バックエンドの構成 今回のバックエンドは、Reactアプリ向けのサービスを提供する（GraphQL）APIサーバーと、ユーザーやデータの管理を行う管理画面Webアプリの2つの機能があります。データやユーザー管理情報等はPostgreSQLのデーターベースに格納しています。 そして、APIサーバー、管理画面は別のDocker Contenerで動きます。データーベースのPostgreSQLは開発環境ではDocker Contener、本番

ひょんな事から以前書いた React開発環境ではなぜかコンポーネントが2回描画される、しかしconsole.logは1回しか表示されない が解決しました！ もう一度問題を確認しましょう 以下のコードを実行すると、ブラウザーの画面にはcount = 1と表示されるように思えます。 （このコードはReactの設計思想からすると望ましくないコードですが、初心者は書いてしまいがちなコードです。） import React from 'react' let count = 0 export const App: React.FC = () => { count++ console.log(`count: ${count}`) return (<div>count = {count}</div>) } しかし、なぜかcount = 2と表示されます！ ただし、プロダクション（本番）用コードではcoun

以前、Redux libraryは今後どうなるの？ を書きましたが、今年5月にRecoilというステート管理ライブラリーが現れました。これはFacebookの実験的（Experimental）なプロジェクトでまだ正式なものではありませんが、React用のステート管理に新たなプレイヤーがあらわれた事は確かです。 2020年10月7日更新： MobXのサンプルコードも追加しました。 2020年のReact用ステート管理方法 現在、React用のステート管理方法には以下のものがあります ReactのuseStateのみを使う 元祖Redux Redux Toolkit ReactのuseReducerとContextを使う MobX Recoil サンプルコードと解説 ここでは、UseState, Redux toolkit, useReducer + Context, Recoil, MobX

世の中たいへんな状況ですが、 EY-Office では淡々と新しいReact教育のテキストを書いてます。 今回のテキストは現在の主流になりつつある、以下のような技術を使ったReactの入門テキストです。 React Hooks メイン (React.Componentクラスは解説程度) TypeScriptメイン Redux章には、Redux Toolkit を採用 これらの技術は、先端の技術を採用するネット企業等では既に使われている技術なので、ネット上には充分に情報があり楽勝かなと思ったのですが、案外苦労しました。 Create React App 2年前に 作りながら学ぶ React 入門 を書いた時には、まだ Create React App はありませんでした。Webpack, Babel, ESLint … をインストールし、設定ファイルを書かないと React が試せない状況で

私がReactと関わるきっかけになった、約2万行のjQueryで書かれたフロントエンドをReactに置き換えた開発の事を書きます。 このフロントエンドを含むアプリは社内教育システムでバックエンドはRuby on Railsで書かれフロントエンドはjQueryで書かれたSPA(Single Page Application)でした。最初に開発した会社がメンテナンスを行わなくなったのでメンテナンスを引き継ぎました。 お客様からのいくつかの機能追加・変更の要求が出ていたのですが、jQueryはイベントへの対応と画面再描画の両方が必用で、かつイベント対応の仕方が統一されてなくシンプルな変更もコード修正は大変でした。またこのフロントエンドはコピペの山で一つの機能要求でも変更個所が複数になりメンテナンスコストが高くなっていした。 そこで、Reactを使う事をお客様に提案したところ承認されReactへの

今年のWWDC(Appleの開発者向け大規模なカンファレンス)での大きな話題は、Appleが開発した新しいプログラミング言語 SWift ではないでしょうか。 従来、iPhone,iPad (iOS) や Mac (OS X)アプリの開発は主に Objective-C 言語で行われていましたが、これ補完する、または置き換える新しい言語として Swift が登場しました。 そもそも Objective-C 言語とは なぜ Apple が新しい言語を発表(開発)していたのかを知るためには、まず現在使われている Objective-Cに付いて少し書きたいと思います。 Objective-Cは1983年にブラッド・コックス氏によって開発されました。そして、Appleを去ったスティーブ・ジョブズが起こしたNeXT社が開発したコンピューター NeXT Computer のOS NextSTEP の主要

誕生20周年記念日に Ruby2.0.0 がリリースされ、その少し後に Ruby on Rails 4.0.0 beta1 がリリースされました。 当然、これからRuby/Railsを使う方のためのEY-OfficeのRuby on Rails教育のテキストも Ruby 2.0.0, Rails 4.0.0 に対応しました !! Ruby 2.0.0 は従来の Ruby 1.9.3 と高い互換性を持ちながら、パラメータ引数などの便利な新機能が追加されたりオープンクラスを安全に使えるようにする実験的な機能が入ったりとより素晴らしいRubyになっていると思います。 また地味ですが、日本語を含むコードはUTF-8で書けばマジックコメントが要らなくなったのは教育者的にも、たぶん初めてRubyを学ぶ人にも嬉しい変更だと思います。 Rails 4.0.0 も、従来の Rails 3.2.X と極端な変

Ruby on Rails が話題になり、ブームだった頃を覚えていますか？ 人により違うかもしれませんが 2006年〜2009年くらいでしょうか。 EY-Officeも、そのブームの中で Ruby, Ruby on Railsの教育を始めました、弊社以外にも何社もが Ruby や Ruby on Rails の教育を始めました。 写真は ”http://www.flickr.com/photos/tomascaspers/119212744/ から Ruby on Rails の教育はブームに乗って、流行ったでしょうか？ 少なくとも弊社では No でした。現在、Ruby, Ruby on Railsの教育を行っている会社はそれほど多くないところ見ると、他の会社もビジネス的にそれほど成功しなかったのではと思います。 あのブームは何だったのか いま振り返ると、あの当時 Ruby, Ruby o

昨年、一昨年と新人にRuby言語とRuby on Railsを教えました。偶然にもどちらの会社ともにRuby on Railsのプログラマーを育てるのが主目的ではなく、Webアプリケーションやソフトウェア開発の入門としてRuby言語やRuby on Railsを選んでいたのです。 それぞれの会社がどうしてRubyやRuby on Railsを選んだのかは違う理由があると思いますが、実際に教育を行う側として Ruby, Ruby on Rails を教える事に付いて書きたいと思います。 写真は ”http://www.flickr.com/photos/kaplaninternational/3659783179/ から Rubyを教えるメリット Rubyはオブジェクト指向言語である 最近はオブジェクト指向は当たり前になりつつあります、もちろんオブジェクト指向でさえあれば全てはバラ色という事

EY-Officeは20年以上にわたる スタートアップ企業や新たにネットビジネスを始める方向けのネットサービスやアプリ作成 の実績があります。例えばあなたがビジネスを始める際に、仕様や必要な技術が明確でない状態からサービスやアプリを作成したいと考えた時の力になれるでしょう。 お客様と一緒にサービス・アプリのアイデア・実現性の検討からはじめ、実際に動くプロトタイプを作りサービス・アプリの開始までをトータルで支援いたいます。 またEY-OfficeではスマフォやWebフロントエンドのみならず、サービス・アプリを支えるサーバーサイドのソフト開発や、AWSに代表されるようなクラウド環境の構築・運用も一社で出来るのでお客様の負担 を大幅に減らせます。 サービス・アプリの立ち上げ成功後重要になる懸案として、開発者不足の問題があります。 人材獲得競争が激しくなる今こそ検討して頂きたいのが、EY-Offi