まずはじめに、「内言」と「外言」という言葉をご存知だろうか。心理学で用いられる用語で、それぞれ次のように説明される。 内言: 発声を伴わずに自分自身の心のなかで用いる言葉 外言: 外に向って発せられ，他人との相互交渉の用具としての機能をもつ音声化した言葉 内言(ないげん)とは - コトバンク 外言(がいげん)とは - コトバンク わたしたちは普段日本語で考え、日本語で話し、日本語を読み書きしていると思っているが、実は頭の中で使っている言葉と、外の世界で音や文字として実体を得た言葉の間には違いがあるのだ。 頭の中にある考え、思いは内言として組み立てられる。内言は人それぞれの独自の形を持つ。圧縮と省略が頻繁に起こり非文法的に組み立てられる。 文章を書いたり誰かと話したり、外の世界に自分の言葉を出力するとき、そこに内言から外言への翻訳が起きる。これを普段わたしたちは〈言語化〉と呼んでいる。外言は

ふわっと考えていることの書き起こし。 最近、Angularのゼミのようなものを作りたいと思っている。 目的はいくつかあって、Angularのコントリビューターを増やしたいし、Angularについて日本各地でしっかり話せる人を増やしたいし、まだ僕一人しかいない日本のAngular GDEも増えてくれるとうれしい。 つまり、仕事で使いこなしたいとかそういう次元を越えて、Angularへの愛に突き動かされる同志を増やしたい。 しかしそういった人物をどのように見つければいいのか全くわからず、いろいろと考えている。 最初からそんな状態の人はいないだろうという前提に立って、僕が導き手にならないといけないだろうなとは思っている。 ただ、愛は他人が何かしてどうこうなるものでもないので、モチベーションというか素質というか熱量というか、そういう「心」的なものは育てられないと思う。 教えられることといえば知識と

いつもの読後メモです。 今回読んだのはダニエル・コイル著の「THE CULTURE CODE」の日本語訳版。 THE CULTURE CODE 最強チームをつくる方法 作者: ダニエル・コイル,楠木建出版社/メーカー: かんき出版発売日: 2018/12/03メディア: Kindle版この商品を含むブログを見る この本は「チームの文化」というそこにあるのは確かなのに実体がつかめないダークマターのようなものに焦点を当てる。 実在の成功しているチーム、失敗しているチームへのインタビューや調査、そして多くの心理学的、社会学的実験のデータから、成功するチームのつくり方を明らかにしていく。全体を通して非常にエビデンス重視になっている。 感想 ここ最近で読んだ本の中で一番面白かった。 これからチームを作る人、チームを任された人、あるいは自分のチームが十分に成功していないと感じる人には、この本をぜひ読ん

オリジナルはこちら medium.com 基本的にコードサンプルなどはオリジナルを参照してください。この記事では込み入った事情の部分だけを日本語で補足します。 tsconfig.jsonの準備 tsconfig.jsonの module 設定は、TypeScript内で記述したモジュールのimport/exportをどのように解決するかを指定します。 Angular CLIのデフォルトでは module: es2015 を指定しているので、静的な import ... from はそのまま残しますが、import() はサポートしていません。 tsconfig.jsonで module: esnext を指定すると、import() をJavaScriptにそのまま残すようになります。 import() がサポートされたブラウザ上であれば、webpackを通さなくてもそのままブラウザ上でモ

有言実行しなきゃね... ちょっと来月の頭くらいまでに、「本当にAngularは学習コストが高いのか？」っていう内容のブログを書くので、書いてなかったら怒ってください— lacolaco / Suguru Inatomi (@laco2net) 2019年1月24日 この記事では、「学習コストが高い」と評されがちなAngularについて、本当にその学習コストは高いのかということについて紐解いていきます。 先に言っておきますが、ReactやVueをはじめとする他のフレームワークとの比較はしません。また、なかなか本題に入らない回りくどい文章になる予定なので、予めご了承ください。そして筆者はAngularが大好きです。Angularが好きな人間が書いたポジショントークであることは前提として読んでください。 そもそも学習コストとは何だ？ まずはじめに、「学習コスト」って何だ？っていうところから始め

次世代Webカンファレンス、お疲れ様でした！ nextwebconf.connpass.com ありがたいことに2015年に続き、フロントエンドのセッションで登壇させてもらいました。 楽しかったですが、やはり80分のなかで話せることは限られますね... 次世代らしい話を求める期待に応えられたかはわからないですが、僕個人としては「まだ話せたな」というのは正直なところですね。 kobaさん、kazuponさん、takanoripeさんとはまたじっくり話したいです。 動画はYouTubeにアップロードされています。 www.youtube.com 内容の振り返りはひとりでやっても仕方ないので、当日に備えて用意していたネタ帳を一部公開してみます。 Webアプリケーション開発における "当たり前" の水準の変化 ちょっとだけ話せたネタ 型がある開発は当たり前になってきた 状態管理というものを気にする

表題のとおり、GCE上にMastodonのインスタンスを立てたけど、なんだかんだ試行錯誤で4日くらいかかったので自分のために記録を残す。 立てたインスタンスは https://activitypub.lacolaco.net。ひとり用に作ったので新規ユーザーは作成できない。 アカウントは https://activitypub.lacolaco.net/@lacolaco。mstdn.jpからのお引越し。 参考にしたのは以下のドキュメント。Googleでいろいろ調べると2017年ごろの記事が多く、いまではやらなくていい無駄やいまだとやらないといけない不足があったので苦労した documentation/Docker-Guide.md at master · tootsuite/documentation · GitHub documentation/Production-guide.md

こんにちは。 この記事ではAngular CDKの次期アップデートで提供される、 drag-and-drop 機能を紹介します。 執筆時点ではまだnpmパッケージとして公開されていないので、一般に利用できるまでにはもうしばらくかかりますが、 もし早く使いたい方は、次のコマンドで開発版ビルドをインストールしましょう。 なお、開発版ビルドですので自己責任でお願いします。 $ yarn add angular/cdk-builds CDK drag-and-drop drag-and-dropはその名のとおり、UI上でのドラッグアンドドロップ操作をサポートするものです。 @angular/cdk/drag-drop パッケージから提供される DragDropModule をインポートすると、次の2つのディレクティブ、コンポーネントが利用できます。 cdkDrag ディレクティブ cdkDragデ

愚痴。 最近特定の技術やライブラリ、ツールなどに対して、「自分には合わなかった」のような発言をする人をよく見かける。 ちょっと前だと「○○はクソ」のような直接的なdisが目立っていた気がするので、少しは丸くなったつもりなのかもしれないが、 Angularというひとつの技術のユーザーコミュニティを主催する僕としては余計に迷惑だ。 もっと慎重になれ medium.com AirbnbがReact Nativeを使うのをやめた記事、これは本当に偉い。 技術選定を行い、結果的にマッチしなかった、というレポートには、最低限次の項目が必要だと考えている。 開発の目的 選定理由 マッチしなかった理由 このどれが欠けてもいけない。単に言葉遣いが柔らかいだけでdisと変わりないどころか、下手するとFUDにすらなり得る。 FUD - Wikipedia FUD（英: Fear, Uncertainty and

追記 型安全にCSSのオブジェクトを書きたいというだけならNgStyleとcsstypeを使うだけでもよさそうだ。 github.com emotionを使うことによる利点は、 CSSクラスにシリアライズされるので、テンプレート中で評価対象が文字列となり、Change Detectionのパフォーマンス上で有利 くらいなものか。 今日の境界遊び。CSS in JSをAngularでやりたかった。 常識のある方は真似しないほうがよい。 今回使ったのは https://emotion.sh/. Angularで時々困るのはstylesの中にデータバインディングを置きたいケース。 たとえば、フォームの入力に応じて動的にフォントサイズを変えるようなケースを考える。 emotionの css 関数は、与えたCSSスタイルシートをシリアライズしてユニークなCSSクラス名に変換してくれる。 Angula

DISCLAIMER: これは本当にただのメモ書きで、これがベストプラクティスだとかいう話ではないので、同じようなことを考えてる人いたら今度議論しましょうよ、って程度の話の種。 GraphQLを使うべきスポット、RESTfulが好ましいスポットについて今日ぼんやり考えていて、なんとなく言語化ができる気がするので文字起こししてみる。 Backend for UsecaseとBackend for Resource バックエンドのAPIには2種類あって、 「データ」を構成する「リソース」を提供するもの アプリケーションの「ユースケース」がもつシナリオのなかで登場する「データ」部分を埋めるためのもの を区別することが必要そう、と思っている。 まず前者を Backend for Resource (BFR)と呼ぶことにする。これはわかりやすくて、これはまさしくRESTfulそのもの。 RDBやそう

AngularコアチームのStephen Fluin氏が、こんなブログ記事をあげている。 https://fluin.io/blog/property-has-no-initializer-and-is-not-definitely-assigned TypeScript 2.7から導入された、クラスプロパティの初期化をチェックするstrictPropertyInitializationオプションの話だ。 tsconfigのstrictPropertyInitialization オプションを有効にすると、undefinedを許容していないプロパティがプロパティ宣言時あるいはコンストラクタで初期化されていないときにコンパイルエラーになる。 これをstrictNullChecksオプションと併用することで、明示的に T?あるいは T | undefinedという宣言をしない限りかならず初期化

こんにちは、lacoです。 Angularの次のマイナーアップデートで、久しぶりに新機能らしい新機能が増えます。 その名もRouter Scrollerです。 長くAngularを使っている人には涙が出るほど嬉しい待望の機能です。 この記事ではRouter Scrollerの紹介と、来週のbeta.1まで待てない！今すぐ試してみたい！という奇特な方のために、最新のビルドで試す方法も紹介します。 Router Scroller Router Scrollerは、Angular Routerにスクロールに関連する機能を与えるものです。 Router Scrollerを使うと、次のようなことができます。 ブラウザバックしたときに遷移前のスクロール位置に復元する #foo のようなフラグメント付きのURLで、対応するIDを持つ要素まで自動でスクロールする どちらも、静的なHTMLページであればブラ

最近落合陽一氏の本を数冊読み、あっさりとファンになってしまった。 おそらく彼の思想や野望に触発されたんだろうと思うが、その理由を自己分析してみるメモ書き。 落合氏は一貫して「日本」という国をベースにしている。 彼のスキルがあれば日本にこだわらなくてもアメリカやヨーロッパで十分活躍できるし、個人として大きく成功できるだろうと思う。 なのになぜ日本に貢献しようという軸がぶれないんだろうと疑問に思っている。 もし万が一、落合氏の目にこのブログが止まったら、そのモチベーションの源泉が知りたい。 わからないなりに想像してみたのが、彼のモチベーションは貢献そのものなんじゃないだろうか。 つまり、日本というコミュニティが好きで、そのコミュニティへの貢献そのものが目的なんじゃないか。 見返りや報酬のための手段ではなく、目的化した貢献がそこにあるんじゃないかと思った。 そうしてみると、規模は小さいながらオー

この記事ではAngularDart/Flutterの文脈で新しいコンポーネント設計パターンとして広まりつつあるBLoCパターンを、Angularの語彙で理解し、実装する方法を紹介する。 BLoCパターンとは BLoCとは、Business Logic Componentの略である。 BLoCを使ったアプリケーションの実装パターンをBLoCパターンと呼ぶ。 まず誤解を招きそうなポイントとして、この"Component"はReactやAngularなどでいうところのビューを構築する"コンポーネント"ではない。 一般的な単語としての、アプリケーションを構成するひとかたまりの要素という意味の"Component"なので誤解しないこと。 対比するレベルとしては、"UI Component" vs "Business Logic Component"のようになる。 BLoCは複数の環境向けにアプリケー

常に危機感がある。これは自分が博士号も修士号も持っておらず、第三者から観測可能な価値を持っていないどころか、コンピューターサイエンスの教育を受けたことがないくせにソフトウェアエンジニアとして専門職に就いて生計を立てているのが根底にあるかもしれない。 プログラマーとしてインターネット上で活動しはじめたころからずっとアカデミーに対して劣等感がある。 自分がやっていることなんて高度な教育を受けた人間がちょっと参入してくればあっという間に淘汰されるだろうし、常に風前の灯火っていう感じがしてる。 正直なところ1年後に自分に仕事があるかどうかまったく自信がない。半年後すら曖昧だ。3年後なんてまったく想像もできない。 何をしても足りてない気がするから、毎日生き急いでいるような気がする。 本当は価値がないかもしれないけども、少なくとも価値があると錯覚してもらうために、常に可能な限り優れた成果を出してそれを

Webにかぎらず、アプリケーションというのは作って終わりではなく、その後も継続して改修・改善されていくケースが多い。受託で開発して納品して終わりというケースでも、納品した先にメンテナンスする人がいる。 この記事では、Angularアプリケーションの開発において、いかにメンテナンス性を維持して、持続可能なプロジェクトを構成するかについての個人的な見解をまとめる。 フレームワークを邪魔しない Angularアプリケーションのメンテナンスにおいて、いちばん重要なことはいかにAngularのアップデートを阻害しないかという点に尽きる。 これはAngularに限った話ではなくフレームワークと呼ばれるものを使うなら常に必要なことであるし、 アップデートが定期的に降ってくることが決まっているAngularであればなおさらである。 アプリケーションの一番根幹となる部分の鮮度が落ちれば、その他の部分はそれに

Angular 2から6までの主要な進化をまとめた記事を読みたい。— Masahiko Sakakibara (@rdlabo) 2018年4月20日 逆にIonicの変遷が知りたいですね 最近Stencilも出てきたしその辺の絡みとか俯瞰的に見てみたいです— lacolaco (@laco2net) 2018年4月20日 rdlaboさんがしっかりGW明けにIonicの記事書いてくれたので、僕もAngularのv2からv6まで、3年弱の変遷についてまとめます。 Ionic 2 から 4 への、この2年間の進化を振り返る 前Angular v2時代 Angular v2 オフラインコンパイル AngularJSへの .component 逆輸入 Animation API Language Service Angular CLIとスタイルガイド SystemJSからwebpackへ For

Shadow DOMのHayato Itoさんと、Custom ElementsとEventTargetについてちょっと議論できた話。（ありがとうございました！） 先日、Web Components Cafeで登壇しました。 slides.com 最近自分の中でCustom Elementsの盛り上がりが強くて、 単純なPresentationalなコンポーネントだけじゃなく、 ある程度の機能を備えたマイクロアプリケーションとしてのCustom Elementsをどう設計・運用するか、みたいなところを考えてる。 イベントの話 Custom Elementsで分断されたマイクロアプリケーション間でコミュニケーションしようとすると、当然それらの外側にある何かを介するしかなくて、 現実的には何かしらのイベントバスが必要になる。パッと思いつくのは window をイベントバスとして使うケース。 こ

lacolaco.hatenablog.com 「レールに乗っておいたほうがいいんじゃないの？」という声もあるとおもうので、 そもそもなぜAngularはHTTPクライアント機能をスタックとして提供しているのか、というところについて。 AngularJSには$httpが必要だった 遡ってAngularJSの話をすると、AngularJSにも組み込みのHTTPクライアント機能があり、そのAPI名からよく$httpと呼ばれています。 https://docs.angularjs.org/api/ng/service/$http 現在ではこんな感じのAPIになっています。 // Simple GET request example: $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response)