SourceKit-LSPをブラウザでコードを読むために活用する

SourceKit-LSPをブラウザでコードを読むために活用する
1. SourceKit for Safari Demo
2. SourceKit-LSPとは
3. LSP（Language Server Protocol）とは
4. SourceKit-LSPを使ってみる
5. SourceKit-LSPと通信する
6. Safari ExtensionとSourceKit-LSPを連携する
7. iPadでSourceKit-LSPを使う！？

w/ Presenter Note
https://www.icloud.com/keynote/0TuUNBtyBEnm5Mxqe0o7ROIRQ#iOSDC_-_SourceKit_LSP

Transcript

1. Kishikawa Katsumi
   SourceKit-LSPΛϒϥ΢βͰ
   ίʔυΛಡΉͨΊʹ׆༻͢Δ
   

   View Slide

2. ໨࣍
   1. SourceKit for Safari Demo
   
   2. SourceKit-LSPͱ͸
   
   3. LSPʢLanguage Server Protocolʣͱ͸
   
   4. SourceKit-LSPΛ࢖ͬͯΈΔ
   
   5. SourceKit-LSPͱ௨৴͢Δ
   
   6. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
   
   7. iPadͰSourceKit-LSPΛ࢖͏ʂʁ
   

   View Slide

3. SourceKit for Safari Demo
   

   View Slide

4. View Slide

5. SourceKit for Safari Demo
   Quick Help popup
   

   View Slide

6. SourceKit for Safari Demo
   Quick Help popup
   

   View Slide

7. SourceKit for Safari Demo
   Jumps to Definition
   

   View Slide

8. SourceKit for Safari Demo
   Find References
   

   View Slide

9. SourceKit for Safari Demo
   Highlights References
   

   View Slide

10. GitHub Code Navigation
    https://docs.github.com/en/github/managing-files-in-a-repository/navigating-code-on-github
    

    View Slide

11. SourceKit-LSPͱ͸
    

    View Slide

12. SourceKit-LSPͱ͸
    SourceKit-LSP is an implementation of the Language Server
    Protocol (LSP) for Swift and C-based languages.
    
    It provides features like code-completion and jump-to-definition to
    editors that support LSP.
    
    SourceKit-LSP is built on top of sourcekitd and clangd for high-fidelity
    language support, and provides a powerful source code index as well
    as cross-language support.
    https://github.com/apple/sourcekit-lsp
    

    View Slide

13. SourceKit-LSPͱ͸
    • SwiftɺCɺC++ɺObjective-C༻ͷLanguage Server Protocolͷ࣮૷
    
    • LSPʢLanguage Server ProtocolʣΛαϙʔτ͢ΔςΩετΤσΟλͰ

    ίʔυิ׬΍ఆٛݩʹδϟϯϓͳͲͷػೳ͕࢖͑ΔΑ͏ʹͳΔ
    
    • SourceKit-LSP͸sourcekitdͱclangdͱ࿈ܞͯͦ͠ΕΒͷػೳΛఏڙ͍ͯ͠Δ
    

    View Slide

14. LSPʢLanguage Server Protocolʣͱ͸
    Adding features like auto complete, go to definition, or documentation on hover for a
    programming language takes significant effort. Traditionally this work had to be
    repeated for each development tool, as each tool provides different APIs for
    implementing the same feature.
    
    A Language Server is meant to provide the language-specific smarts and
    communicate with development tools over a protocol that enables inter-process
    communication.
    
    The idea behind the Language Server Protocol (LSP) is to standardize the protocol for
    how such servers and development tools communicate. This way, a single Language
    Server can be re-used in multiple development tools, which in turn can support
    multiple languages with minimal effort.
    https://microsoft.github.io/language-server-protocol/
    

    View Slide

15. LSPʢLanguage Server Protocolʣͱ͸
    LSPʢLanguage Server Protocolʣ͸IDEͰඞཁͱ͞ΕΔιʔείʔυͷΦʔτ
    ίϯϓϦʔτ΍γϯϘϧͷఆٛݩʹδϟϯϓ͢ΔͳͲͷϓϩάϥϜΛղੳͯ͠
    ৘ใΛఏڙ͢ΔػೳΛαʔϏεͱ࣮ͯ͠ݱ͢Δ΋ͷͰ͢ɻ
    
    IDEͰඞཁͱ͞ΕΔػೳͱ͍͏΋ͷ͸ɺϓϩάϥϛϯάݴޠ͕มΘͬͯ΋΍Γͨ
    ͍͜ͱ͸΄΅ಉ͡Ͱ͢ɻLSP͕ొ৔͢ΔҎલ͸ݴޠ͝ͱͷIDE͕ͦΕͧΕ࣮૷͠
    ͯఏڙ͍ͯ͠·ͨ͠ɻ
    
    LSP͸ɺ͜ͷΑ͏ͳݴޠ͕มΘͬͯ΋ڞ௨ͯ͠ٻΊΒΕΔIDEͷػೳΛந৅Խ͠
    ͯ։ൃπʔϧ͔Β࢖͑ΔΑ͏ʹ͢Δ࢓༷Ͱ͢ɻ
    

    View Slide

16. LSPʢLanguage Server Protocolʣͱ͸
    https://nshipster.com/language-server-protocol/
    

    View Slide

17. SourceKit-LSPΛ࢖ͬͯΈΔ
    

    View Slide

18. SourceKit-LSPΛ࢖ͬͯΈΔ
    1. SourceKit-LSPΛೖख͢Δ
    
    2. ςΩετΤσΟλͰSourceKit-LSPΛར༻͢ΔઃఆΛ͢Δ
    
    3. swift buildίϚϯυͰϓϩδΣΫτΛϏϧυ͢Δ
    
    4. ςΩετΤσΟλͰϓϩδΣΫτΛ։͘
    https://github.com/apple/sourcekit-lsp#getting-started
    

    View Slide

19. SourceKit-LSPΛ࢖ͬͯΈΔ
    with VS Code
    1. SourceKit-LSP Visual Studio Code extensionΛϏϧυɾΠϯετʔϧ
    
    2. VS CodeʹSourceKit-LSPͷઃఆΛ͢Δ
    https://github.com/apple/sourcekit-lsp/tree/master/Editors#visual-studio-code
    

    View Slide

20. SourceKit-LSPΛ࢖ͬͯΈΔ
    Visual Studio Code extensionΛϏϧυɾΠϯετʔϧ
    

    View Slide

21. View Slide

22. xcrun --find sourcekit-lsp
    

    View Slide

23. SourceKit-LSPΛ࢖ͬͯΈΔ
    

    View Slide

24. SourceKit-LSPΛ࢖ͬͯΈΔ
    

    View Slide

25. SourceKit-LSPΛ࢖ͬͯΈΔ
    iOS SDKΛར༻͢ΔઃఆΛ௥Ճ
    

    View Slide

26. SourceKit-LSPΛ࢖ͬͯΈΔ
    

    View Slide

27. SourceKit-LSPͱ௨৴͢Δ
    

    View Slide

28. SourceKit-LSPͱ௨৴͢Δ
    https://microsoft.github.io/language-server-protocol/overviews/lsp/overview/
    A language server runs as a separate process and development tools communicate with the server using the
    language protocol over JSON-RPC.
    

    View Slide

29. SourceKit-LSPͱ௨৴͢Δ
    https://microsoft.github.io/language-server-protocol/overviews/lsp/overview/
    Request Response
    

    View Slide

30. SourceKit-LSPͱ௨৴͢Δ
    https://microsoft.github.io/language-server-protocol/specifications/specification-current/
    Request Response
    Content-Length: ...\r\n
    \r\n
    {
    "jsonrpc": "2.0",
    "id": 1,
    "method": "textDocument/didOpen",
    "params": {
    ...
    }
    }
    Header
    Content
    

    View Slide

31. 㽟
    㽠
    㽡
    

    View Slide

32. View Slide

33. SourceKit-LSPͱ௨৴͢Δ
    VS Code LSP
    initialize
    initialized
    didOpen
    hover
    hover
    didOpen
    hover
    

    View Slide

34. SourceKit-LSPͱ௨৴͢Δ
    The protocol does not make any provisions about how requests,
    responses and notifications are transferred between client and server.
    
    https://en.wikipedia.org/wiki/Language_Server_Protocol#Transport_layer
    

    View Slide

35. SourceKit-LSPͱ௨৴͢Δ
    The protocol does not make any provisions about how requests,
    responses and notifications are transferred between client and server.
    
    In this implementation, an editor communicates through stdin/stdout
    with the TypeScript server process and uses a JSON payload
    https://en.wikipedia.org/wiki/Language_Server_Protocol#Transport_layer
    https://docs.microsoft.com/en-us/visualstudio/extensibility/language-server-protocol?view=vs-2019#how-work-on-the-lsp-started
    

    View Slide

36. View Slide

37. SourceKit-LSPͱ௨৴͢Δ
    

    View Slide

38. SourceKit-LSPͱ௨৴͢Δ
    

    View Slide

39. SourceKit-LSPͱ௨৴͢Δ
    

    View Slide

40. SourceKit-LSPͱ௨৴͢Δ
    

    View Slide

41. SourceKit-LSPͱ௨৴͢Δ
    

    View Slide

42. View Slide

43. Symbols Hover
    

    View Slide

44. https://github.com/kishikawakatsumi/SourceKitForSafari
    SourceKit-LSPͱ௨৴͢Δ
    

    View Slide

45. https://github.com/kishikawakatsumi/SourceKitForSafari
    

    View Slide

46. https://github.com/kishikawakatsumi/SourceKitForSafari
    SourceKit-LSPͱ௨৴͢Δ
    

    View Slide

47. Safari Extensionͱ
    SourceKit-LSPΛ࿈ܞ͢Δ
    

    View Slide

48. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    Safari Extension
    https://developer.apple.com/documentation/safariservices/safari_app_extensions
    

    View Slide

49. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    Safari Extension
    

    View Slide

50. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    Safari Extension
    SourceKit-LSP
    

    View Slide

51. Chrome ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    Chrome Extension
    SourceKit-LSP Native Messaging
    

    View Slide

52. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    App Side
    

    View Slide

53. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    JS Side
    

    View Slide

54. iPadͰSourceKit-LSPΛ࢖͏ʂʁ
    

    View Slide

55. View Slide

56. ·ͱΊ
    • SourceKit-LSPΛ࢖͏ͱXcode͕ఏڙ͍ͯ͠Δίʔυิ׬΍ϦϑΝΫλϦϯά
    ͷ৘ใΛऔಘͰ͖Δ
    
    • SourceKit-LSP͸ΫϥΠΞϯτϥΠϒϥϦ΋͋ΔͷͰ࿈ܞ͢Δ͜ͱ͸೉͘͠ͳ
    ͍
    
    • HTTPӽ͠ʹSourceKit-LSPΛૢ࡞͢ΔͱXcode for iOS͕࡞ΕΔ͔΋ʁ
    
    • SourceKit for SafariʢChrome֦ு΋͋Γ·͢ʣࢀߟʹ͍ͯͩ͘͠͞

    https://github.com/kishikawakatsumi/SourceKitForSafari
    

    View Slide