ā€»ć‚¹ćƒžćƒ›åƾåæœćÆć—ć¦ć¾ć›ć‚“ć€‚

Reactć§ę—¢å­˜HTMLć®ćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć‚’å—ć‘å–ć‚‹ć®ć«ComponentPropsWithRef恌ä½æ恈悋ļ¼Ÿ

ć‚«ćƒ†ć‚“ćƒŖćƒ¼: JavaScript

č©±é”Œć«ćŖć£ć¦ć„ć‚‹ć®ć‚’å…Øē„¶ćæ恋恑ćŖ恄悓恠恑恩态ēš†ćŖć‚“ć‹ć‚‚ć£ćØč‰Æć„ć‚„ć‚Šę–¹ć‚„ć£ć¦ć‚“ć®ļ¼Ÿć€€ć“恆恄恆恓ćØ恗ćŖ恄恮ļ¼Ÿ

恂ćØć‚³ćƒ¼ćƒ‰ćƒć‚¤ćƒ©ć‚¤ćƒˆćŖćć¦ć”ć‚ć‚“ć­ā€¦ā€¦ć€‚

å…ˆć«ć¾ćØ悁

  • TypeScript 恮話
  • ę—¢å­˜ HTML 恻ćØć‚“ć©ćć®ć¾ć¾ć®ć‚³ćƒ³ćƒćƒ¼ćƒćƒ³ćƒˆć§ć€ęœ¬ę„ć® props ć‚’ćć®ć¾ć¾å—ć‘å–ć‚ŠćŸć„å “é¢
  • props: React.ComponentPropsWithRef<'span'> ćæćŸć„ć«ć‚„ć‚Œć‚‹ć£ć½ć„
  • ćƒ‰ć‚­ćƒ„ćƒ”ćƒ³ćƒˆć«ćÆč¼‰ć£ć¦ćŖ恄
  • 定ē¾©ć‚’čæ½ć£ć‹ć‘恦ćæćŸć‘ć©ćŸć¶ć‚“ćć£ćØ大äøˆå¤«ćć†
  • ć‚ˆćć‚ć‹ć£ć¦ćŖ恄恧恙

恓悓ćŖé¢Ø恫恗恦ä½æć£ć¦ć„ć‚‹ć€‚

export type HtmlProps<T extends ElementType> =
  React.ComponentPropsWithRef<T>;

export type HtmlComponent<T extends ElementType> =
  React.FC<HtmlProps<T>>;

å¾Œč€…ćÆęƎ回ę›øćć®ćŒé¢å€’ć§čæ½åŠ ć—ćŸć‘ć©ć€ćŖć„ę–¹ćŒć‚³ćƒ¼ćƒ‰ćÆčŖ­ćæ悄恙恄恋悂恗悌ćŖ恄怂

恓悌悒ä½æć£ć¦ć€ē‰¹å®šć®ć‚Æćƒ©ć‚¹åć‚’ä»˜ć‘ćŸć ć‘ć®HTML要ē“ ć‚’čæ”ć™ć‚³ćƒ³ćƒćƒ¼ćƒćƒ³ćƒˆć®ä¾‹ć€‚

export const NiceButton: HtmlComponent<'button'> = (props) => (
  <button
    {...props}
    className={`NiceButton ${props.className || ''}`}
  />
);
<NiceButton>Nice恧恙恭ļ½ž</NiceButton>

悂恆恔悇恄複雑ćŖć‚³ćƒ³ćƒćƒ¼ćƒćƒ³ćƒˆć®ä¾‹ć€‚

interface NiceCheckboxProps extends HtmlProps<'input'> {
  label: string;
}

export const NiceCheckbox: React.FC<NiceCheckboxProps> = (props) => {
  const { className = '', label, ...inputProps } = props;
  return (
    <label className={`NiceCheckbox ${className}`}>
      <input {...inputProps} className="NiceCheckbox-input" type="checkbox" />
      <span className="NiceCheckbox-label">{label}</span>
    </label>
  );
};
<NiceCheckbox
  checked={agreed}
  label="ćƒŠć‚¤ć‚¹ć§ć‚ć‚‹ć“ćØć«åŒę„ć—ć¾ć™"
  onClick={onAgreeClick}
/>

堓面

ć»ć¼ HTML

äøŠć«ę›øć„ćŸć€ć‚ć‚ć„ć†ć€Œć»ćØć‚“ć©ćŸć ć® HTML 要ē“ ćŖć‚“ć ć‘ć©ć”ć‚‡ć£ćØčæ½åŠ ćØ恋ēµ„ćæåˆć‚ć›ćØć‹ćŒć‚ć£ć¦ć€ę–¹ć€…ć§ä½æć†ć‹ć‚‰åå‰ć‚’ä»˜ć‘ć¦ē°”å˜ć«ä½æć„ć¾ć‚ć—ćŸć„ć€ć‚ˆć†ćŖå “é¢ć§ć™ć€‚

CSS ćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚Æćæ恟恄ćŖ惎ćƒŖ恠ćØę€ć†ć‚“ć ć‘ć©ć€React 恧悄悋恋悉恫ćÆęƎ回ć‚Æćƒ©ć‚¹åę›ø恏悓恘悃ćŖćć¦ć€ćć®ć‚Æćƒ©ć‚¹åć‚’ä»˜ć‘ć¦ćć‚Œć‚‹ć‚³ćƒ³ćƒćƒ¼ćƒćƒ³ćƒˆć‚’ä½æć†ć‚ˆć†ć«ć—ćŸć„ćŖćØ怂

HTMLåŒę§˜ć®åž‹ćŒę¬²ć—ć„

ä¾‹ćˆć° <input> 恠ćØ value ć‚’ęŒć£ć¦ćŸć‚Šć™ć‚‹ć˜ć‚ƒćŖ恄恧恙恋怂<span> 恫ćÆćŖ恄恘悃ćŖć„ć§ć™ć‹ć€‚ćć†ć„ć†ć®ć‚’ć€č£œå®Œć§å‡ŗć—ćŸć‚Šåž‹ē¢ŗčŖć§å¼¾ć„ćŸć‚Šć—ćŸć„ćŖćØę€ć£ć¦ćŠć‚Šć¾ć—ćŸć€‚

č¦‹ć¤ć‘ćŸ

React.prop ć¾ć§å…„åŠ›ć—ćŸćØć“ć‚ć®č£œå®Œć§å‡ŗć¦ććŸå€™č£œć®äø­ć‹ć‚‰ćć‚Œć£ć½ć„恮悒ēœŗ悁恦悋ćØćć«č¦‹ć¤ć‘ć¾ć—ćŸć€‚

React å…¬å¼ć‚µć‚¤ćƒˆć§ę¤œē“¢ć—恦悂å‡ŗ恦恓ćŖ恄态ćØę€ć£ćŸć‘ć© React 惗惭ć‚ø悧ć‚Æ惈恘悃ćŖćć¦ @typed ć®ć ć‹ć‚‰å½“ćŸć‚Šå‰ć‹ć€‚ć‚ć‚ŠćŒć¦ćˆć€‚

定ē¾©ć‚’čæ½ć£ć¦ćæ悋

ć“ć“ć‹ć‚‰å…ˆćÆTS初ē“šč€…ćŒć†ć‚“ć†ć‚“å”øć£ć¦ć‚‹ć ć‘ć§ć™ć€‚čŖ°ć‹ć«ę•™ćˆć¦ć»ć—恄ā€¦ā€¦ć€‚

ćŖ恊 @types/jest ć®ćƒćƒ¼ć‚øćƒ§ćƒ³ćÆ 24.0.12 恧恗恟怂

ComponentPropsWithRef

type ComponentPropsWithRef<T extends ElementType> =
    T extends ComponentClass<infer P>
        ? PropsWithoutRef<P> & RefAttributes<InstanceType<T>>
        : PropsWithRef<ComponentProps<T>>;

ćø态ćøćˆćƒ¼ā€¦ā€¦ć€‚

ElementType

ć¾ćšć‚ø悧惍ćƒŖć‚Æć‚¹ć®ę–¹ć€‚

type ElementType<P = any> =
    {
        [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never
    }[keyof JSX.IntrinsicElements] |
    ComponentType<P>;

恓悌ćÆ恂悌恠ćŖ态IntrinsicElements ć«ć‚ć‚Œć°ćć®åž‹ļ¼ˆ'a' ćŖ悉 <a> ē”Ø恮 propsļ¼‰ć‚’ä½æć†ćžć£ć¦ć“ćØ恠ćŖ怂

IntrinsicElements

interface IntrinsicElements {
    // HTML
    a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
    abbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    address: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    area: React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>;
    article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
ā€¦

ē©¶ę„µēš„恫ćÆć“ć“ć®å³å“ React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> 悒ęÆŽå›žć‚³ćƒ”ćƒšć—ć¦ä½æ恈恰ä½æ恈悋悓恠ćŖ怂恗恟恏ćŖ恄恑恩怂

JSX 恧ę›ø恄恟 <span> ćØ恋悒 VS Code 恧 Ctrl + ć‚ÆćƒŖ惃ć‚Æ恙悋ćØå‡ŗć¦ćć‚‹ć®ć‚‚ć“ć„ć¤ć€‚

ComponentClass

ć“ć£ć”ćŒć‚ć‹ć‚‰ćŖ恄怂

interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
    new (props: P, context?: any): Component<P, S>;
    propTypes?: WeakValidationMap<P>;
    contextType?: Context<any>;
    contextTypes?: ValidationMap<any>;
    childContextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

<infer P> ćØ恮ēµ„ćæåˆć‚ć›ć§ć€React.Component ē¶™ę‰æ恮ć‚Æćƒ©ć‚¹ć‚’äøŽćˆć‚‹ćØč‰Æć„ę„Ÿć˜ć« props ć®åž‹ć‚’ęŠ½å‡ŗć—ć¦ćć‚Œć‚‹ē³»ć‹ćŖćØę€ć£ćŸć‚“ć ć‘ć©ćć‚“ćŖ恓ćØćŖć‹ć£ćŸć€‚

恔ćŖćæ恫 infer ć£ć¦ć“ć“ļ¼ˆäøŠć® ComponentPropsWithRef 恮ćØ恓ļ¼‰ć§åˆć‚ć¦č¦‹ć¾ć—ćŸć€‚

PropsWithRef

Indent Hadouken ćæ恌恂悋怂

/** Ensures that the props do not include string ref, which cannot be forwarded */
type PropsWithRef<P> =
    // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}.
    'ref' extends keyof P
        ? P extends { ref?: infer R }
            ? string extends R
                ? PropsWithoutRef<P> & { ref?: Exclude<R, string> }
                : P
            : P
        : P;

ćŸć¶ć‚“å¤§äøˆå¤«ć§ć—悇恆

ēŸ„悉悓恑恩怂

ćØć‚Šć‚ćˆćšå‹•ć„ć¦ćÆć„ć‚‹ć€‚ć†ćƒ¼ć‚“ć”ć‚ƒć‚“ćØē†č§£ć—恦ä½æ恄恟恄ā€¦ā€¦ć€‚

ćŠć—ć¾ć„

VS Code 恧 F12 悒駆ä½æ恗恦čæ½ć£ć‹ć‘恦ćæć¾ć—ćŸć€‚ć»ć‚“ćØć¹ć‚“ć‚Šć€‚

悈恏悏恋悉ćŖ恄恑恩ćØć‚Šć‚ćˆćšå‹•ć„ć¦ć„ć‚‹ć£ć½ć„ć®ć§ć“ć®ć¾ć¾ä½æćŠć†ć€‚č¶£å‘³ćƒ—ćƒ­ć‚ø悧ć‚Æćƒˆć ć—ć€ć¾ć‚ćƒ¼ćć®ć†ć”TSåŠ›ćŒäøŠćŒć‚Œć°å®Œå…Øē†č§£ć§ćć‚‹ć§ć—悇恆怂

恂ćØćć†ć„ćˆć°ć“ć®ćƒ–ćƒ­ć‚°ćƒ†ćƒ¼ćƒžć‚‚ę›“ę–°ć—ć¦ć€TypeScript ć®ćƒć‚¤ćƒ©ć‚¤ćƒˆć‚‚å…„ć‚ŒćŸć„ćŖ恂怂

Edge恧iframeå†…ć§ć‚¦ć‚§ćƒ–ćƒ•ć‚©ćƒ³ćƒˆćŒä½æ恈ćŖ恄恋悂恗悌ćŖć„å•é”Œć‚’čøć‚“恠怂

ć‚«ćƒ†ć‚“ćƒŖćƒ¼: CSS

꜀čæ‘čøć‚“ć å•é”Œć§ć™ć€‚

  • Edge
  • 複ꕰ恮 <iframe>
  • ćƒ•ćƒ¬ćƒ¼ćƒ ćÆåŒę™‚ć«ē”Ÿęˆ
  • åŒć˜ć‚¦ć‚§ćƒ–ćƒ•ć‚©ćƒ³ćƒˆć‚’čŖ­ćæč¾¼ć‚€
  • äø€éƒØć®ćƒ•ćƒ¬ćƒ¼ćƒ ć§ć—ć‹ć‚¦ć‚§ćƒ–ćƒ•ć‚©ćƒ³ćƒˆćŒå‡ŗ恦恓ćŖ恄

ćƒ‡ćƒ¢ćØć‚³ćƒ¼ćƒ‰ćÆ恓恔悉怂

3ć¤ć®ćƒ•ćƒ¬ćƒ¼ćƒ ć®ć†ć”ć²ćØć¤ć§ć—ć‹ć‚¦ć‚§ćƒ–ćƒ•ć‚©ćƒ³ćƒˆćŒęœ‰åŠ¹åŒ–ć•ć‚Œć¦ćŖć„ę§˜å­ć€‚

Edge恮DevTools恧惍惃惈ćƒÆćƒ¼ć‚Æ見恦悋ćØ态CSSćƒ•ć‚”ć‚¤ćƒ«ćÆčŖ­ćæč¾¼ć¾ć‚Œć¦ć„ć‚‹ć‘ć©ćƒ•ć‚©ćƒ³ćƒˆćƒ•ć‚”ć‚¤ćƒ«ćÆčŖ­ćæč¾¼ć¾ć‚Œć¦ć„ćŖ恄态ćØ恄恆ēŠ¶ę³ć¾ć§ćÆč¦³ęø¬ć§ććŸć€‚

č§£ę±ŗē­–

恩恆悄悉CSSćƒ•ć‚”ć‚¤ćƒ«ć®čŖ­ćæč¾¼ćæ完äŗ†ć‚’å¾…ć£ć¦ć‹ć‚‰ć€ćć®ć‚¦ć‚§ćƒ–ćƒ•ć‚©ćƒ³ćƒˆć‚’åˆ©ē”Ø恙悋éƒØåˆ†ć‚’å‡ŗåŠ›ć™ć‚‹ćØ問锌ćŖ恏ćŖć‚‹ę§˜å­ć€‚

ć¤ć¾ć‚Š onload ć§å¾…ć¤ć¹ć—ćØ怂

const elLink = document.createElement('link');
elLink.href = `https://fonts.googleapis.com/css?family=${family}`;
elLink.rel = 'stylesheet';

elLink.onload = () => render(); // <---

document.body.appendChild(elLink);

原因ćÆć£ćć‚Šć‚ć‹ć£ć¦ćŖć„ć‘ć©ć“ć‚Œć§ć†ć¾ćč”Œć£ć¦ć„ć‚‹ć‚ˆć†ć«č¦‹ćˆć‚‹ć€‚

処ē†ć®ęƒ³åƒć€‚

  1. ćƒ•ćƒ¬ćƒ¼ćƒ 1å‡ŗ力開始
    1. CSSćƒ•ć‚”ć‚¤ćƒ«čŖ­ćæč¾¼ćæ開始
    2. ć‚¦ć‚§ćƒ–ćƒ•ć‚©ćƒ³ćƒˆåˆ©ē”Øć®ćƒ†ć‚­ć‚¹ćƒˆå‡ŗ力
    3. č©²å½“ćƒ•ć‚©ćƒ³ćƒˆćŖ恗ćØ恗恦čØ˜ę†¶ (A-1)
  2. ćƒ•ćƒ¬ćƒ¼ćƒ 2å‡ŗ力開始
    1. CSSćƒ•ć‚”ć‚¤ćƒ«čŖ­ćæč¾¼ćæ開始
    2. ć‚¦ć‚§ćƒ–ćƒ•ć‚©ćƒ³ćƒˆåˆ©ē”Øć®ćƒ†ć‚­ć‚¹ćƒˆå‡ŗ力
    3. č©²å½“ćƒ•ć‚©ćƒ³ćƒˆćŖ恗ćØ恗恦čØ˜ę†¶ (A-2)
  3. ć„ćšć‚Œć‹ć®ćƒ•ćƒ¬ćƒ¼ćƒ ć§
    1. CSSćƒ•ć‚”ć‚¤ćƒ«čŖ­ćæč¾¼ćæ完äŗ† (B)
    2. č©²å½“ćŖć—ć®ćƒ•ć‚©ćƒ³ćƒˆć«åˆč‡“ć€ćƒ•ć‚©ćƒ³ćƒˆćƒ•ć‚”ć‚¤ćƒ«čŖ­ćæč¾¼ćæ開始 (C)
    3. ćƒ•ć‚©ćƒ³ćƒˆćƒ•ć‚”ć‚¤ćƒ«čŖ­ćæč¾¼ćæ完äŗ†
    4. ćƒ†ć‚­ć‚¹ćƒˆå†ęē”»

恓恮Bå‰ć«AćŒę„ć‚‹ćØCćŒć”ć‚ƒć‚“ćØå‹•ć„ć¦ćŖć„ę°—ćŒć—ć¾ć™ć€‚ēŸ„悉悓恑恩怂

Edge…

č€ć„å…ˆēŸ­ć„EdgeHTMLć•ć‚“ć®ćŸć‚ć«ć©ć‚Œć ć‘ć‚³ć‚¹ćƒˆć‹ć‘ć‚‹ć¹ćć‹ę‚©ć‚€ć€‚

ćŠć¾ć‘

ćŠć¾ć‘2

Google Chromeć§éŸ³å£°čŖč­˜ć™ć‚‹ä¾‹ć€‚

ć‚«ćƒ†ć‚“ćƒŖćƒ¼: JavaScript

ꄏ識恗ćŖ恄ćØ恙恐Twitter恫ę›ø恄恦ēµ‚ć‚ć‚Šć«ć—ć¦ć—ć¾ć†ć®ć§ć€ę°—č² ć‚ćšč»½ć„ę°—ęŒć”恧ę›øćć¾ć™ć€‚

č«øäŗ‹ęƒ…ć«ć‚ˆć‚ŠéŸ³å£°čŖč­˜APIć‚’č©¦ć—ć¦ć„ć‚‹ć‚“ć ć‘ć©ć€ć‚¦ć‚§ćƒ–ęؙęŗ–ć§ć‚‚ćć†ć„ć†API恌ęŗ–å‚™äø­ć§ć‚ć‚‹ć®ć«ę°—ć„ćć¾ć—ćŸć€‚ē¾ēŠ¶ć®Google Chromeć§ć‚‚ćć“ćć“å‹•ćć‚ˆć†ć§ć™ć€‚ć›ć£ć‹ććŖ恮恧ļ¼ˆChrome恧ļ¼‰å‹•ćć‚„恤悒ē”Øę„ć—ć¦ćæć¾ć—ćŸć€‚

ginpei/speech-recognition-example

ć¾ć å®Ÿéؓēš„ćŖę©Ÿčƒ½ć ć—ć€å®Ÿéš›å‹•ćć‚‚å¾®å¦™ćŖćØ恓悍ćŖć®ć§ć€ć‚„ć£ć±ć‚ŠGooglećŖ悊Microsoft AzurećŖ悊恮APIä½æć†ę–¹ćŒč‰Æ恕恝恆怂ē„”ꖙꞠ恂悋恗怂

åŸŗęœ¬ēš„ćŖć‚³ćƒ¼ćƒ‰

// ä½œęˆ
const sr = new window.SpeechRecognition();

// 完äŗ†ę™‚恫ēµęžœć‚’č”Øē¤ŗ
sr.addEventListener('result', (event) => {
  const text = event.results[0][0].transcript;
  console.log(text);
});

// 開始
sr.start();

éŸ³ćŒę­¢ć¾ć‚‹ćØ音声čŖč­˜ć‚‚č‡Ŗå‹•ć§ēµ‚äŗ†ć™ć‚‹ę§˜å­ć€‚

å„ćƒ–ćƒ©ć‚¦ć‚¶ćƒ¼

Chrome

ęŽ„é ­č¾žä»˜ćć® webkitSpeechRecognition ć§å‹•ćć€‚ć¾ć å®Œē’§ć§ćÆćŖć„ę§˜å­ć€‚

恂ćØ恝恆恄恈恰ꘔ <input x-webkit-speech> ćæ恟恄ćŖć®ć‚ć£ćŸćŖ恂态ćæ恟恄ćŖčØ˜ę†¶ć€‚

Firefox

ć¾ć åƾåæœć—恦恄ćŖć„ć€‚ć‚³ćƒ¼ćƒ‰ćÆ mozSpeechRecognition 恫åƾåæœć—ć¦ćŠć„ćŸć®ć§ć€å®Ÿč£…ć•ć‚ŒćŸć‚‰ćć£ćØå‹•ćć“ćØ恧恗悇恆怂ēŸ„悉悓恑恩怂

Edge

ć”ć‚‡ć†ć©ęœ€čæ‘é–‹ē™ŗē‰ˆćŒå‡ŗ恟态äø­čŗ«ćŒChromium恮ꖰEdgećÆć¾ć å‹•ććŒå¾®å¦™ćŖꄟ恘恧恗恟怂

åŒć˜ webkit ęŽ„é ­č¾žćŖć®ć«å‹•ć„ćŸć‚Šå‹•ć‹ćŖć‹ć£ćŸć‚ŠćÆå›°ć‚‹ćŖ恂怂恄悄今ćÆ開ē™ŗē‰ˆć ć‹ć‚‰č‰Æ恄悓恠恑恩怂

Safari

試恗恦ćŖ恄恑恩ęœŖåƾåæœć‚‰ć—恄怂

JPEG/Exifē”»åƒć®å›žč»¢ęƒ…å ±ć‚’å–ć‚Œć‚‹ć‚„ć¤ä½œć£ćŸć€‚

ć‚«ćƒ†ć‚“ćƒŖćƒ¼: JavaScript

ę–°å¹“ę˜Žć‘ć¾ć—ć¦ćŠć‚ć§ćØć†ć”ć–ć„ć¾ć™ć€‚ä½œć£ćŸć‚ˆć€‚

ć‚¤ćƒ³ć‚¹ćƒˆćƒ¼ćƒ«ć€‚

$ npm install @ginpei/exif-orientation

利ē”Øä¾‹ć€‚

import * as exif from '@ginpei/exif-orientation';
 
const orientation = await exif.getOrientation(fileOrBuffer);
console.log(
  `${orientation.rotation} degree,`,
  orientation.flipped ? 'flipped' : 'not flipped',
);

äøŠčØ˜ć®ć‚‚ć®ć§ćÆćŖć„ćŒå®Ÿč”Œä¾‹ć€‚

$ node from-node.js sample-images/090-flipped-5.jpg
Read image from: sample-images/090-flipped-5.jpg
Rotation: 90 degree, Flipped: true.

ꤜē“¢ć™ć‚‹ćØ恄恋恫悂ćŖåå‰ć®ć‚„ć¤ćØ恋恌複ꕰå‡ŗć¦ćć‚‹ć‚“ć ć‘ć©ć€å…ˆč”Œäŗ‹ä¾‹ć«åÆ¾ć™ć‚‹åˆ©ē‚¹ćÆē‰¹ć«ćŖć„ć§ć™ć€ćŸć¶ć‚“ć€‚

ä½œć‚ŠćŸć„ć®ć§ä½œć£ćŸę„Ÿć˜ć®ć‚„ć¤ć§ć™ć€‚ć”ć‚ƒć‚“ćØå‹•ććØę€ć†ć‘ć©ć€‚

Scoped package

åå‰ćŒå–ć‚‰ć‚Œć¦ćŸć‘ć©ä½œć£ć”ć‚ƒć£ćŸć—å¤‰ćˆć‚‹ć®ć‚‚ćŖ恂ćØę€ć£ć¦ć€č‡Ŗåˆ†ć®åå‰ “@ginpei” ä»˜ćć®å½¢ć§ć®å…¬é–‹ćØć—ć¾ć—ćŸć€‚

README恫悂ę›øć„ćŸć‘ć©ć€TypeScriptć®å “åˆćÆ --moduleResolution node 恮čØ­å®šćŒåæ…要恧恙怂ćø恈恝恆ćŖ悓恠态ēŸ„悉ćŖć‹ć£ćŸć€‚

ć‚Øćƒ©ćƒ¼ä¾‹ć€‚

src/index.ts:1:23 - error TS2307: Cannot find module '@ginpei/exif-orientation'.

1 import * as exif from '@ginpei/exif-orientation';
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error.

Exifä»•ę§˜

恓恔悉恮PDFć‚’å¤§ć„ć«å‚č€ƒć«ć—ć¦ć„ć¾ć™ć€‚ę„Ÿč¬ę„Ÿč¬ć€‚

ćØ恓悍恧Exifć¦ę—„ęœ¬ē™ŗē„„ć®č¦ę ¼ćŖ悓恠恭怂

åÆŒå£«ćƒ•ć‚¤ćƒ«ćƒ ćŒé–‹ē™ŗć—ć€å½“ę™‚ć®ę—„ęœ¬é›»å­å·„ę„­ęŒÆčˆˆå”ä¼š (JEIDA)ć§č¦ę ¼åŒ–

ē”»åƒć®å›žč»¢

ćØć‹ćć†ć„ć†ć®ćÆ态äø€åˆ‡ć—ćŖ恄恧恙怂čŖæęŸ»ć™ć‚‹ć¾ć§ć€‚

悄悋ćŖ悉Canvas恌č‰Æ恄恮恋ćŖ怂恄悄JPEG恮ē”»ē“ ęƒ…å ±ć®ä½ē½®ć‚’å›žč»¢ēš„ć«å‹•ć‹ć™ę–¹ćŒå†åœ§ēø®ć—ćŖ恄恋悉ē¶ŗéŗ—ćć†ć€‚

äø€ę™‚ēš„ćŖ悉CSSć§ć‚„ć‚‹ć®ć‚‚ę‰‹ć€‚ć‚ˆć— transform: matrix() ä½æ恊恆恜ļ¼

JPEG仄外

Exifć‚’ä»–ć®č¦ę ¼ć®ē”»åƒć«ć‚‚ä½æćˆć‚‹ć‚‰ć—ć„ć‚“ć ć‘ć©ć€JPEG恮ćæ恮åƾåæœć§ć™ć€‚見ćŖ恄恗怂

ćŠć—ć¾ć„

ęœ¬å¹“ć‚‚ć‚ˆć‚ć—ććŠé”˜ć„č‡“ć—ć¾ć™ć€‚

2018å¹“ć‚’ęŒÆ悊čæ”悋怂

ć‚«ćƒ†ć‚“ćƒŖćƒ¼: ę—„čؘ

ę—„čØ˜ć§ć™ć€‚

ć¾ćØ悁

ć¼ć”ć¼ć”ä½œć£ćŸćŖćƒ¼ć€‚

GitHub

GitHubćƒ—ćƒ­ćƒ•ć‚£ćƒ¼ćƒ«ćƒšćƒ¼ć‚ø恮Contributionsć®ć‚­ćƒ£ćƒ—ćƒćƒ£ć€‚ć¼ć”ć¼ć”č‰ē”Ÿćˆć¦ć‚‹ć€‚
GitHub恮1å¹“åˆ†ć®ę“»å‹•ēµęžœć€‚

č‡Ŗåˆ†ć®GitHubćƒ—ćƒ­ćƒ•ć‚£ćƒ¼ćƒ«ćƒšćƒ¼ć‚ø恧2018å¹“ć‚’é–‹ć„ć¦ć€ć“ć‚Œć™ć‚‹ć€‚

(() => {
  const year = 2018;
  const days = [...document.querySelectorAll('rect.day')]
    .filter(e=>e.getAttribute('data-date').startsWith(year));
  const counts = days.map(e=>e.getAttribute('data-count')|0);
  const sum = counts.reduce((s,c)=>s+c);
  console.log(`${year}幓${days.length}ę—„äø­ę“»å‹•ć—ćŸć®ćŒ${counts.filter(v=>v!=0).length}ę—„ć€åˆč؈${sum}å›žć€å¹³å‡${(sum/days.length).toFixed(2)}回ęÆŽę—„ć€‚`);
})();

2018幓365ę—„äø­ę“»å‹•ć—ćŸć®ćŒ196ę—„ć€åˆč؈1466å›žć€å¹³å‡4.02回ęÆŽę—„ć€‚

ä½œć£ćŸć‚‚ć®

Clock

1ęœˆć€‚ć‚¢ćƒŠćƒ­ć‚°ę™‚č؈ + ćƒćƒ¢ćƒ‰ćƒ¼ćƒ­ć‚æć‚¤ćƒžćƒ¼ć€‚

ę‰‹é ƒć«ä½æćˆć‚‹ć‚¢ćƒŠćƒ­ć‚°ę™‚čØˆćŒę¬²ć—ć„ćŖćØę€ć£ć¦ć€PCć®č„‡ć«ć‚¹ćƒžćƒ›ć‚’ē«‹ć¦ć¦ćć£ć”ć«ę˜ ć™ē”Ø恫怂

恩恆恛ćŖć‚‰ćƒ–ćƒ©ć‚¦ć‚¶ćƒ¼ć˜ć‚ƒćŖćć¦ć‚‚å‹•ćć‚ˆć†ć«ć—ć‚ˆć†ć‹ćŖćØę€ć£ć¦ć€å¾Œčæ°ć®Quick Note恧PWAć‚’č©¦ć—ć¦ć€ćć®å¾Œå°Žå…„ć—ćŸć€‚ēµęžœēš„恫Nuxt.js恌悈恗ćŖć«ć‚„ć£ć¦ćć‚Œć‚‹ć®ć§ć‚ć¾ć‚Šę°—ć«ć™ć‚‹åæ…要ćÆćŖć‹ć£ćŸć‘ć©ć€‚

恝恆态Nuxt.jsä½æć£ćŸć‘ć©ć‚ć‚“ć¾ć‚Šä¾æåˆ©ę©Ÿčƒ½ä½æć£ć¦ćŖć‹ć£ćŸć€‚History API悒ä½æ恆SPA悂GitHub Pages恠ćØä½æ恈ćŖ恄恗怂

Quick Note

2꜈怂ć‚Ŗćƒ•ćƒ©ć‚¤ćƒ³ć§ć‚‚å‹•ćē°”å˜ćƒŽćƒ¼ćƒˆć€‚å…„åŠ›å†…å®¹ćÆLocalStorag恫äæå­˜ć•ć‚Œć‚‹ć€‚

PWAć‚’ä½œć£ć¦ćæ恟恄ļ¼ćØę€ć£ć¦ä½œć£ćŸć‚„ć¤ć§ć™ć€‚ä¾å­˜ćƒ‘ćƒƒć‚±ćƒ¼ć‚ø悂äø€åˆ‡ćŖ恗怂ļ¼ˆ devDependencies ćÆć‚ć‚Šć¾ć™ć€‚ESLintćØ恋怂ļ¼‰

ćŖ悓ćŖć‚‰ć‚‚ć†ć”ć‚‡ć£ćØć“ć†ćƒŽćƒ¼ćƒˆć«ć‚æć‚¤ćƒˆćƒ«ć‚’ä»˜ć‘ć¦äæå­˜ćØć‹ć™ć‚‹ć‚ˆć†ć«ć—ć¦ć‚‚č‰Æć‹ć£ćŸć‹ć‚‚ć—ć‚ŒćŖć„ć€‚ć§ć‚‚ć¾ć‚ćć†ć„ć†ē›®ēš„恧ćÆćŖć„ć—ć€ä½œć£ć¦ć‚‚ä½æ悏ćŖ恄恠悍恆恋悉悈恗怂

Stop SNS

4꜈怂TwitterćØć‹ć®é–²č¦§ć‚’é˜»å®³ć™ć‚‹Chromeę‹”å¼µć€Firefoxć‚¢ćƒ‰ć‚Ŗćƒ³ć€‚

ć”ć‚‡ć£ćØꀝ恆ćØć“ć‚ć‚ć£ć¦ćƒ–ćƒ©ć‚¦ć‚¶ćƒ¼ę‹”å¼µä½œć£ć¦ćæ悈恆态ćØę€ć£ć¦ć€‚ē°”å˜ć«ä½œć‚Œć¦č‰Æ恄恭怂č‡Ŗåˆ†ć§ä½æć£ć¦ć¾ć›ć‚“ć€‚

ęœ¬ē·ØćØćÆ関äæ‚ćŖ恄悓恠恑恩态SVGć®å›³å½¢ć«å½±ć‚’ä»˜ć‘ć‚‹ć£ć¦ć®ć‚’å­¦ć‚“ć ć€‚ć“ć‚ŒćŠć‚‚ć—ć‚ć„ćŖ怂

ćŠå‰ć‚’ę¶ˆć™ę–¹ę³• for GitHub

6ęœˆć€‚ć©ć“ć‹ę‡ć‹ć—ć„ćƒžć‚¹ć‚³ćƒƒćƒˆć‚’č”Øē¤ŗ恙悋Chromeę‹”å¼µć€Firefoxć‚¢ćƒ‰ć‚Ŗćƒ³ć€‚ć‚øćƒ§ćƒ¼ć‚Æć‚¢ćƒ—ćƒŖ怂

Microsoft恌GitHubć‚’č²·åŽćØć„ć†å ±é“ć‚’å—ć‘ć¦ć€‚

ć¾ć•ć‹ć®ēŖ“ć®ęœć€ć‚„ć˜ć†ć¾ć®ęœć«ęŽ²č¼‰ć€‚

꜀čæ‘ā˜†1č©•ä¾”ä»˜ć‘ć‚‰ć‚Œć¦ć‚‹ć®ć«ę°—ä»˜ć„ćŸć€‚ä½•ć‚’ę±‚ć‚ć¦ćŸć£ć¦ć‚“ć ā€¦ā€¦ć€‚

DevTools z-index

6꜈怂 z-index ć‚’åˆ©ē”Ø恗恦恄悋要ē“ ćØćć®å€¤ć‚’é–‹ē™ŗč€…ćƒ„ćƒ¼ćƒ«ć‹ć‚‰äø€č¦§ć§ćć‚‹Chromeę‹”å¼µć€Firefoxć‚¢ćƒ‰ć‚Ŗćƒ³ć€‚

仕äŗ‹äø­ć®ęÆꊜ恍恧ę›øć„ćŸć‚³ćƒ¼ćƒ‰ć‚¹ćƒ‹ćƒšćƒƒćƒˆć‚’ć‚‚ć†ć”ć‚‡ć£ćØć“ć­ć¦ćƒ–ćƒ©ć‚¦ć‚¶ćƒ¼ę‹”å¼µćøč»¢ē”Øć—ćŸć‚‚ć®ć€‚ę°—č»½ć«ä½œć£ćŸć‚“ć ć‘ć©ć€ć€Œä¾æåˆ©ć ć€ćØ割ćØć‚¦ć‚±ćŒč‰Æć‹ćå¬‰ć—ć‹ć£ćŸć€‚ćŸć å®ŸćÆč‡Ŗåˆ†ć§ä½æć£ć¦ćŖć„ć®ć§ć€ä½•ćŒćć‚“ćŖ恫ä¾æ利ćŖć®ć‹ć‚ˆćć‚ć‹ć£ć¦ćŖ恄ā€¦ā€¦ć€‚

Pretty Letters

7꜈怂 怂Unicodeć§å®šē¾©ć•ć‚Œć¦ć„ć‚‹ē‰¹ę®ŠćŖč¦‹ćŸē›®ć®ę–‡å­—ć‚’č”Øē¤ŗ恙悋怂

å¤‰ć‚ć£ćŸč¦‹ćŸē›®ć®ę–‡å­—ć‚’ä½æć£ć¦ć‚‹äŗŗć‚’ćŸć¾ć«Twitterć§č¦‹ć‹ć‘ć¦ć€ćć‚Œć‚’čŖæć¹ć¦ćŸć®ćŒå§‹ć¾ć‚Šć€‚ć‚ćƒ¼é€†ć•ę–‡å­—ćØ恋悂悄悊恟恄ćŖ怂

ćƒ‡ć‚¶ć‚¤ćƒ³ćŒć²ć©ć„ć€‚

Potoshop (v0-1)

8꜈怂ć‚ÆćƒŖćƒƒćƒ—ćƒœćƒ¼ćƒ‰ć‹ć‚‰ē”»åƒć‚’č²¼ć‚Šä»˜ć‘ć€ć‚µć‚¤ć‚ŗå¤‰ę›“ć‚„ęž ć®ä»˜åŠ ć‚’č”Œć†ć ć‘ć€‚Photoshop恧ćÆćŖ恄怂

恂悋ꙩēœ ć‚Œćšć«ć„ć¦ć€č«¦ć‚ć¦čµ·ćć¦ć½ć”ć½ć”ć—ć¦ć‚‹ć†ć”ć«ć§ćć‚ćŒć£ćŸć‚‚ć®ć€‚ć“ć‚Œćć‚‰ć„ć®ē·Øé›†ćŒć§ćć‚‹ć‚„ć¤ćŒę¬²ć—ć‹ć£ćŸć€‚

ćć®å¾Œć‚‚ć£ćØ恂悌恓悌恗恟恄ćŖćØę€ć£ć¦äø€ć‹ć‚‰ä½œć‚Šē›“ć—ć¦ć„ć¦ć€å½“ę™‚ć®é¢å½±ćÆę®‹ć£ć¦ć„ćŖć„ć€‚ä»Šć§ć‚‚ć ć‚‰ć ć‚‰ć„ć˜ć£ć¦ć‚‹ā€¦ā€¦ć€‚äø€åŗ¦ēµ‚ć‚ć‚‰ć›ćŸę–¹ćŒč‰Æ恄悓恠悍ćŖ怂

ē”»åƒć‚¢ćƒƒćƒ—ćƒ­ćƒ¼ćƒ‰å‰ć«å°ć•ćć—ć¦č»¢é€é‡ć‚’ęø›ć‚‰ć™Railsć‚¢ćƒ—ćƒŖć®ä¾‹

8꜈怂Canvas悒ä½æć£ć¦ē”»åƒć‚’å°ć•ćć—ć€č»¢é€é‡ć²ć„ć¦ćÆč»¢é€ę™‚é–“ć‚’ęø›ć‚‰ć™ä¾‹ć€‚Railsć®ä½“ć ćŒäø»ćØćŖ悋恮ćÆć‚‚ć”ć‚ć‚“JavaScript怂

ēŸ„äŗŗ恋悉ē›øč«‡ć•ć‚Œć¦ć€Œć‚¢ćƒƒćƒ—ćƒ­ćƒ¼ćƒ‰ć‚’ę—©ćć™ć‚‹ć€ć‚³ćƒ¼ćƒ‰ć‚’ę›øć„ćŸć¤ć„ć§ć«ć¾ćØć‚ćŸć‚‚ć®ć€‚

ćć®å¾ŒExif恮orientationęƒ…å ±ļ¼ˆå›žč»¢ć€åč»¢ļ¼‰ć«åƾåæœć—恦ćŖ恄恓ćØć«ę°—ä»˜ć„ćŸć€‚ä»–ć®ćØ恓悍恧åƾåæœć—ćŸć‘ć©ć€ć“ć„ć¤ć«åę˜ ć—ć¦ćŖ恄悄怂

Rails悒Dockerć§å‹•ć‹ć™ä¾‹

8꜈怂Docker悒ä½æ恄态開ē™ŗē’°å¢ƒč‡Ŗä½“ć«Rubyć‚’ć‚¤ćƒ³ć‚¹ćƒˆćƒ¼ćƒ«ć—ćŖć„ć§å§‹ć‚ć‚‹ć‚„ć‚Šę–¹ć€‚

前čæ°ć®ä¾‹ć‚’ä½œć£ćŸć€ć•ć‚‰ć«ćć®ć¤ć„ć§ć€‚

ę›ø恄恦ćæ恟ćÆč‰Æ恄恑恩恩恆ćŖ悓恠恓悌怂

Understanding transform:matrix()

11꜈怂CSS恮 transform 恧ä½æćˆć‚‹é–¢ę•° matrix() ć®å‹•ćć‚’č¦–č¦šēš„恫試恛悋悂恮怂

č”Œåˆ—å¼ć‚’åˆ†ć‹ć‚Šć‚„ć™ćč§£čŖ¬ć™ć‚‹čؘäŗ‹ć‚’čŖ­ć‚“ć§ę„Ÿå‹•ć—ćŸć®ćŒćć£ć‹ć‘ć€‚čŖ­ćæćŖćŒć‚‰ć€Œć‚ćƒ¼ćć†ć‹ matrix() 恮悄恤ćÆ恓恆恄恆恓ćØć ć£ćŸć®ć‹ļ¼ć€ćØćŖć£ć¦ć€ć€Œć‚ć‚Œćć†ć ć£ć‘ļ¼Ÿć€€å‹•ć‹ć—恦ćæć‚‹ć‹ćƒ¼ć€ćæ恟恄ćŖęµć‚Œć‹ć‚‰ć€‚

Code Chat Cat

ęœŖå®Œęˆć€‚ćƒŖć‚¢ćƒ«ć‚æć‚¤ćƒ ć«Markdownꖇę›øć‚’å…±ęœ‰ć™ć‚‹ć€‚ćƒÆćƒ¼ć‚Æć‚·ćƒ§ćƒƒćƒ—ć§ć®åˆ©ē”Øć‚’ęƒ³å®šć€‚

電子黒ęæćæ恟恄ćŖę„Ÿć˜ć§ć€č¬›åø«ćŒę›ø恄恦ē”Ÿå¾’ćŒćć‚Œć‚’č¦‹ć‚‹ć£ć¦ć®ćŒę¬²ć—ć‹ć£ćŸć€‚HTMLćØ恗恦å‡ŗåŠ›ć•ć‚ŒćŸēµęžœćŒē”Ÿå¾’ć®ę‰‹å…ƒć«ć‚ć‚‹ć‚ˆć†ćŖēŠ¶ę…‹ć«ćŖ悋怂惑ćƒÆ惝ēš„ćŖ悄恤ćØęÆ”ć¹ćŸåˆ©ē‚¹ćÆć€č¦–åŠ›ćØć‹ć«ä¾ć‚‰ćŖ恄ē‚¹ć€ä»»ę„ć«ļ¼ˆ5分前ćØ恋ļ¼‰éŽåŽ»ć®ć‚‚ć®ć‚’č¦‹ć‚‰ć‚Œć‚‹ē‚¹ć€ć‚µćƒ³ćƒ—ćƒ«ć‚³ćƒ¼ćƒ‰ć‚’ć‚³ćƒ”ćƒšć§ćć‚‹ē‚¹ć€ćƒŖćƒ³ć‚ÆćŒę“»ćć‚‹ē‚¹ć€ćć—恦ē”Ÿå¾’ć®ååæœļ¼ˆč³Ŗ問ļ¼‰ć‚’ć™ćåę˜ ć—ć¦å…Øå“”ć«å±Šć‘ć€ę®‹ć›ć‚‹ē‚¹ć€‚

他恫悂ē”»åƒä»–ć®ćƒ•ć‚”ć‚¤ćƒ«ę·»ä»˜ć ęŽ§ćˆć‚ćŖć‚³ćƒŸćƒ„ćƒ‹ć‚±ćƒ¼ć‚·ćƒ§ćƒ³ć ä½•ć ćØ恋悓恠ćØč€ƒćˆć¦ć„ćŸć‚‰ć€UIć©ć†ć—ć‚ˆć†ćØę‚©ć‚“ć§ę‰‹ćŒę­¢ć¾ć£ć¦ć—ć¾ć£ćŸć€‚ę¬²ć—ć„ę©Ÿčƒ½ć‚’å‡ŗć—ć¦å†čØ­čØˆć—ć¦å‡ŗē›“恝恆怂

åå‰ćŒę°—ć«å…„ć£ć¦ć‚‹ć€‚ćŖ恊ēŠ¬ę“¾ć€‚

ć‚„ć£ćŸć“ćØ

JavaScriptå‹‰å¼·ć¤ć„ć§ć«ćƒ–ćƒ©ć‚¦ć‚¶ćƒ¼ę‹”å¼µļ¼ˆć‚¢ćƒ‰ć‚Ŗćƒ³ļ¼‰ć‚’ä½œć£ć¦ćæć‚ˆć†ćœä¼š

6꜈怂JavaScriptč‡Ŗä½“ć®åˆē“šč€…å‘ć‘ć®ćƒÆćƒ¼ć‚Æć‚·ćƒ§ćƒƒćƒ—ć€‚

ć‚„ć‚Šę–¹ć‚ć‹ć£ć¦ććŸć®ć§čæ‘ćć®äŗŗć«ćŠč£¾åˆ†ć‘ć—ćŸć‚„ć¤ć€‚ć”ć‚ƒć‚“ćØ初ē“šč€…恮äŗŗć‚‚ę„ć¦ćć‚Œć¦ć€ć‚„ć£ćŸē”²ę–ćŒć‚ć£ćŸć€‚ćƒ”ćƒƒć‚»ćƒ¼ć‚øćØ恋恧通äæ”ć—ć¦ć€Œå¢ƒē•Œć‚’ć¾ćŸćć€ćØ恄恆恮ćÆć€ć‚„ć£ć±ć‚Šé›£ć—ć„ę¦‚åæµćŖ恮恠ćØ再ē¢ŗčŖć€‚ć©ć†ć‚„ć£ćŸć‚‰ć†ć¾ćä¼ćˆć‚‰ć‚Œć‚‹ć ć‚ć†ć‹ć€‚

č³‡ę–™ä½œęˆćÆć€ć›ć£ć‹ććŖ恮恧VuePressć«ęŒ‘ęˆ¦ć€‚

配列ćØ恋恊悌恊悌Advent Calendar2018

12꜈怂JavaScriptć®é…åˆ—ćØē¹°ć‚Ščæ”ć—ć«ć¾ć¤ć‚ć‚‹čؘäŗ‹ć‚’1ꗄ恋悉24ę—„ć¾ć§ęÆŽę—„ęŠ•ēØæ怂

ęÆŽå¹“ę’ä¾‹ć®ć²ćØć‚Šć‚¢ćƒ‰ćƒ™ćƒ³ćƒˆć‚«ćƒ¬ćƒ³ćƒ€ćƒ¼ć€‚ä»Šå¹“ćÆå§‹ć¾ć‚‹å‰ć«å®ŒęˆåŽŸēØæ悒15ę—„åˆ†ē؋ē”Øę„ć§ććŸć®ć§ć€ęÆŽę—„ē· ć‚åˆ‡ć‚Šć«čæ½ć‚ć‚Œć‚‹ć“ćØćÆćŖć‹ć£ćŸā€¦ā€¦ćØčØ€ć„ćŸć‹ć£ćŸć‚“ć ć‘ć©ć€ēµå±€ęÆŽę—„č¦‹ē›“ć—ć¦å¤§å¹…ć«åŠ ē­†äæ®ę­£ć—ć¦ć„ćŸć®ć§ć€åæ™ć—ć‹ć£ćŸć€‚ę–°č¦ć«ę›ø恍恟恏ćŖć£ć¦ć—ć¾ć£ćŸć‚‚ć®ć‚‚ć‚ć‚Šć€å®ŸćÆ恄恏恤恋čؘäŗ‹ćŒä½™ć£ćŸć€‚

ęœ€åˆćÆęÆŽę—„ćƒ”ć‚½ćƒƒćƒ‰ć‚’ć²ćØ恤恚恤ē“¹ä»‹ć™ć‚‹ē؋åŗ¦ć®ć¤ć‚‚ć‚Šć ć£ćŸć‚“ć ć‘ć©ć€ę°—ćŒä»˜ć„ćŸć‚‰ä»•ę§˜ę›ø悒čŖ­ćæę¼ć£ć¦ć„ćŸā€¦ā€¦ć€‚ę„½ć—ć‹ć£ćŸć‹ć‚‰ć„ć„ć‘ć©ć€‚

čŖ­č€…ć®ęƒ³å®šćƒ¬ćƒ™ćƒ«ć‚‚č¬ŽćŖę„Ÿć˜ć«ćŖć£ć¦ć—ć¾ć£ćŸć€‚ć„ć‚„ćŠć‚ŒćÆę„½ć—ć‹ć£ćŸć‹ć‚‰ć„ć„ć‘ć©ļ¼

ę„å¹“ćÆ12ęœˆć«å…„ć‚‹å‰ć«å®ŒęˆåŽŸēØæ悒24ę—„åˆ†ē”Øꄏ恗恟恄怂

Lightning Talks

恄悍悓ćŖäŗŗć®č©±ć‚’čžććŸć„ćŖćØę€ć£ć¦ć€ć“ć“ę•°å¹“å€‹äŗŗēš„恫LTä¼šć‚’äø»å‚¬ć—恦恄悋怂

ę°—ćŒå‘ć„ćŸćØćć«ć‚„ć‚‹ę„Ÿć˜ćŖ悓恠恑恩态2018幓ćÆ5å›žé–‹å‚¬ć§ććŸć€‚ęœˆ1恏悉恄悒ē›®ęŒ‡ć—ćŸć„ć€‚å‚åŠ äŗŗꕰ恌å…Øē„¶čŖ­ć‚ćŖ恄悓恠悈ćŖćƒ¼ć€‚3äŗŗć ć£ćŸć‚Š13äŗŗć ć£ćŸć‚Šā€¦ā€¦ć€‚

仕äŗ‹

ę”¹å–„ć—ć¦ć“ć€‚

ćŠć—ć¾ć„

å…Ø体ēš„ć«ę°—ęŒć”ćŒå‘äøŠć—ć¦ććŸäø€å¹“ć ć£ćŸć€‚ć‚„ć£ć±ć‚Šä½•ć‹ä½œć‚‹ć®ćÆč‰Æ恄ćŖ恂怂

Vue.jsćØReactć®ć‚¢ćƒ—ćƒŖć‚’ć„ćć¤ć‹ä½œć£ć¦ćæć¦ć€ć‚ˆć†ć‚„ćć‚ć‹ć£ć¦ććŸę°—ćŒć™ć‚‹ć€‚ć‚ćØTypeScriptć«ć‚‚ć‚ˆć†ć‚„ćę‰‹ć‚’å‡ŗ恛恦态恓恄恤ćÆćŖ恋ćŖ恋恮game changer恘悃恭恈恋ćØ怂

ęœ¬å½“ćÆ怌ęÆŽęœˆć²ćØć¤ä½•ć‹ä½œć£ć¦å‡ŗ恙怍恌ē›®ęØ™ć ć£ćŸć‚“ć ć‘ć©ć€ć‚ć‚“ć¾ć‚Šé”ęˆć§ććŖć‹ć£ćŸć€‚ēµęžœēš„ć«ćć‚Œćć‚‰ć„ć®ę•°ćÆ悄悌恟恋悉ćƒØć‚·ćØ恙悋恋怂

2019幓

ä½œć‚Šć‹ć‘ć®ć‚‚ć®ćÆå®Œęˆć•ć›ćŸć„ć—ć€ä»–ć«ć‚‚ä½œć‚ŠćŸć„ć‚‚ć®ćÆć¾ć ć¾ć ć‚ć‚‹ć®ć§ć€ć©ć‚“ć©ć‚“ä½œć£ć¦ć‚†ćę‰€å­˜ć€‚

恂ćØć‚‚ć£ćØćƒÆćƒ¼ć‚Æć‚·ćƒ§ćƒƒćƒ—ć‚„ć‚ŠćŸć„ć§ć”ć–ć‚‹ć€‚